الفرق بين checkbox و radio في HTML
في تصميم النماذج (Forms) باستخدام HTML، بنستخدم أنواع مختلفة من العناصر علشان
نسمح للمستخدم يدخل البيانات المطلوبة. النهاردة هنتكلم عن نوعين مهمين جدًا
وهما: checkbox و radio.
1. checkbox - اختيارات متعددة
العنصر <input type="checkbox"> بيسمح للمستخدم إنه يحدد أكتر
من اختيار في نفس الوقت.
مثال:
<label><input type="checkbox" name="hobby" value="reading"> القراءة</label>
<label><input type="checkbox" name="hobby" value="drawing"> الرسم</label>
<label><input type="checkbox" name="hobby" value="sports"> الرياضة</label>في المثال ده المستخدم ممكن يختار قراءة + رسم + رياضة في نفس الوقت.
خصائص مفيدة:
checked: بتخلي العنصر محدد بشكل افتراضي.value: بتحدد القيمة اللي هتتبعت في الفورم عند الإرسال.
2. radio - اختيار واحد فقط
العنصر <input type="radio"> بيسمح للمستخدم إنه يختار عنصر
واحد فقط من مجموعة.
مثال:
<label><input type="radio" name="gender" value="male"> ذكر</label>
<label><input type="radio" name="gender" value="female"> أنثى</label>المستخدم هنا يقدر يختار ذكر أو أنثى، لكن مش الاتنين مع بعض.
شرط أساسي:
-
كل radio buttons ضمن نفس المجموعة لازم يكون عندهم نفس الاسم
name.
الفرق بين checkbox و radio
| Checkbox | Radio |
|---|---|
| يسمح بأكثر من اختيار | يسمح باختيار واحد فقط |
| شكل مربع | شكل دائري |
| غير مرتبط بمجموعة | لازم يكون ضمن مجموعة باسم مشترك |
وبكده نكون وضحنا الفرق بين العنصرين وإزاي نستخدم كل واحد منهم في النماذج بشكل احترافي وبسيط.