أزرار الراديو في HTML

أزرار الراديو في HTML

يا هلا! اليوم بنتكلم عن أزرار الراديو في HTML. هذي الأزرار رهيبة لما تحتاج المستخدم يختار خيار واحد فقط من مجموعة خيارات.

الأساسيات: كيف تسوي زر راديو؟

عشان تسوي زر راديو، تستخدم وسم مع type="radio". الأهم هنا إنك تعطي كل الأزرار اللي تنتمي لنفس المجموعة نفس name. هذا هو اللي يخلي المتصفح يفهم إنها مجموعة وحدة ويسمح باختيار واحد بس.

لازم بعد تعطي كل زر value عشان تعرف وش الخيار اللي اختاره المستخدم لما يرسل الفورم. ولا تنسى id و عشان تحسين تجربة المستخدم وإمكانية الوصول.

<form>
  <p>ما هي فاكهتك المفضلة؟</p>
  <input type="radio" id="apple" name="fruit" value="تفاح">
  <label for="apple">تفاح</label><br>

  <input type="radio" id="banana" name="fruit" value="موز">
  <label for="banana">موز</label><br>

  <input type="radio" id="orange" name="fruit" value="برتقال">
  <label for="orange">برتقال</label>
</form>

لاحظ إن كل الأزرار عندها name="fruit". هذا هو السر عشان تشتغل كمجموعة.

كيف تخلي خيار محدد افتراضياً؟

تبغى خيار يكون محدد أول ما تفتح الصفحة؟ استخدم خاصية checked.

<form>
  <p>ما هو متصفحك المفضل؟</p>
  <input type="radio" id="chrome" name="browser" value="كروم">
  <label for="chrome">كروم</label><br>

  <input type="radio" id="firefox" name="browser" value="فايرفوكس" checked>
  <label for="firefox">فايرفوكس</label><br>

  <input type="radio" id="edge" name="browser" value="إيدج">
  <label for="edge">إيدج</label>
</form>

فقط خيار واحد من كل مجموعة name يمكن أن يكون checked في البداية. لو حطيت أكثر من واحد، المتصفح بيختار الأخير.

تعطيل زر راديو

إذا تبغى تخلي خيار غير قابل للاختيار، استخدم خاصية disabled.

<form>
  <p>اختر حجم القهوة:</p>
  <input type="radio" id="small" name="coffee_size" value="صغير">
  <label for="small">صغير</label><br>

  <input type="radio" id="medium" name="coffee_size" value="متوسط" checked>
  <label for="medium">متوسط</label><br>

  <input type="radio" id="large" name="coffee_size" value="كبير" disabled>
  <label for="large">كبير (غير متاح حالياً)</label>
</form>

تنظيم الأزرار بـ fieldset و legend

عشان تحسن تنظيم الفورم وإمكانية الوصول، خاصة للمستخدمين اللي يستخدمون قارئات الشاشة، استخدم fieldset عشان تجمع الأزرار و legend عشان تعطي عنوان للمجموعة.

<form>
  <fieldset>
    <legend>اختر طريقة الدفع المفضلة:</legend>

    <input type="radio" id="credit_card" name="payment_method" value="بطاقة ائتمان">
    <label for="credit_card">بطاقة ائتمان</label><br>

    <input type="radio" id="paypal" name="payment_method" value="باي بال">
    <label for="paypal">باي بال</label><br>

    <input type="radio" id="cash" name="payment_method" value="نقداً" checked>
    <label for="cash">نقداً عند الاستلام</label>
  </fieldset>
</form>

استخدام fieldset و legend يعتبر أفضل ممارسات تصميم الفورمز.

إرسال البيانات

لما يرسل المستخدم الفورم، المتصفح بيرسل اسم (خاصية name) وقيمة (خاصية value) الخيار اللي تم تحديده فقط. يعني لو اخترت "تفاح" في المثال الأول، الفورم بيرسل fruit=تفاح.

نصيحة أخيرة

تأكد دائماً إنك تستخدم label لكل زر راديو وتربطه بـ id الصحيح. هذا مو بس عشان الشكل، هذا أساسي لإمكانية الوصول ويخلي المستخدم يقدر يضغط على النص نفسه عشان يختار الزر، مو بس على الدائرة الصغيرة.

وبكذا نكون خلصنا أساسيات أزرار الراديو. سهلة ومفيدة جداً!

← السابقالفهرسالتالي →