HTMLالوسم <button>

تعريفه

نستخدم الوسم <button> على النحو التالي <button>text</button> لعرض زر يمكن النقر عليه.

مكان الكلمة text نضع النص الذي سيظهر عليه.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <button>.

خصائصه

نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.

الخاصية autofocus

يمكن إضافتها للوسم لإعلام المتصفح أنه عند فتح الصفحة سيتم إعتبار أن المستخدم يقف عنده.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية disabled

يمكن إضافتها للوسم لجعله غير مفعل مما يعني أنه سيظهر في الصفحة و لكن لن يكون بإمكان المستخدم النقر عليه.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية form

يمكن إضافتها للوسم لتحديد إلى أي نموذج هو تابع و هذا الأمر يمكنك فعله في حال كان الوسم موضوع خارج النموذج و تريد ربطه به.
يجب وضع id النموذج الذي يتبع له كقيمة للخاصية.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية formaction

في حال كان الوسم نوعه submit يمكن إضافتها له لتحديد الرابط الذي سيتم إرسال البيانات المدخلة في النموذج إليه.
يجب تمرير الرابط الذي سيتم إرسال البيانات المدخلة في النموذج له كقيمة لها.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية formenctype

في حال كان الوسم نوعه submit يمكن إضافتها له لتحديد نوع البيانات التي سيتم إرسالها من النموذج.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية formenctype لتحديد نوع البيانات التي سيتم إرسالها.

الخاصية formmethod

في حال كان الوسم نوعه submit يمكن إضافتها له لتحديد طريقة إرسال البيانات من النموذج إلى الموقع.
يجب تمرير القيمة get أو القيمة post لهذه الخاصية لتحديد الطريقة التي سيتم فيها إرسال البيانات.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية formnovalidate

في حال كان الوسم نوعه submit يمكن إضافتها له لإعلام المتصفح بأن يرسل بيانات النموذج كما هي حتى و إن كانت البيانات المدخلة في حقول النموذج أنواعها غير صحيحة و المتصفح يظهر تحذيرات تفيد بأنها كذلك.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية formtarget

في حال كان الوسم نوعه submit يمكن إضافتها له لتحديد أين سيتم فتح الصفحة التي ستتلقى البيانات المرسلة من النموذج.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية target لتحدد أين سيتم فتح الرابط الذي يتم توجيه المستخدم إليه.

الخاصية name

يمكن إضافتها للوسم بهدف إعطائه إسم حتى يتم إرساله مع البيانات التي يتم إرسالها في النموذج.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية type

يمكن إضافتها للوسم لتحديد نوعه, و نقصد بذلك تحديد الهدف من استخدامه أو ما سيحدث عند النقر عليه.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية type لتحديد نوع الوسم.

الخاصية value

يمكن إضافتها للوسم بهدف إعطائه قيمة حتى يتم إرسالها مع البيانات التي يتم إرسالها في النموذج.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

إستخدامه

في المثال التالي قمنا بإضافة زر عادي و لم نحدد ما سيحدث عند النقر عليه.

<button type="button">Click Me</button>

في المثال التالي قمنا بإضافة زر يقوم بإرسال البيانات المدخلة في النموذج بشكل تلقائي عند النقر عليه و زر يقوم بتصفير جميع حقول النموذج بمعنى أنه يعيد القيم الأولية التي كانت فيها عند فتح الصفحة.

<button type="submit">Submit</button>
<button type="reset">Reset</button>

في المثال التالي قمنا بإضافة زر عادي عند النقر عليه سيتم إظهار رسالة ترحيب بداخل نافذة منبثقة.

<button onclick="alert('Hi User!');">Display Message</button>

تصميمه الإفتراضي

لا يوجد تصميم إفتراضي له.

نصائح و ملاحظات

في حال عرض الزر بداخل الصفحة لا حاجة لتحديد نوعه، أما في حال عرضه بداخل نموذج ( Form ) فيجب تحديد ذلك.

أهم ما يميز الزر الذي يتم إنشاؤه بواسطة الوسم <input type="button"> عن الزر الذي يتم إنشاؤه بواسطة الوسم <button> </button> هو أن هذا الأخير يمكن وضع أي محتوى بداخله مثل <br> - <img> - <b> - <i> إلخ..