تگ fieldset در html

تگ fieldset در html یکی از تگ‌ های ساختاری است که به توسعه‌ دهندگان وب این امکان را می‌دهد که گروهی از عناصر فرم را در یک دسته‌ بندی مشخص قرار دهند.

تعریف و کاربرد

تگ <fieldset> به صورت مستقیم در فرم‌ها مورد استفاده قرار می‌گیرد و هدف آن گروه‌بندی منطقی مجموعه‌ای از فیلدهای ورودی مانند <input>، <select> و <textarea> است. این تگ معمولاً همراه با تگ <legend> استفاده می‌شود. تگ <legend> به عنوان عنوان گروه، درون تگ <fieldset> قرار می‌گیرد و نقش برچسبی برای توضیح محتوای درون آن دارد.

مثال ساده:

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

ویژگی‌های مهم

افزایش خوانایی فرم: تگ <fieldset> به طراحی فرم کمک می‌کند تا کاربر بهتر بخش‌های مختلف آن را درک کند، به‌خصوص وقتی فرم شامل اطلاعات متنوعی مانند مشخصات شخصی، آدرس، اطلاعات پرداخت و غیره باشد.
استفاده از عنوان با <legend>: عنوانی که در داخل <legend> نوشته می‌شود معمولاً در بالای قاب نمایش داده شده و زمینه محتوای داخلی را مشخص می‌کند.
سازگاری با CSS: تگ <fieldset> و <legend> هر دو قابل استایل‌دهی هستند، هرچند برخی ویژگی‌های مرورگرها روی استایل‌دهی محدودیت‌هایی ایجاد می‌کنند. برای مثال، حذف حاشیه پیش‌فرض یا تنظیم مکان دقیق عنوان ممکن است نیاز به تنظیمات خاص داشته باشد.

ویژگی‌های فنی

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

می‌توان با استفاده از ویژگی disabled تمام ورودی‌های داخل تگ <fieldset> را به طور همزمان غیرفعال کرد:

در مثال بالا، همه ورودی‌های داخل این گروه غیرفعال شده‌اند و کاربر نمی‌تواند آن‌ها را ویرایش کند.

استایل‌دهی با CSS

در طراحی‌های حرفه‌ای، ممکن است نیاز باشد استایل پیش‌فرض این تگ‌ها تغییر داده شود. نمونه‌ای از استایل‌دهی:

استایل‌دهی به تگ <legend> گاهی بسته به مرورگر محدودیت‌هایی دارد، اما با استفاده از CSS مدرن می‌توان تا حدود زیادی کنترل لازم را بر ظاهر آن اعمال کرد.

ارائه خدمات مشاوره کسب و کار رایگان در جهت توسعه فروش، رشد کسب و کار و تغییر موقعیت برند شما پنج شنبه های هر هفته

آموزش تگ fieldset در html

تگ <fieldset> در HTML یکی از ابزارهای مهم برای گروه‌بندی عناصر داخل فرم‌ها است. با استفاده از این تگ، می‌توان مجموعه‌ای از فیلدهای ورودی را در قالب یک بخش مشخص دسته‌بندی کرد تا فرم از نظر بصری منظم‌تر و قابل‌فهم‌تر شود. در این آموزش کوتاه، نحوه استفاده از تگ <fieldset> را به زبان ساده یاد می‌گیریم.

کاربرد اصلی `<fieldset>`

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

مثال ساده:

در این مثال، فیلدهای نام و ایمیل در یک قاب با عنوان “اطلاعات شخصی” قرار گرفته‌اند.

تگ `<legend>`

تگ <legend> حتماً باید داخل <fieldset> قرار بگیرد و در بالای قاب ظاهر می‌شود. این تگ به کاربر کمک می‌کند تا موضوع آن بخش از فرم را بهتر درک کند.

ویژگی `disabled`

اگر بخواهید تمام فیلدهای یک بخش از فرم را غیرفعال کنید، کافی است ویژگی disabled را به تگ <fieldset> اضافه کنید:

در این حالت، تمام عناصر داخل این بخش غیرقابل ویرایش خواهند بود.

نکات طراحی

با استفاده از CSS می‌توان ظاهر پیش‌فرض تگ‌های <fieldset> و <legend> را تغییر داد. برای مثال:

