تگ‌های fieldset و legend برای گروه‌بندی فرم

گروه‌بندی فرم با <fieldset> و <legend>: نظم و خوانایی! 🗂️

سلام به همه! وقتی فرم شما طولانی و پر از فیلدهای مختلف می‌شه، خوانایی و سازماندهی اون خیلی مهمه. برای اینکه بتونیم فیلدهای مرتبط رو کنار هم جمع کنیم و یه عنوان یا توضیح برای اون گروه بذاریم، از تگ‌های <fieldset> و <legend> استفاده می‌کنیم.

این دو تگ مثل چسب و برچسب برای فرم شما هستن؛ باعث می‌شن اطلاعات دسته‌بندی شده و مرتب به نظر برسن.

۱. تگ <fieldset>: جعبه‌ای برای گروه‌ها! 📦

تگ <fieldset> به شما اجازه می‌ده که مجموعه‌ای از عناصر مرتبط فرم (مثل لیبل‌ها، ورودی‌ها، دکمه‌ها و …) رو داخل خودش قرار بدید. مرورگرها معمولاً این گروه رو با یه کادر دورش نشون می‌دن.

۲. تگ <legend>: عنوان گروه! 🏷️

تگ <legend> باید اولین عنصر داخل تگ <fieldset> باشه. این تگ عنوانی رو برای اون گروه از فیلدها مشخص می‌کنه که معمولاً بالای کادر <fieldset> نمایش داده می‌شه. این عنوان به کاربر کمک می‌کنه بفهمه فیلدهای داخل این گروه مربوط به چه بخشی هستن.

مثال کاربردی: ثبت اطلاعات شخصی و تماس

فرض کنید یه فرم ثبت‌نام داریم که اطلاعات شخصی و اطلاعات تماس رو از کاربر می‌گیره.

<form action="/submit-form" method="post">

  <fieldset style="border: 1px solid #6a5acd; border-radius: 5px; padding: 15px; margin-bottom: 20px;">
    <legend style="color: #6a5acd; font-weight: bold; padding: 0 10px;">اطلاعات شخصی</legend>

    <div style="margin-bottom: 10px;">
      <label for="first-name">نام:</label>
      <input type="text" id="first-name" name="first_name" required>
    </div>

    <div style="margin-bottom: 10px;">
      <label for="last-name">نام خانوادگی:</label>
      <input type="text" id="last-name" name="last_name" required>
    </div>

    <div>
      <label for="birth-date">تاریخ تولد:</label>
      <input type="date" id="birth-date" name="birth_date">
    </div>

  </fieldset>

  <fieldset style="border: 1px solid #6a5acd; border-radius: 5px; padding: 15px; margin-bottom: 20px;">
    <legend style="color: #6a5acd; font-weight: bold; padding: 0 10px;">اطلاعات تماس</legend>

    <div style="margin-bottom: 10px;">
      <label for="email">ایمیل:</label>
      <input type="email" id="email" name="email" required>
    </div>

    <div>
      <label for="phone">شماره تلفن:</label>
      <input type="tel" id="phone" name="phone">
    </div>

  </fieldset>

  <button type="submit" style="padding: 10px 20px; background-color: #6a5acd; color: white; border: none; border-radius: 5px; cursor: pointer;">ارسال</button>

</form>

در این مثال:

• دو گروه مجزا با <fieldset> داریم: “اطلاعات شخصی” و “اطلاعات تماس”.
• هر گروه یه عنوان با <legend> داره که به وضوح نشون می‌ده فیلدهای داخل اون مربوط به چی هستن.
• فیلدهای هر گروه داخل همون <fieldset> قرار گرفتن.
• استفاده از div های داخلی برای مرتب کردن لیبل و اینپوت‌ها همچنان توصیه می‌شه.

مزایای استفاده از fieldset و legend:

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

با استفاده از <fieldset> و <legend>، می‌تونید فرم‌هایی بسازید که نه تنها از نظر فنی کامل هستن، بلکه از نظر بصری هم سازمان‌یافته و کاربرپسند هستن. این یکی از نکات مهم در طراحی فرم‌های حرفه‌ایه! موفق باشید! 🏆