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

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

تگ legend در HTML چيست؟

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

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

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

    <label for="name">نام:</label>
    <input type="text" id="name" name="name">

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

  <input type="submit" value="ارسال">
</form>

در اين مثال، تگ <legend> عنوان «اطلاعات شخصي» را براي گروه فيلدهاي نام و ايميل مشخص مي‌کند.

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

ويژگي	توضيح
class / id	اعمال استايل يا شناسه يکتا براي ارجاع و CSS

مثال با استايل CSS

<style>
  fieldset {
    border: 2px solid #2196f3;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 15px;
  }
  legend {
    font-weight: bold;
    padding: 0 5px;
    color: #2196f3;
  }
  label {
    display: block;
    margin: 5px 0;
  }
  input[type="text"], input[type="email"] {
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
  }
  input[type="submit"] {
    background-color: #2196f3;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  input[type="submit"]:hover {
    background-color: #1976d2;
  }
</style>