آموزش و يادگيري تگ fieldset در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <fieldset> آشنا مي‌شويم. اين تگ براي گروه‌بندي عناصر فرم و ايجاد بخش‌هاي مشخص با قاب (border) استفاده مي‌شود.

تگ fieldset در HTML چيست؟

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

مثال ساده از تگ fieldset

<form>
  <fieldset>
    <legend>اطلاعات شخصي</legend>
    <label>نام: </label>
    <input type="text" name="name"><br>
    <label>ايميل: </label>
    <input type="email" name="email">
  </fieldset>
</form>

در اين مثال، بخش "اطلاعات شخصي" شامل دو فيلد متن و ايميل داخل يک قاب مشخص شده است.

ويژگي‌هاي مهم تگ fieldset

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

<style>
  fieldset {
    border: 2px solid #2196f3;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
  }
  legend {
    font-weight: bold;
    padding: 0 8px;
    color: #2196f3;
  }
</style>

مزاياي استفاده از fieldset

• گروه‌بندي منطقي عناصر فرم براي تجربه کاربري بهتر.
• ايجاد قاب و عنوان مشخص براي بخش‌هاي مختلف فرم.
• قابليت غيرفعال کردن تمام عناصر داخل با ويژگي disabled.

براي يادگيري کامل طراحي فرم‌هاي HTML و نحوه استفاده از تگ fieldset، پيشنهاد مي‌کنيم در دوره آموزش HTML مقدماتي تا پيشرفته آموزش دون شرکت کنيد.

براي مشاهده تمام آموزش‌هاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.