<fieldset> و<legend> لتنظيم النماذج المعقدة:
• <fieldset>: يُجمّع عناصر النموذج ذات الصلة في إطار. يوفر: - حدوداً مرئية بالتقصير - تجميعاً دلالياً للوصولية - إمكانية تعطيل مجموعة كاملة بـ disabled
• <legend>: عنوان الـ fieldset — يظهر فوق الإطار. إلزامي للوصولية عند استخدام fieldset.
استخدامات عملية: - تجميع بيانات شخصية في نموذج طويل - تجميع خيارات radio لسؤال واحد - تعطيل قسم كامل بـ fieldset disabled
| 1 | <form action="/register" method="POST"> |
| 2 | |
| 3 | <fieldset> |
| 4 | <legend>المعلومات الشخصية</legend> |
| 5 | |
| 6 | <label for="fname">الاسم الأول</label> |
| 7 | <input type="text" id="fname" name="fname" required> |
| 8 | |
| 9 | <label for="lname">اسم العائلة</label> |
| 10 | <input type="text" id="lname" name="lname" required> |
| 11 | |
| 12 | <label for="birth">تاريخ الميلاد</label> |
| 13 | <input type="date" id="birth" name="birthdate"> |
| 14 | </fieldset> |
| 15 | |
| 16 | <fieldset> |
| 17 | <legend>بيانات الحساب</legend> |
| 18 | |
| 19 | <label for="email">البريد الإلكتروني</label> |
| 20 | <input type="email" id="email" name="email" required> |
| 21 | |
| 22 | <label for="pass">كلمة المرور</label> |
| 23 | <input type="password" id="pass" name="password" required> |
| 24 | </fieldset> |
| 25 | |
| 26 | <!-- مجموعة radio مع fieldset --> |
| 27 | <fieldset> |
| 28 | <legend>مستوى خبرتك</legend> |
| 29 | <label><input type="radio" name="level" value="beginner"> مبتدئ</label> |
| 30 | <label><input type="radio" name="level" value="mid"> متوسط</label> |
| 31 | <label><input type="radio" name="level" value="senior"> متقدم</label> |
| 32 | </fieldset> |
| 33 | |
| 34 | <button type="submit">إنشاء الحساب</button> |
| 35 | </form> |
مثال 1: نموذج معطّل جزئياً
| 1 | <form> |
| 2 | <fieldset> |
| 3 | <legend>الخطة الحالية: المجانية</legend> |
| 4 | <p>الكورسات: 5</p> |
| 5 | <p>الشهادات: غير متاحة</p> |
| 6 | </fieldset> |
| 7 | |
| 8 | <!-- تعطيل fieldset كامل --> |
| 9 | <fieldset disabled> |
| 10 | <legend>ميزات الخطة المدفوعة (ترقية للوصول)</legend> |
| 11 | |
| 12 | <label for="prem-feature">الميزات المميزة</label> |
| 13 | <select id="prem-feature" name="feature"> |
| 14 | <option>كورسات غير محدودة</option> |
| 15 | <option>شهادات معتمدة</option> |
| 16 | </select> |
| 17 | |
| 18 | <button type="button">اختر الميزة</button> |
| 19 | </fieldset> |
| 20 | |
| 21 | <a href="/upgrade">ترقية الحساب</a> |
| 22 | </form> |