HTML/input/button

عناصر <input> ذات النوع button تُعرَض كأزرار عادية، والتي يمكن برمجتها للتحكم بأي شيء في الصفحة عبر ربط دالة معالجة أحداث معها (التي تُعالِج الحدث click عادةً).

وعلى الرغم من أنَّ عناصر <input> ذات النوع button صحيحة تمامًا في HTML، لكن من المفضّل استخدام عنصر <button> الجديد لإنشاء الأزرار، لأن له ميزات إضافية، مثل دعمه للقيمة menu في الخاصية type التي تعني أنَّ الزر يستعمل لتفعيل قائمة منبثقة، والسماح بإضافة نص اللافتة للعنصر <button> بين وسم البداية ووسم النهاية مما يمكّننا من إضافة عناصر HTML الأخرى ضمنه بما في ذلك الصور.

<input type="button" value="Click Me">

الخاصية value

تحتوي الخاصية value في الحقل button على سلسلة نصية (DOMString) التي ستستعمل كلافتة للزر.

<input type="button" value="Click Me">

أما إذ لم تُحدَّد قيمة للخاصية value فسيظهر زر فارغ:

<input type="button">

استخدام الأزرار

الحقل button ليس له سلوك افتراضي (بينما أقرباؤه submit و reset يستعملان لإرسال بيانات النموذج وإعادة تعيين حقوله، على التوالي وبالترتيب).

يجب كتابة شيفرة JavaScript التي تكون مسؤولة عن جعل الزر يؤدي عملًا ما.

زر بسيط

سنبدأ بإنشاء زر بسيطة مرتبط بدالة لمعالجة الحدث click لبدء تشغيل آلة ما (حيث سنُبدِّل قيمة الخاصية value في العنصر <input> والمحتوى النصي للفقرة <p> التي تلي العنصر):

<form> 
  <input type="button" value="Start machine">
</form>
<p>The machine is stopped.</p>

شيفرة JavaScript المسؤولة عن سلوك الحقل button:

var btn = document.querySelector('input');
var txt = document.querySelector('p');

btn.addEventListener('click', updateBtn);

function updateBtn() {
  if (btn.value === 'Start machine') {
    btn.value = 'Stop machine';
    txt.textContent = 'The machine has started!';
  } else {
    btn.value = 'Start machine';
    txt.textContent = 'The machine is stopped.';
  }
}

ستحصل الشيفرة السابقة على مرجعية إلى كائن HTMLInputElement الذي يُمثِّل العنصر <input> في شجرة DOM، وستحفظ تلك المرجعية في المتغير btn؛ ثم ستستعمل الدالة addEventListener()‎ لتحديد ما هي الدالة التي ستُشغَّل عند وقوع الحدث click على الزر.

إضافة اختصار إلى الزر عبر لوحة المفاتيح

اختصارات لوحة المفاتيح -والتي تعرف أيضًا باسم مفاتيح الوصول (access keys)- تسمح للمستخدم بتفعيل زر باستخدام تجميعة من الأزرار على لوحة المفاتيح.

لإضافة اختصار لوحة مفاتيح إلى زرٍ ما فاستعمل الخاصية العامة accesskey.

على سبيل المثال، جعلنا القيمة s قيمةً للخاصية accesskey، أي عليك أن تضغط على زر s إضافةً إلى الزر الذي يستخدم لاختصارات لوحة المفاتيح على نظام تشغيلك (الزر alt على نظامَي ويندوز ولينكس).

<form>
  <input type="button" value="Start machine" accesskey="s">
</form>
<p>The machine is stopped.</p>

المشكلة مع المثال السابق هي أنَّ المستخدم لن يعرف ما هو اختصار لوحة المفاتيح للزر السابق! وبالتالي عليك أن توفِّر هذه المعلومات في موقعك بشكلٍ لا يتداخل مع تصميم الموقع (مثل توفير رابط يشرح ما هي اختصارات لوحة المفاتيح المستعملة في الموقع).

تفعيل وتعطيل الأزرار

لتعطيل أحد الأزرار فاستخدم الخاصية disabled عليه، كما في المثال الآتي:

<input type="button" value="Disable me" disabled>

يمكننا تفعيل وتعطيل الأزرار في وقت التنفيذ عبر ضبط قيمة الخاصية disabled إلى true أو false. هذا مثال عن تفعيل وتعطيل أحد الأزرار باستخدام JavaScript، إذا سيبدأ الزر وهو مُفعّل وإذا ضغطتَ عليه فسيعطّل باستخدام btn.disabled = true، ثم ستُستدعى الدالة setTimeout()‎ لإعادة الزر إلى حالته الأصلية (أي مفعّل) بعد ثانيتين:

<input type="button" value="Enabled">

شيفرة JavaScript:

var btn = document.querySelector('input');

btn.addEventListener('click', disableBtn);

function disableBtn() {
  btn.disabled = true;
  btn.value = 'Disabled';
  window.setTimeout(function() {
    btn.disabled = false;
    btn.value = 'Enabled';
  }, 2000);
}

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

<fieldset>
  <legend>Button group</legend>
  <input type="button" value="Button 1">
  <input type="button" value="Button 2">
  <input type="button" value="Button 3">
</fieldset>

شيفرة JavaScript:

var btn = document.querySelector('input');
var fieldset = document.querySelector('fieldset');

btn.addEventListener('click', disableBtn);

function disableBtn() {
  fieldset.disabled = true;
  window.setTimeout(function() {
    fieldset.disabled = false;
  }, 2000);
}

التحقق من الحقل

ليس هنالك فائدة من التحقق من قيمة الحقل button.

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

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