HTML/input/radio

عناصر <input> ذات النوع radio تُعرَض افتراضيًا كأيقونات دائرية يمكن التأشير عليها لتفعيل الحقل، تستخدم أزرار الانتقاء (radio buttons) لاختيار قيمة من مجموعة قيم.

سميت هذه الأزرار بأزرار radio لأنها تشبه (شكلًا ووظيفةً) الأزرار الموجودة في أجهزة الراديو القديمة (انظر إلى الصور في هذه الصفحة لأمثلة).

<label for="radio">زر انتقاء</label>
<input type="radio" name="radio" id="radio">

أزرار الانتقاء (radio buttons) تشبه صناديق التأشير (checkboxes) لكن هنالك فرق مهم بينهما، فأزرار الانتقاء تستخدم لاختيار قيمة من مجموعة قيم، بينما صناديق التأشير تسمح لك بتفعيل أو تعطيل القيم. فلو كانت هنالك عدِّة خيارات، فتسمح أزرار الانتقاء باختيار قيمة منها، بينما أزرار صناديق التأشير تسمح بتحديد عدِّة قيم.

الخاصية value

تحتوي الخاصية value على سلسلة نصية (DOMString)، وهذه القيمة لا تظهر للمستخدم وإنما ستُرسَل إلى الخادوم مرتبطةً مع اسم زر الانتقاء (الخاصية name):

<form>
اختر جسنك:
  <div>
    <input type="radio" id="genderChoice1" name="gender" value="male">
    <label for="genderChoice1">ذكر</label>

    <input type="radio" id="genderChoice2" name="gender" value="female">
    <label for="genderChoice2">انثى</label>

    <input type="radio" id="genderChoice3" name="gender" value="notSpecified">
    <label for="genderChoice3">أفضل عدم الافصاح</label>
  </div>
  <div>
    <button type="submit">أرسل</button>
  </div>
</form>

لدينا في هذا المثال ثلاثة أزرار انتقاء تُمثِّل نموذجًا تقليديًا لاختيار الجنس، وأوّل زر انتقاء له id بقيمة genderChoice1 وخاصية name بقيمة gender وقيمة الخاصية value تساوي male. وإذا اختار المستخدم أوّل خيار، فستُرسَل البيانات إلى النموذج على الشكل gender=male.

إذا لم تُحدَّد قيمة للخاصية value فستُعطى القيمة الافتراضية on، أي ستكون البيانات التي ستُرسَل إلى النموذج على الشكل gender=on، لكن من غير المنطقي أن تكون القيمة on، لذا احرص على ضبط الخاصية value بقيم ذات معنى.

إذا كان زر الانتقاء غير مُفعّل عند إرسال النموذج، فلن تُرسَل أيّة قيمة إلى الخادوم لتقول أنَّ الزر غير مُفعّل.

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

عندما يكون لزرَّي انتقاء أو أكثر القيمة نفسها في الخاصية name، فاختيار أحد تلك الأزرار سيؤدي إلى إلغاء اختيار بقية الأزرار التابعة للمجموعة نفسها في الصفحة، أما بقية المجموعات (التي تكون لها قيمة مختلفة للخاصية name) فلن تتأثر.

استخدام أزرار الانتقاء

شرحنا الاستعمال الأساسي لأزرار الانتقاء أعلاه، لكن دعنا نلقي نظرة على الميزات والتقنيات الشائعة والتي تستخدم مع أزرار الانتقاء.

تفعيل أحد أزرار الانتقاء افتراضيًا

لجعل أحد أزرار الانتقاء مُفعّلًا افتراضيًا، فاستخدم الخاصية checked عليه، كما في المثال الآتي:

<form>
اختر جسنك:
  <div>
    <input type="radio" id="genderChoice1" name="gender" value="male">
    <label for="genderChoice1">ذكر</label>

    <input type="radio" id="genderChoice2" name="gender" value="female">
    <label for="genderChoice2">انثى</label>

    <input type="radio" id="genderChoice3" name="gender" value="notSpecified" checked>
    <label for="genderChoice3">أفضل عدم الافصاح</label>
  </div>
  <div>
    <button type="submit">أرسل</button>
  </div>
</form>

سنلاحظ أنَّ آخر زر انتقاء قد تم اختياره افتراضيًا.

ملاحظة: إذا وضعتَ الخاصية checked على أكثر من زر انتقاء تابع للمجموعة نفسها، فسيتم اختيار آخر عنصر له هذه الخاصية في مصدر الصفحة.

توفير منطقة أكبر لتسهيل الضغط على زر الانتقاء

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

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

لا توجد فائدة حقيقة من التحقق من قيمة هذا الحقل.

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

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