العنصر <button>

يُمثِّل العنصر <button> زرًا قابلًا للضغط.

مثال عن استخدام العنصر <button>:

<button name="button">Click me</button>

تصنيفات المحتوى	عنصر تنظيمي وعنصر عادي، وعنصر تفاعلي ...
المحتوى المسموح	المحتوى العادي.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى العادي.
واجهة DOM	HTMLButtonElement

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

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

autofoucs

تسمح لنا هذه الخاصية المنطقية (Boolean) بتحدد أنَّنا نريد أن ينتقل التركيز (focus) إلى هذا الزر عند تحميل الصفحة ما لم يغيّره المستخدم (مثل الكتابة في عنصر إدخال مختلف).

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

مثال

مثال عن استخدام الخاصية autofoucs للتركيز التلقائي على هذا الزر عند إكمال المتصفح تحميل الصفحة:

<button name="button" autofocus>Click me</button>

disabled

تُشير هذه الخاصية المنطقية (Boolean) إلى أنَّ المستخدم لا يستطيع التفاعل مع هذا الزر، وإذا لم تُحدَّد قيمة لهذه الخاصية فسترث قيمتها من العنصر الحاوي لها مثل العنصر <fieldset>، وإذا لم يكن هنالك عنصرٌ حاوٍ لهذا العنصر له الخاصية disabled، فسيكون الزر مفعّلًا.

مثال

مثال عن استخدام الخاصية disabled لتعطيل هذا الزر افتراضيًا:

<button name="button" disabled>Cannot click me</button>

form

تُحدِّد هذه الخاصية ما هو النموذج الذي ينتمي هذا الزر إليه، ويجب أن تكون قيمة هذه الخاصية هي مُعرِّف id لعنصر <form> في المستند نفسه.

إن لم تُحدَّد قيمة هذه الخاصية فسيرتبط الزر مع عنصر <form> الأب له إن وجد.

تسمح لك هذه الخاصية بربط عناصر <button> إلى عناصر <form> الموجودة في أي مكان في المستند، لكن لا يجوز أن يرتبط عنصر <button> موجود ضمن عنصر <form> إلى عنصر <form> آخر.

مثال

مثال عن استخدام الخاصية form لتحديد أنَّ هذا الزر ينتمي إلى النموذج ذي المُعرِّف form1:

<form action="action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname">
</form>

<button type="submit" form="form1">Submit</button>

fromaction

رابط URI للبرنامج الذي يُعالِج المعلومات المُرسَلة عبر هذا الزر.

إذا حُدِّدَت قيمة لهذه الخاصية فستتجاوز القيمة الموجودة في الخاصية action للنموذج الذي يتبع هذا الزر له.

مثال

مثال عن استخدام الخاصية fromaction لتغيير الصفحة التي ستعالج بيانات هذا النموذج، مع استخدام الخاصية form كمّا بيّنا سابقًا:

<form action="action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname">
</form>

<button type="submit" form="form1">Submit</button>
<button type="submit" form="form1" formaction="action_page2.php">Submit to page2</button>

formenctype

إذا كان هذا الزر هو زر الإرسال (submit button) فستُحدِّد هذه الخاصية ما هو نوع المحتوى التي سيُستخدَم لإرسال بيانات النموذج إلى الخادوم. القيم الممكنة هي:

• application/x-www-form-urlencoded: القيمة الافتراضية إن لم تُحدَّد قيمة لهذه الخاصية.
• multipart/form-data: استخدم هذه القيمة إن كنتَ تستعمل العنصر <input> في النموذج وضبطتَ الخاصية type إلى file.
• text/plain.

إذا حُدِّدَت قيمة لهذه الخاصية فستتجاوز القيمة الموجودة في الخاصية enctype للنموذج الذي يتبع هذا الزر له.

formmethod

إذا كان هذا الزر هو زر الإرسال (submit button) فستُحدِّد هذه الخاصية ما هي طريقة الإرسال عبر HTTP (أي HTTP method) التي يجب أن يستعملها المتصفح لإرسال النموذج. القيم الممكنة هي:

• post: إرسال بيانات النموذج ضمن جسم طلبية HTTP.
• get: إسناد بيانات النموذج إلى رابط URI للهدف، مع استعمال الرمز ? لفصل اسم الصفحة عن البيانات، ثم إرسال رابط URI الناتج إلى الخادوم. استخدم هذه الطريقة إن لم تكن هنالك تأثيرات جانبية لنموذجك وكان يحتوي على محارف ASCII فقط.

