HTML <label> ຕາມມັນ

ການກໍານົດ ແລະ ການນໍາໃຊ້

<label> label ກໍານົດຫົວໜ້າ(ອັດສີ)ໃຫ້ແກ່ input element.

label element ບໍ່ຈະສະແດງຜົນງານພິເສດໃຫ້ຜູ້ນຳໃຊ້. ແຕ່ມັນຈະຊ່ວຍຜູ້ນຳໃຊ້ທີ່ໃຊ້ເຫມືອຄູ່. ຖ້າເຈົ້າກະທັ້ງຄືນໃນຂະແນນຂອງ label element, ຈະກະຕຸ້ນຄວາມຄິດຂອງປະກອບອັນ. ດັ່ງນັ້ນ, ເມື່ອຜູ້ນຳໃຊ້ເລືອກຫົວໜ້າ, ເຄືອງນຳໃຊ້ຈະອັດຕະພາງຄວາມໃກ້ຄຽງກັບປະກອບອັນທີ່ກ່ຽວຂ້ອງ.

<label> ຫົວໜ້າຂອງ label ທາງ for ຄວນຈະສະເໝີດັ່ງກັບ id ຂອງປະກອບອັນທີ່ກ່ຽວຂ້ອງ.

<label> label ສາມາດກໍານົດຫົວໜ້າ(ອັດສີ)ໃຫ້ແກ່ປະກອບອັນຫຼາຍອັນ:

ການນໍາໃຊ້ປະກອບອັນທີ່ສຳຄັນກັບ label ຈະຊ່ວຍຜູ້ນຳໃຊ້ທັງໝົດ:

  • ຜູ້ນຳໃຊ້ຄົ້ນຫາສະແດງຜ່ານເຊັກບັນຊີ(ເມື່ອຜູ້ນຳໃຊ້ສົນໃຈໃສ່ປະກອບອັນແບບຈະອ່ານຫົວໜ້າ)
  • 难以点击非常小的区域（例如复选框）的用户 - 因为当用户单击 <label> When the text in the element is switched, it will toggle the input (this increases the click area) for users who find it difficult to click on very small areas (such as checkboxes) - because when the user clicks

See also:

HTML DOM Reference Manual:Label Object

Example

Three radio buttons with label:

<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="Submit">
</form>

Try It Yourself

Tips and Comments

Tip:<label> The for attribute must be equal to the id attribute of the related element to bind them together. It can also be done by placing the element in <label> The element binds the label to the element inside.

Attribute

Attribute Value Description
for Element id Specifies which form element the label is bound to.
form Form id Specifies the form that the label field belongs to.

Global Attributes

<label> The tag also supports Global Attributes in HTML.

Event Attributes

<label> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will use the following default values to display <label> Element:

label {
  cursor: default;
}

Try It Yourself

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support