ارائه خدمات اندیشه دیجی

سئو سایت کرمانشاه

طراحی سایت کرمانشاه

مشاوره کسب و کار

آموزش اینستاگرام کرمانشاه

جدول صفحات تگ fieldset در html

در HTML، تگ <fieldset> به طور مستقیم با «جدول صفحات» یا pagination ارتباطی ندارد، اما اگر بخواهیم درباره “جدول‌بندی” یا “تقسیم‌بندی صفحات فرم” با استفاده از تگ <fieldset> صحبت کنیم، می‌توان از این تگ برای سازمان‌دهی فرم‌های چندبخشی یا چندمرحله‌ای استفاده کرد. در واقع، در فرم‌هایی که طولانی هستند یا اطلاعات زیادی از کاربر دریافت می‌شود، می‌توان فرم را به چند بخش تقسیم کرد که هر بخش در یک <fieldset> مجزا قرار می‌گیرد. این روش به کاربر کمک می‌کند تا اطلاعات را مرحله به مرحله وارد کرده و گیج نشود.

ساختار فرم چندبخشی با `<fieldset>`

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

html

<form>
  <fieldset>
    <legend>اطلاعات شخصی</legend>
    <input type="text" placeholder="نام">
    <input type="text" placeholder="نام خانوادگی">
  </fieldset>

  <fieldset>
    <legend>اطلاعات تماس</legend>
    <input type="email" placeholder="ایمیل">
    <input type="tel" placeholder="شماره تماس">
  </fieldset>

  <fieldset>
    <legend>حساب کاربری</legend>
    <input type="text" placeholder="نام کاربری">
    <input type="password" placeholder="رمز عبور">
  </fieldset>
</form>

در این ساختار، با استفاده از استایل‌دهی یا جاوااسکریپت می‌توان کاری کرد که تنها یک <fieldset> در هر مرحله نمایش داده شود و کاربر پس از تکمیل آن، به مرحله بعدی برود. این نوع طراحی به عنوان فرم مرحله‌ای (multi-step form) شناخته می‌شود.

جدول صفحات در فرم مرحله‌ای

اگر بخواهیم ظاهری شبیه به جدول صفحات (pagination) ایجاد کنیم، می‌توان در پایین فرم دکمه‌هایی مانند “مرحله بعد” و “مرحله قبل” قرار داد تا کاربر بین بخش‌های مختلف جابه‌جا شود. همچنین می‌توان وضعیت فعلی کاربر (مثلاً: مرحله ۲ از ۳) را در بالای فرم نشان داد.

عنصر fieldset در اچ تی ام ال

عنصر <fieldset> در HTML یک تگ معنایی (semantic element) است که برای گروه‌بندی منطقی عناصر داخل فرم استفاده می‌شود. این تگ به طراحان وب کمک می‌کند تا فرم‌هایی ساختارمند، منظم و قابل‌درک برای کاربران ایجاد کنند، به‌ویژه در فرم‌هایی که شامل چندین بخش متفاوت هستند، مثل اطلاعات شخصی، آدرس، پرداخت و غیره.

📌 تعریف کلی

<fieldset> یک قاب (box) دور گروهی از عناصر فرم مانند <input>، <select>، <textarea> و… ایجاد می‌کند و معمولاً همراه با عنصر <legend> استفاده می‌شود تا عنوان آن گروه مشخص شود.

🎯 ویژگی‌های مهم عنصر `<fieldset>`

گروه‌بندی منطقی: برای دسته‌بندی اجزای یک فرم استفاده می‌شود.
افزایش خوانایی و تجربه کاربری: فرم را برای کاربر ساده‌تر و قابل فهم‌تر می‌کند.
پشتیبانی از ویژگی disabled: می‌توان کل گروه را غیرفعال کرد تا تمام فیلدهای داخلی آن به‌صورت غیرقابل ویرایش درآیند.
🎨 استایل‌دهی با CSS
عنصر <fieldset> و <legend> را می‌توان با CSS زیباتر و هماهنگ با طراحی سایت کرد:
css

fieldset { border: 2px solid #ccc; padding: 15px; border-radius: 10px; } legend { font-weight: bold; color: #333; }

اطلاعاتت رو بده وقت مشاوره رزرو کن