أزرار الاختيار الأحادي Radio | الحقول الاختيارية في HTML Form

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

توفر أزرار الاختيار الأحادي <input type="radio"> واجهة لاختيار بديل واحد فقط من بين مجموعة من الخيارات المحددة مسبقاً. ويتطلب إنشاء مجموعة متناسقة تعيين نفس قيمة خاصية الاسم name لكافة أزرار المجموعة.

الصف 2 كود برمجي

HTML

<!-- Mutually exclusive shipping speed radio group -->
<form action="/checkout" method="post">
  <fieldset>
    <legend>Select Delivery Method:</legend>
    <input id="del-std" name="shipping"
           type="radio" value="standard" checked>
    <label for="del-std">Standard Ground Delivery</label>
    <input id="del-exp" name="shipping"
           type="radio" value="express">
    <label for="del-exp">Express Priority Air</label>
  </fieldset>
</form>

جرّب بنفسك

الصف 3 صورة توضيحية

مقارنة السلوك البرمجي لأزرار الاختيار الأحادي Radio ومربعات الاختيار المتعدد Checkbox

الصف 4 شرح توضيحي

عندما ينقر المستخدم على أي زر ضمن المجموعة، يلغي المتصفح اختيار الزر السابق تلقائياً. كما لا يمكن إلغاء تحديد الزر بالنقر عليه مرة ثانية، بل يتطلب التراجع اختيار بديل آخر داخل نفس المجموعة.

الصف 5 ملاحظة هامة

Radio Inputs and Exclusive Choices أزرار الاختيار الأحادي Radio

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (الحقول الاختيارية في HTML Form)