عناصر fieldset و legend

fieldset و legend: وقتی فرمت باید بخش‌بندی بشه

فرم‌های بزرگ و طولانی (مثل فرم ثبت‌نام کامل یا فرم سفارش) معمولاً از چند بخش منطقی مختلف تشکیل می‌شن؛ مثلاً یه بخش برای اطلاعات شخصی، یه بخش برای آدرس، و یه بخش برای اطلاعات پرداخت. HTML5 برای گروه‌بندی معنایی این بخش‌ها، دو تگ داره: fieldset و legend.

fieldset چیه؟

<fieldset>
  <label for="fullname">نام کامل</label>
  <input type="text" id="fullname" name="fullname">

  <label for="email">ایمیل</label>
  <input type="email" id="email" name="email">
</fieldset>

تگ fieldset یه گروه از فیلدهای مرتبط رو با یه کادر دور اونا (به‌صورت پیش‌فرض مرورگر) از هم جدا می‌کنه. این کار هم از نظر بصری فرم رو منظم‌تر می‌کنه، هم از نظر معنایی به مرورگر و صفحه‌خوان می‌گه «این چند فیلد، یه گروه منطقی مشترک هستن».

legend: عنوان هر fieldset

<fieldset>
  <legend>اطلاعات شخصی</legend>

  <label for="fullname">نام کامل</label>
  <input type="text" id="fullname" name="fullname">

  <label for="email">ایمیل</label>
  <input type="email" id="email" name="email">
</fieldset>

تگ legend عنوان همون گروهه و باید اولین فرزند مستقیم fieldset باشه، درست مثل قانونی که برای caption و table تو درس ۶-۴ دیدیم. مرورگر به‌صورت پیش‌فرض این عنوان رو داخل خط بالای کادر fieldset، به‌شکلی جاسازی‌شده نمایش می‌ده.

یه فرم کامل با چند fieldset

<form action="/checkout" method="post">
  <fieldset>
    <legend>اطلاعات شخصی</legend>
    <label for="fullname">نام کامل</label>
    <input type="text" id="fullname" name="fullname">

    <label for="email">ایمیل</label>
    <input type="email" id="email" name="email">
  </fieldset>

  <fieldset>
    <legend>آدرس ارسال</legend>
    <label for="city">شهر</label>
    <input type="text" id="city" name="city">

    <label for="address">آدرس دقیق</label>
    <textarea id="address" name="address"></textarea>
  </fieldset>

  <button type="submit">ثبت سفارش</button>
</form>

تو این مثال، فرم به دو بخش منطقی واضح تقسیم شده: «اطلاعات شخصی» و «آدرس ارسال». این تفکیک هم برای کاربر بینا که داره فرم رو پر می‌کنه کمک‌کننده‌ست (فرم بلند و شلوغ به نظر نمی‌رسه)، هم از نظر ساختاری برای صفحه‌خوان معنادار.

کاربرد رایج دیگر: گروه‌بندی دکمه‌های radio

<fieldset>
  <legend>جنسیت</legend>

  <input type="radio" name="gender" value="male" id="male">
  <label for="male">مرد</label>

  <input type="radio" name="gender" value="female" id="female">
  <label for="female">زن</label>
</fieldset>

یکی از رایج‌ترین و مفیدترین کاربردهای fieldset، دور یه گروه از دکمه‌های radio (یا حتی checkbox) هست. همون‌طور که تو درس ۷-۲ دیدیم، دکمه‌های radio با name یکسان از نظر عملکردی به هم مرتبطن، اما این ارتباط از نظر بصری و معنایی برای کاربر همیشه واضح نیست؛ fieldset و legend این رابطه رو هم بصری و هم معنایی روشن می‌کنن. legend اینجا («جنسیت») توضیح می‌ده این گروه از دکمه‌های radio، دقیقاً برای انتخاب چه چیزی هستن.

غیرفعال‌کردن یک گروه کامل با disabled

<fieldset disabled>
  <legend>اطلاعات پرداخت (به‌زودی فعال می‌شود)</legend>
  <label for="card">شماره کارت</label>
  <input type="text" id="card" name="card">
</fieldset>

یه قابلیت جالب fieldset اینه که وقتی ویژگی disabled رو روی خود fieldset بذاری، تمام ورودی‌های داخلش هم‌زمان غیرفعال می‌شن؛ دیگه لازم نیست تک‌تک input ها رو جداگانه disabled کنی. این خیلی برای بخش‌هایی از فرم که موقتاً باید غیرفعال باشن (مثلاً تا وقتی یه شرط دیگه برقرار بشه) مفیده.

فایده‌ی دسترسی‌پذیری fieldset و legend برای گروه‌های radio

این مورد آنقدر مهمه که ارزش تأکید دوباره داره: وقتی یه صفحه‌خوان به یه گروه دکمه‌ی radio بدون fieldset می‌رسه، هر دکمه رو جدا و بدون توضیح گروه اعلام می‌کنه (مثلاً فقط «مرد» و بعد «زن»، بدون اینکه بگه این‌ها گزینه‌های کدوم سؤالن). اما وقتی داخل fieldset با legend باشن، صفحه‌خوان اول عنوان legend («جنسیت») رو اعلام می‌کنه و بعد هر گزینه رو، که تجربه‌ی خیلی روشن‌تری برای کاربر نابینا ایجاد می‌کنه.

چند اشتباه رایج

• استفاده از یه h3 یا p جدا به‌جای legend برای عنوان‌دهی به یه گروه از فیلدها، که ارتباط معنایی رسمی رو از دست می‌ده.
• قراردادن legend در جایی غیر از اولین فرزند fieldset.
• عدم استفاده از fieldset دور گروه‌های radio، که باعث گیج‌شدن کاربران صفحه‌خوان می‌شه.
• استفاده‌ی بیش‌ازحد از fieldset برای فرم‌های خیلی کوتاه و ساده که اصلاً نیازی به بخش‌بندی ندارن.

بهترین روش‌ها

• برای فرم‌های بلند و چندبخشی، همیشه از fieldset و legend برای گروه‌بندی منطقی استفاده کن.
• دور هر گروه از دکمه‌های radio (یا حتی checkbox های مرتبط)، همیشه یه fieldset با legend گویا بذار.
• legend رو همیشه اولین فرزند fieldset بنویس.

نکته‌ی سئو

fieldset و legend تأثیر مستقیمی روی سئو ندارند، چون این تگ‌ها بیشتر مربوط به تجربه‌ی کاربری و دسترسی‌پذیری فرم‌ها هستند تا محتوای قابل‌ایندکس توسط موتورهای جستجو.

نکته‌ی دسترسی‌پذیری

fieldset و legend یکی از مهم‌ترین ابزارهای دسترسی‌پذیری برای گروه‌های مرتبط از ورودی‌ها هستند، به‌خصوص برای دکمه‌های radio و checkbox؛ بدون این ساختار، کاربران صفحه‌خوان اغلب نمی‌توانند رابطه‌ی منطقی بین چند گزینه‌ی مرتبط را تشخیص دهند.

جمع‌بندی

تگ fieldset گروهی از فیلدهای مرتبط فرم را با یک کادر بصری و معنایی از هم جدا می‌کند، و legend به‌عنوان اولین فرزند آن، عنوان همان گروه را مشخص می‌کند. این ترکیب مخصوصاً برای گروه‌بندی دکمه‌های radio یا بخش‌بندی فرم‌های طولانی، هم از نظر تجربه‌ی کاربری و هم از نظر دسترسی‌پذیری بسیار مفید است.