تگ label در html

تگ label در HTML برای تعریف برچسب متنی (label) جهت فیلدهای فرم مانند <input>، <textarea> و <select> استفاده می‌شود. هدف از استفاده این تگ افزایش دسترسی‌پذیری (Accessibility) و راحتی استفاده از فرم‌ها (تگ form) توسط کاربران است. کلیک روی متن برچسب باعث فعال شدن فیلد مرتبط می‌شود.

برای مرتبط کردن یک برچسب به فیلد ورودی، می‌توان از دو روش استفاده کرد:

1. قرار دادن عنصر فرم داخل تگ <label>
2. استفاده از ویژگی for در <label> که مقدار آن برابر با مقدار ویژگی id در عنصر فرم است.

<!-- روش ۱: -->
<label>
  نام:
  <input type="text" name="fullname">
</label>

<!-- روش ۲: -->
<label for="email">ایمیل:</label>
<input type="email" id="email" name="email">

تگ label تنها دارای یک ویژگی اختصاصی به نام for است و از سایر ویژگی‌های عمومی HTML نیز پشتیبانی می‌کند.

ویژگی for مشخص می‌کند که این برچسب به کدام فیلد فرم تعلق دارد. مقدار آن باید دقیقاً برابر با مقدار id فیلد مورد نظر باشد.

<label for="username">نام کاربری:</label>
<input type="text" id="username" name="username">

تگ <label> از Global Attributes در HTML پشتیبانی می‌کند، مانند class، style، title و غیره.

تگ <label> از Event Attributes در HTML پشتیبانی می‌کند، مانند onclick، onmouseover و غیره.

مرورگرها تگ <label> را به‌صورت inline نمایش می‌دهند و به آن استایل خاصی نمی‌دهند، اما معمولاً در کنار یا بالای فیلد فرم قرار می‌گیرد.

label {
  display: inline;
  cursor: default;
}