شرح العنصر (legend) في HTML

العنصر <legend> في لغةHTML: شرح شامل

HTML

العنصر <legend> في HTML هو عنصر مهم يستخدم ضمن نموذج النماذج (Forms) لتوفير عنوان أو وصف لمجموعة من عناصر التحكم في النموذج. هذا العنصر يعمل بشكل وثيق مع العنصر <fieldset> الذي يستخدم لتجميع عناصر النموذج ذات الصلة معًا.

الغرض من استخدام <legend>

الهدف الرئيسي من <legend> هو:

• توفير عنوان وصفي لمجموعة من عناصر النموذج
• تحسين إمكانية الوصول (Accessibility) للنماذج
• تحسين تنظيم النموذج وجعله أكثر قابلية للفهم
• المساعدة في تقسيم النماذج المعقدة إلى أقسام منطقية

البنية الأساسية

<fieldset>
  <legend>عنوان المجموعة</legend>
  <!-- عناصر النموذج هنا -->
</fieldset>

السمات (Attributes) المدعومة

العنصر <legend> يدعم السمات العامة في HTML مثل:

• class
• id
• style
• title
• dir (لتحديد اتجاه النص)
• lang (لتحديد اللغة)

أمثلة عملية

نموذج تسجيل بسيط

<form>
  <fieldset>
   <legend> معلومات التسجيل</legend>
    
    <label for="username">اسم المستخدم:</label>
    <input type="text" id="username" name="username"><br><br>
    
    <label for="password">كلمة المرور:</label>
    <input type="password" id="password" name="password">
  </fieldset>
</form>

نموذج متعدد الأقسام

<form>
  <fieldset>
   <legend> المعلومات الشخصية</legend>
    
    <label for="name">الاسم الكامل:</label>
    <input type="text" id="name" name="name"><br><br>
    
    <label for="email">البريد الإلكتروني:</label>
    <input type="email" id="email" name="email">
  </fieldset>
  
  <fieldset>
    <legend>تفضيلات الاتصال</legend>
    
    <input type="checkbox" id="newsletter" name="newsletter">
    <label for="newsletter">أرغب في تلقي النشرة البريدية</label><br><br>
    
    <label for="contact-method">طريقة الاتصال المفضلة:</label>
    <select id="contact-method" name="contact-method">
      <option value="email">بريد إلكتروني</option>
      <option value="phone">هاتف</option>
    </select>
  </fieldset>
</form>

أهمية إمكانية الوصول (Accessibility)

العنصر <legend> يلعب دورًا حاسمًا في جعل النماذج أكثر سهولة للمستخدمين من ذوي الاحتياجات الخاصة، خاصة الذين يستخدمون قارئات الشاشة. عند استخدام <fieldset> و<legend> معًا:

• توفر قارئات الشاشة السياق للمستخدمين
• يتم الإعلان عن عنوان المجموعة قبل قراءة عناصر التحكم فيها
• يصبح النموذج أكثر تنظيماً وسهولة في التنقل

التنسيق باستخدام CSS

يمكن تنسيق عنصر <legend> باستخدام CSS لجعله أكثر جاذبية:

fieldset {
  border: 2px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}

legend {
  font-weight: bold;
  font-size: 1.2em;
  color: #333;
  padding: 0 10px;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 3px;
}

أفضل الممارسات

1. استخدم <legend> دائمًا مع <fieldset>: لا معنى لـ <legend> بدون <fieldset>.
2. اجعل النص وصفيًا وموجزًا: يجب أن يصف العنوان محتوى المجموعة بدقة.
3. استخدمه لتجميع العناصر ذات الصلة: مثل معلومات الدفع، معلومات الشحن، إلخ.
4. تجنب الإفراط في التقسيم: لا تستخدم الكثير من مجموعات <fieldset> للنموذج البسيط.
5. اختبار إمكانية الوصول: تأكد من أن قارئات الشاشة تتعرف على الهيكل بشكل صحيح.

الفرق بين <legend> و <label>

<legend>	<label>
يستخدم مع <fieldset>	يستخدم مع عناصر التحكم الفردية
يصف مجموعة من العناصر	يصف عنصر تحكم واحد
يجب أن يكون الطفل الأول لـ <fieldset>	يمكن وضعه في أي مكان

التوافق مع المتصفحات

العنصر <legend> مدعوم في جميع المتصفحات الحديثة بما في ذلك:

Chrome

مدعوم بالكامل

Firefox

مدعوم بالكامل

Safari

مدعوم بالكامل

Edge

مدعوم بالكامل

Internet Explorer

منذ الإصدارات القديمة

Opera

مدعوم بالكامل

الاستخدام في تطبيقات الويب الحديثة

على الرغم من ظهور العديد من أطر عمل JavaScript لإنشاء النماذج، يظل <fieldset> و <legend> من الأدوات الأساسية لتنظيم النماذج في HTML الخام. يمكن استخدامه مع:

• React
• Angular
• Vue.js
• وغيرها من الأطر

الخلاصة

العنصر <legend> هو أداة قوية لتحسين تنظيم النماذج وإمكانية الوصول إليها. عند استخدامه بشكل صحيح مع <fieldset>، يمكنه جعل النماذج المعقدة أكثر قابلية للفهم للمستخدمين ولبرامج القراءة الآلية. يعتبر فهم واستخدام هذا العنصر بشكل صحيح علامة على تطوير ويب محترف يراعي معايير إمكانية الوصول وتجربة المستخدم.

كيف كان المقال؟