برچسب <label> در اچ‌تی‌ام‌ال

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
یک برچسب برای یک عنصر <input> تعریف می‌کند
معرفی شده در نسخهٔ:۴٫۰۱
حذف شده در نسخهٔ: هنوز در حال استفاده است
ویژگی‌های مجاز:به پائین مراجعه کنید
تنظیمات پیش‌فرض CSS:cursor: default;

{{منو اسکرول چپ|نام منو={{مرجع منو اچ‌تی‌ام‌ال|expanded=مرجع}}}}

مثال

سه دکمهٔ رادیویی با عنوان‌هایشان:

<form action="/action_page.php">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>


تعریف و کاربرد

برچسب <label> یک عنوان را برای عنصرهای متعدد تعریف می‌کند:[۱]

استفادهٔ درست از عنوان‌ها (labels) با عناصر بالا به کاربران زیر سود می‌رساند:

  • کاربران صفحه خوان (وقتی که کاربر روی عنصر تمرکز (focus) می‌کند، عنوان را بلند می‌خواند)
  • کاربرانی که با کلیک بر روی نقاط بسیار کوچک مشکل دارند (مثل جعبه‌های انتخاب) - چون وقتی که کاربر روی متن درون عنصر <label> کلیک می‌کند، گویی ورودی هم کلیک می‌شود (که این موضوع فضای کلیک را افزایش می‌دهد)

ویژگی for از برچسب <label> باید با ویژگی id از عناصر مرتبط برابر باشد، تا آن‌ها را به همدیگر وصل کند.

پشتیبانی مرورگر

عنصر Chrome Internet Explorer / Edge Firefox Safari Opera
<label> بله بله بله بله بله

نکات و ملاحظات

نکته: یک عنوان (label) یا با استفاده از ویژگی «for» به یک عنصر متصل می‌شود، یا با قرار دادن عنصر درون عنصر <label>.

ویژگی‌ها

ویژگی مقدار شرح
for element_id مشخص می‌کند که برچسب به کدام عنصر فرم متصل است
form form_id مشخص می‌کند که برچسب به کدام فرم تعلق دارد

ویژگی‌های سراسری

همچنین برچسب <label> از ویژگی‌های سراسری (Global Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

Event Attributes

ویژگی‌های رویداد

همچنین برچسب <label> از ویژگی‌های رویداد (Event Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

صفحات مرتبط

مرجع DOM اچ‌تی‌ام‌ال: شیء Label (Label Object)

تنظیمات پیش‌فرض CSS

بیشتر مرورگرها عنصر <label> را با مقادیر پیش‌فرض زیر نمایش می‌دهند:

مثال

label {
  cursor: default;
}


منابع آموزشی