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

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <label> آشنا مي‌شويم. اين تگ براي برچسب‌گذاري فرم‌ها و اتصال متن توضيحي به فيلدهاي ورودي استفاده مي‌شود و به بهبود دسترسي (Accessibility) کمک مي‌کند.

تگ label در HTML چيست؟

تگ <label> براي توضيح يا برچسب دادن به عناصر فرم مانند <input>، <select> و <textarea> استفاده مي‌شود. کاربران مي‌توانند با کليک روي متن داخل <label> فيلد مرتبط را فعال کنند.

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

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

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

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

در اين مثال، ويژگي for متن داخل <label> را به فيلد ورودي مرتبط مي‌کند. با کليک روي متن، کاربر مي‌تواند مستقيماً فيلد مربوطه را انتخاب کند.

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

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

<style>
  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }
  input[type="text"], input[type="email"] {
    padding: 6px;
    margin-bottom: 10px;
    border: 1px solid #2196f3;
    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>

نکات مهم درباره label

• استفاده از <label> دسترسي کاربران به فرم‌ها را بهبود مي‌بخشد.
• ويژگي for براي ارتباط مستقيم با عنصر فرم ضروري است.
• مي‌توان از <label> بدون ويژگي for استفاده کرد و عنصر فرم را داخل آن قرار داد.

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

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