آموزش HTML – تگ label

نویسنده : مرتضی گنج | تاریخ انتشار : 2020/01/13 | بخش : آموزش HTML

تعریف و کاربرد تگ label در HTML

تگ label تگی است که معمولا درون تگ <form> جهت ایجاد یک (لیبل) یا (Label) یا برچسب برای یک تگ مورد استفاده قرار می گیرد.

بطور کلی تگ label ظاهری ندارد ( یعنی در مرورگرها هیچ حالت ظاهری یا بصری ندارد ) ولی از نظر ارتباط عناصر با همدیگر می تواند استفاده مفیدی داشته باشد.

  • تگ <label> یک برچسب برای عنصر <input> تعریف می کند.
  • تگ <label> به صورت خاصی برای کاربر ارائه نمی شود. با این حال قابلیت استفاده برای کاربرانی که از موس استفاده می کنند را ارتقا می دهد، اگر کاربر بر روی متن داخل عنصر <label> کلیک کند کنترل متن به صورت خودکار به فیلد مربوطه منتقل می شود.
  • برای ایجاد ارتباط و شرح دادن تگ <label> با عناصر دیگر باید خصوصیت for برای تگ <label> را مساوی خصوصیت id قرار دهیم .
  • یک label را می توان را با استفاده از خصوصیت “for”  یا با قرار دادن عنصر مورد نظر در داخل تگ <label> محدود کرد.

 

نکات و توضیحات

توجه داشته باشید که حتما باید ID که درون یک عنصر می باشد با ID که درون صفت FOR می باشد یکسان باشد. (همانند دستورات زیر)

<label for="male">مرد</label>
<input type="radio" id="male">

 

مثال از تگ label در HTML

<form action="files/test.php">
  <label for="male">Male</label>
  <input type="radio" name="jensiyat" id="male" value="مرد"><br>
  <label for="female">Female</label>
  <input type="radio" name="jensiyat" id="female" value="زن"><br><br>
  <input type="submit" value="ارسال">
</form>

تمرین کنید !

 

پشتیبانی مرورگرها از تگ label در HTML

Element
<label> بله بله بله بله بله

 

جدول صفات تگ label در HTML

نام صفت  مقدار توضیح
for element_id مشخص می کند که یک برچسب متعلق به کدام عنصر (تگ) می باشد.
form form_id نام (id) تگی ، که میگوید این برچسب متعلق به آن می باشد.