خانات الإختيار في HTML
يا هلا! اليوم بنتكلم عن شيء بسيط لكنه أساسي ومهم جداً في أي نموذج ويب: خانات الإختيار (Checkboxes). كيف تسويها، وتستخدمها صح، وتخليها تفاعلية.
1. أساسيات خانة الإختيار
عشان تسوي خانة اختيار بسيطة، كل اللي تحتاجه هو وسم <input> مع نوع type="checkbox". بس كذا؟ إيه، بس كذا!
<input type="checkbox">لو جربت الكود اللي فوق، بتشوف مربع صغير تقدر تضغط عليه عشان تحدده أو تلغي تحديده. بسيط، صح؟
2. الإسم والقيمة: name و value
خانة الإختيار بدون اسم وقيمة مالها فايدة كبيرة لما ترسل النموذج (Form) للسيرفر. لازم تعطيها اسم (name) عشان السيرفر يعرف وش هذي الخانة، وقيمة (value) عشان يعرف وش الإختيار اللي تم تحديده.
<input type="checkbox" name="subscribeNewsletter" value="yes">هنا، لو المستخدم حدد الخانة هذي، السيرفر بيستقبل بيانات تقول له subscribeNewsletter=yes. لو ما حددها، ما راح يرسل هذي البيانات أصلاً.
3. ربط خانة الإختيار بـ label
عشان تجربة المستخدم تكون أفضل، وخصوصاً للي يستخدمون قارئات الشاشة (Accessibility)، لازم تربط خانة الإختيار بنص وصفي باستخدام وسم <label>. تسوي هالشي عن طريق إعطاء خانة الإختيار id فريد، وبعدين تستخدم نفس الـ id في خاصية for في وسم <label>.
<input type="checkbox" id="termsAccepted" name="terms" value="accepted">
<label for="termsAccepted">أوافق على الشروط والأحكام</label>الحين، لو المستخدم ضغط على النص "أوافق على الشروط والأحكام"، خانة الإختيار نفسها بتتحدد أو يلغى تحديدها. وهذا أفضل بكثير من أنك تخليه يضغط على المربع الصغير بس.
4. تحديد مسبق: checked
تبغى خانة الإختيار تكون محددة تلقائياً لما الصفحة تتحمل؟ استخدم خاصية checked.
<input type="checkbox" id="rememberMe" name="remember" value="true" checked>
<label for="rememberMe">تذكرني</label>مجرد وجود كلمة checked كافية لتحديدها. ما تحتاج تعطيها قيمة مثل checked="true".
5. تعطيل خانة الإختيار: disabled
إذا بغيت تخلي خانة الإختيار غير قابلة للتفاعل مع المستخدم (يعني ما يقدر يحددها أو يلغي تحديدها)، استخدم خاصية disabled.
<input type="checkbox" id="adminOpt" name="admin" value="yes" disabled>
<label for="adminOpt">خيارات الإدارة (غير متاحة)</label>خانة الإختيار اللي عليها disabled ما راح يتم إرسال قيمتها للسيرفر عند إرسال النموذج.
6. تجميع خانات الإختيار
في بعض الأحيان، تحتاج مجموعة من الخيارات اللي يقدر المستخدم يختار منها أكثر من خيار واحد (مثلاً، اختيار هوايات متعددة). عشان تجمعها منطقياً، بتعطيها نفس الـ name.
ملاحظة: في الـ HTML، كل خانة اختيار (Checkbox) عندهاnameخاص فيها. لكن لما ترسل النموذج، المتصفح بيجمع كل الخانات اللي لها نفس الـnameوبيرسلها كقائمة للسيرفر. هذا يختلف عنradio buttonsاللي يكون لها نفس الـnameعشان تختار واحد فقط.
<p>اختر هواياتك المفضلة:</p>
<input type="checkbox" id="hobby1" name="hobbies" value="reading">
<label for="hobby1">القراءة</label><br>
<input type="checkbox" id="hobby2" name="hobbies" value="traveling">
<label for="hobby2">السفر</label><br>
<input type="checkbox" id="hobby3" name="hobbies" value="coding">
<label for="hobby3">البرمجة</label><br>لو المستخدم اختار "القراءة" و "البرمجة"، السيرفر بيستقبل شيء زي hobbies=reading&hobbies=coding (يعتمد على طريقة إرسال النموذج ومعالجة السيرفر).
خلاصة
خانة الإختيار بسيطة لكنها قوية. تذكر دائماً تستخدم name و value عشان تكون مفيدة، وتربطها بـ label عشان تكون سهلة الاستخدام ومتاحة للجميع. بالتوفيق!