برچسب <label> HTML
تعریف و استفاده
<label> برچسب برای تعریف برچسب (نشان) برای عنصر input تعریف می‌کند.
عنصر برچسب هیچ اثر خاصی بر روی کاربران نمایشگر ندارد. اما، آن کاربران ماوس را بهبود بخشیده است. اگر شما روی متن در داخل عنصر برچسب کلیک کنید، این کنترل فعال می‌شود. به این معنا که وقتی کاربر برچسب را انتخاب می‌کند، مرورگر به طور خودکار به عنصر فرم مرتبط با برچسب جلب توجه می‌کند.
<label> برچسب خصوصیت for باید با خاصیت id عنصر مرتبط باشد.
<label> برچسب می‌تواند برچسب‌ها (نشان‌ها) برای چندین عنصر تعریف کند:
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="month">
- <input type="number">
- <input type="password">
- <input type="radio">
- <input type="range">
- <input type="search">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
- <meter>
- <progress>
- <select>
- <textarea>
استفاده‌ی صحیح از عناصر بالا و برچسب‌ها برای کاربران زیر مفید خواهد بود:
- استفاده‌کننده‌ی خواننده‌ی صفحه‌نمایش (وقتی که کاربر بر روی عنصر تمرکز می‌کند، برچسب خوانده می‌شود)
- مشکل دارد
<label>برای کاربرانی که نمی‌توانند مناطق بسیار کوچک (مثلاً مربع‌های انتخابی) را کلیک کنند - زیرا زمانی که کاربر کلیک می‌کند
لطفاً به:
دستورالعمل‌های DOM HTML:برچسب‌های Object
مثال
سه رادیو با برچسب:
<form action="/action_page.php"> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label><br><br> <input type="submit" value="پیشنهاد"> </form>
توضیحات و یادداشت‌ها
توضیح:<label> ویژگی for باید برابر با ویژگی id عنصر مرتبط باشد تا بتوانند به هم متصل شوند. همچنین می‌توانید عنصر را در <label> برچسب در داخل عنصر قرار می‌گیرد تا به آن متصل شود
ویژگی
| ویژگی | مقدار | توضیح |
|---|---|---|
| for | id عنصر | تعیین کنید که برچسب به کدام عنصر فرم متصل شود |
| form | id فرم | محدوده‌ی برچسب label به فرم مربوط می‌شود |
ویژگی‌های جهانی
<label> برچسب‌ها نیز از ویژگی‌های رویداد پشتیبانی می‌کنند ویژگی‌های جهانی در HTML.
ویژگی‌های رویداد
<label> برچسب‌ها نیز از ویژگی‌های رویداد پشتیبانی می‌کنند ویژگی‌های رویداد در HTML.
تنظیمات پیش‌فرض CSS
بیشتر مرورگرها از مقادیر پیش‌فرض زیر برای نمایش استفاده می‌کنند <label> عنصر:
label {
cursor: default;
}
پشتیبانی از مرورگر
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