إذا حُدِّدَت هذه الخاصية فستتجاوز القيمة الموجودة في الخاصية method للنموذج الذي يتبع له هذا الرز.

مثال

مثال عن استخدام الخاصية formmethod لتغيير الطريقة التي ستُرسَل بها بيانات هذا النموذج، مع استخدام الخاصية form والخاصية formaction كمّا بيّنا سابقًا:

<form action="action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname">
</form>

<button type="submit" form="form1">Submit</button>
<button type="submit" form="form1" formaction="action_page2.php" formmethod="post">Submit to page2 using POST</button>

formnovalidate

إذا كان الزر هو زر إرسال، فهذه القيمة المنطقية تقول أنَّ على المتصفح عدم التحقق من صحة الحقول في النموذج. وإذا حُدِّدَت قيمة لهذه الخاصية فستتجاوز القيمة الموجودة في الخاصية novalidate للنموذج الذي يتبع هذا الزر له.

مثال

مثال عن استخدام الخاصية formnovalidate كي لا يتحقق المتصفح من بيانات هذا النموذج، مع استخدام الخاصية form كمّا بيّنا سابقًا:

<form action="action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname">
</form>

<button type="submit" form="form1">Submit</button>
<button type="submit" form="form1" formnovalidate>Submit without validation</button>

formtarget

إذا كان الزر هو زر إرسال، فهذه الخاصية تأخذ كلمةً محجوزةً تشير إلى المكان الافتراضي لعرض الناتج عندما تُسبِّب الروابط أو عناصر النماذج بالانتقال إلى صفحةٍ أخرى وذلك إذا لم تُحدِّد تلك العناصر قيمةً خاصةً لهذه الخاصية. إذا حُدِّدَت قيمة لهذه الخاصية فستتجاوز القيمة الموجودة في الخاصية target للنموذج الذي يتبع هذا الزر له.

الكلمات المحجوزة التالية لها معانٍ خاصة:

• ‎__self: عرض النتيجة مكان الصفحة الحالية. هذه هي القيمة الافتراضية إذا لم تُحدَّد قيمةٌ أخرى.
• ‎__blank: عرض الصفحة في نافذة جديدة.
• ‎__parent: ستعرض الصفحة مكان الصفحة الأب التي ينتمي إليها iframe، وإذا لم تكن هنالك صفحة أب فستسلك هذه القيمة سلوك القيمة ‎__selfنفسه.
• ‎__top: عرض الصفحة مكان أعلى صفحة في الهيكلية (أي الصفحة التي تكون من الآباء المباشرين أو غير المباشرين للصفحة الحالية وليس لها صفحة أب). إذا لم تكن هنالك صفحة أب فستسلك هذه القيمة سلوك القيمة ‎__self نفسه.

name

اسم الزر، والذي سيُرسَل مع بيانات النموذج.

type

نوع الزر، وتأخذ هذه الخاصية إحدى القيم الآتية:

• submit: سيؤدي الضغط على هذا الزر إلى إرسال بيانات النموذج إلى الخادوم، وهذه هي القيمة الافتراضية إن لم تُحدَّد قيمةٌ أخرى، أو إذ غُيّرَت القيمة ديناميكيًا إلى قيمة فارغة أو غير صالحة.
• reset: سيؤدي الضغط على هذا الزر إلى إعادة ضبط جميع عناصر النموذج إلى قيمها الابتدائية.
• button: لن يكون لهذا الزر سلوكٌ افتراضي، وإنما قد ترتبط به شيفرات برمجية تُنفَّذ عند وقوع حدث الضغط.
• menu: هذا الزر سيفتح قائمة منبثقة مُعرَّفة عبر عنصر <menu>.

value

القيمة الابتدائية للزر، وهي تُعرِّف القيمة التي سترتبط بالزر عند إرسال بيانات النموذج، التي ستُمرَّر إلى الخادوم.

ملاحظات

إنَّ تنسيق عناصر <button> أسهل بكثير من تنسيق عناصر <input>، إذ تستطيع إضافة محتوى HTML داخلها مثل <em> و <strong> وحتى العنصر <img>، ويمكنك استخدام العناصر الوهمية ‎:after و ‎:before لكي تعرض العنصر كما تشاء، بينما عناصر <input> لا تقبل إلا القيم النصية.

مصادر ومواصفات

• معيار HTML Living Standard.
• مواصفة HTML5.
• مواصفة HTML 4.01.