في هذا الدرس 7تصفّح المواضيع
توفر أزرار الاختيار الأحادي
<input type="radio"> واجهة لاختيار بديل واحد فقط من بين مجموعة من الخيارات المحددة مسبقاً. ويتطلب إنشاء مجموعة متناسقة تعيين نفس قيمة خاصية الاسم name لكافة أزرار المجموعة.
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>
عندما ينقر المستخدم على أي زر ضمن المجموعة، يلغي المتصفح اختيار الزر السابق تلقائياً. كما لا يمكن إلغاء تحديد الزر بالنقر عليه مرة ثانية، بل يتطلب التراجع اختيار بديل آخر داخل نفس المجموعة.
تتيح مربعات الاختيار
<input type="checkbox"> جمع حالات ثنائية مستقلة لكل خيار. وخلافاً لأزرار الراديو، تسمح مربعات التحديد باختيار عدة عناصر معاً أو تركها جميعاً دون قيود تنافية.
HTML
<!-- Independent add-on services selection -->
<form action="/services" method="post">
<input id="srv-bk" name="addons"
type="checkbox" value="backup" checked>
<label for="srv-bk">Automated Daily Backup</label>
<input id="srv-sec" name="addons"
type="checkbox" value="security">
<label for="srv-sec">Realtime Threat Firewall</label>
<button type="submit">Save Services</button>
</form>| وجه المقارنة | أزرار الاختيار الأحادي Radio | مربعات الاختيار المتعدد Checkbox |
|---|---|---|
| نموذج التحديد | اختيار بديل واحد فقط من المجموعة | اختيار متعدد حر أو عدم اختيار أي عنصر |
| خاصية الاسم name | يجب أن تكون متطابقة لربط المجموعة | يمكن أن تشترك أو تنفرد بأسماء مستقلة |
| إلغاء التحديد | لا يمكن إلغاؤه بالنقر على نفس الزر مجدداً | يمكن تفعيله وإلغاؤه بحرية بالنقر المتكرر |
| حزمة الإرسال | تُرسل قيمة واحدة فقط تمثل الخيار النشط | تُرسل المربعات المفعلة فقط وتُهمل غير المحددة |
| المظهر الهندسي | دوائر بنقطة داخلية مركزية | مربعات بعلامة تحقق دلالية |
تحدد خاصية التفعيل
checked أن زر الراديو أو مربع الاختيار يجب أن يكون محدداً مسبقاً عند تحميل الصفحة لأول مرة. وتجعل هذه الخاصية الحقل نشطاً بصرياً وبرمجياً بشكل تلقائي.
HTML
<!-- Preselected default newsletter subscription -->
<form action="/newsletter" method="post">
<input id="terms-agree" name="terms"
type="checkbox" checked required>
<label for="terms-agree">I accept Terms and Conditions</label>
<button type="submit">Complete Registration</button>
</form>بالإضافة إلى حالتي التفعيل وعدم التفعيل، تدعم مربعات الاختيار حالة ثالثة تسمى الحالة غير المحددة عبر لغة جافاسكريبت، وتُستخدم عادة لتمثيل القوائم المتفرعة التي تم فيها اختيار بعض العناصر الفرعية دون اكتمال الكل.
يتيح شريط التمرير
<input type="range"> للمستخدم تحديد قيمة رقمية بين حدين معلومين في الحالات التي تكون فيها السرعة والسهولة أهم من كتابة الأرقام الحرفية، مثل شدة الصوت ودرجة السطوع ومستويات التقييم.
HTML
<!-- Range slider bound to dynamic output element -->
<form action="/settings" method="post">
<label for="vol-ctrl">Master Volume:</label>
<input id="vol-ctrl" name="volume" type="range"
min="0" max="100" step="5" value="70"
oninput="volOut.value = this.value + '%'">
<output id="volOut" for="vol-ctrl">70%</output>
</form>
نظراً لأن شريط التمرير الافتراضي لا يُظهر الرقم المختار صراحة في واجهته، فإن ربطه بعنصر الإخراج الدلالي
<output> عبر أحداث التفاعل يضمن وضوح القيمة المختارة للمستخدمين وقارئات الشاشة.يوفر منتقي الألوان
<input type="color"> واجهة رسومية مدمجة لاختيار الدرجات اللونية. ويطلق هذا الحقل نافذة الألوان الرسمية لنظام التشغيل، مما يدعم عجلة الألوان والتدرجات والمدخلات الرقمية.
HTML
<!-- Native color picker for theme customization -->
<form action="/theme" method="post">
<label for="brand-accent">Brand Accent Color:</label>
<input id="brand-accent" name="accent"
type="color" value="#7750b2">
<button type="submit">Save Brand Colors</button>
</form>تتبع القيمة الصادرة عن حقل الألوان صيغة كود سداسي عشري من 7 خانات بحروف صغيرة تبدأ بعلامة الشباك مثل
#rrggbb. ولا يدعم هذا الحقل قنوات الشفافية أو أسماء الألوان النصية، وتتحول أي قيمة غير صالحة تلقائياً إلى اللون الأسود.يتطلب تحقيق النفاذ الرقمي لعناصر الاختيار تجميع الحقول المترابطة وتوفير مساحات نقر واضحة. وعند بناء مجموعات الراديو أو مربعات التحديد، يجب إحاطتها بحاوية
<fieldset> وتزويدها بعنوان دلالي عبر <legend>.
HTML
<!-- Accessible selection group with fieldset and legend -->
<fieldset>
<legend>Preferred Notification Channels:</legend>
<input id="notif-em" name="channel"
type="checkbox" value="email">
<label for="notif-em">Email Notifications</label>
<input id="notif-sms" name="channel"
type="checkbox" value="sms">
<label for="notif-sms">SMS Text Alerts</label>
</fieldset>يمثل توسيع مساحة النقر مطلباً أساسياً لسهولة الاستخدام؛ حيث يؤدي النقر على وسم التسمية التوضيحية إلى تفعيل الحقل مباشرة. ويحظر تماماً إخفاء حدود تركيز لوحة المفاتيح دون توفير مؤشرات بصرية بديلة واضحة.
يتيح دمج أزرار الاختيار الأحادي ومربعات التحديد وشرائط التمرير ومنتقي الألوان بناء نماذج استطلاع رأي وتخصيص ثرية. استكشف المختبر التفاعلي التالي لمراقبة كيفية تجميع هذه الحقول المتنوعة في حزم طلبات شبكية منظمة:
لاحظ كيف تُستبعد المربعات غير المحددة من الحزمة، بينما يحل خيار الراديو محل السابق، وتنقل حقول الألوان قيماً نظامية سداسية الخانات تبدأ بعلامة الشباك.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس التعامل مع الحقول الاختيارية في HTML: أزرار الاختيار الأحادي، ومربعات التحديد المتعدد، والتعيين المسبق بخاصية checked، وشرائط التمرير وربطها بوسم الإخراج، ومنتقي الألوان القياسي، وأسس الإتاحة بحاويات التجميع. الخطوة التالية تأخذنا لاكتشاف حقول رفع الملفات.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 5 مفهومةأول بطاقة، أول خطوة
- 01 Radio Group مجموعة أزرار الراديو
- مجموعة من أزرار الاختيار الأحادي تشترك في نفس خاصية الاسم لفرض التنافي واختيار عنصر واحد فقط.
- للمراجعة
- 02 Checkbox Control مربع الاختيار المتعدد
- عنصر تفاعلي يلتقط حالة ثنائية مستقلة لكل خيار دون فرض أي قيود على بقية الخيارات المجاورة.
- للمراجعة
- 03 Range Slider شريط التمرير المنزلق
- عنصر تحكم يسمح بتحريك مؤشر على مسار لتحديد قيمة رقمية تقريبية بسرعة وتجربة استخدام مرنة.
- للمراجعة
- 04 Hex Color Value القيمة اللونية الست عشرية
- سلسلة نصية قياسية من سبع خانات تبدأ بعلامة الشباك لتمثيل درجات ألوان الضوء الأساسية بدقة.
- للمراجعة
- 05 Indeterminate State الحالة غير المحددة
- حالة بصرية لمربع الاختيار تُضبط برمجياً للدلالة على تحديد جزئي في القوائم المتفرعة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 3 مفهومةأول بطاقة، أول خطوة
- 01 RGB نظام الألوان الأساسي
- Red Green Blue
- نموذج ألوان يعتمد على مزج أطياف الضوء الأحمر والأخضر والأزرق لإنتاج الألوان في الشاشات الرقمية.
- للمراجعة
- 02 HEX النظام السداسي عشري
- Hexadecimal
- نظام عددي قاعدته 16 يُستخدم لتمثيل قيم الألوان الرقمية في متصفحات الويب.
- للمراجعة
- 03 ARIA مبادرة تطبيقات الإنترنت الغنية للإتاحة
- Accessible Rich Internet Applications
- مواصفة قياسية تحدد خصائص برمجية لتعزيز وصول برمجيات قارئات الشاشة لعناصر التحكم المعقدة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/4مهام منجزة
-
أنشئ خيارات اشتراك باستخدام ثلاثة أزرار راديو تشترك في نفس خاصية الاسم وتأكد من التنافي الأحادي.
-
ابنِ مربعات تحديد لخدمات إضافية وتأكد من أن المربعات المفعلة فقط هي التي تُرسل بياناتها للخادم.
-
أنشئ شريط تمرير من 0 إلى 100 بخطوة مقدارها 5 واربطه بعنصر الإخراج لعرض الرقم مباشرة أثناء السحب.
-
أحط خيارات الراديو ومربعات التحديد بحاوية دلالية وعنوان توضيحي لدعم قارئات الشاشة والنفاذ الرقمي.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
2أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.