وسم تجميع حقول النموذج <fieldset>

وسم fieldset يجمع حقول نموذج مترابطة داخل إطار بعنوان legend — «بيانات الشحن» و«طريقة الدفع» كمجموعات واضحة.

النماذج الطويلة تحتاج فصولًا: fieldset يرسم إطارًا حول الحقول المترابطة، وlegend (ابنه الأول) يكتب عنوان المجموعة على حافة الإطار. الفائدة مضاعفة: بصرية للزائر، ودلالية لقارئات الشاشة التي تقرأ عنوان المجموعة قبل كل حقل داخلها.

ميزته الخارقة قليلة الشهرة: disabled عليه يعطّل كل الحقول بداخله دفعة واحدة — لا حاجة لتعطيل حقل حقل.

الصياغة

<fieldset>
  <legend>بيانات التواصل</legend>
  <!-- الحقول -->
</fieldset>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<form>
  <fieldset style="border:2px solid #ede9fe; border-radius:10px; padding:12px">
    <legend style="color:#6d28d9; font-weight:bold; padding:0 8px">طريقة التواصل المفضلة</legend>
    <label><input type="radio" name="contact"> بريد إلكتروني</label><br>
    <label><input type="radio" name="contact"> واتساب</label>
  </fieldset>
</form>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
disabled	يعطل كل الحقول داخل المجموعة بضربة واحدة
legend (وسم ابن)	عنوان المجموعة — يجب أن يكون أول أبنائه

💡 نصائح عملية

مجموعات radio/checkbox أفضل زبائنه — العنوان المشترك يقرؤه قارئ الشاشة
أثناء إرسال النموذج: disabled واحدة تجمّد كل الحقول

⚠️ أخطاء شائعة

legend في غير الموضع الأول — سلوك عرض غير متسق
استخدام div بعنوان p بدلهما — تخسر دلالة المجموعة للوصولية

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs