HTML <label> ɗauka

Tattalin arzikin ta amfani

<label> Labali za a iya ta bayyana labali (nakidanci) wa abin na input.

Labali na yau ke fassara dukiyar sauri ga abokan da ke amfani da masu kai wa kiwai. Idan abokan yau ya ciyarwa tekun a ciki na labali na yau, za a faɗaɗa wannan kudirga. Idan abokan yau ya zama abin da yau ke kama, browser zai kai tsaro da kai tsaro cikin abin da yau ke ciki da labali.

<label> Labali na 属性 for za a iya kasance gaba da kiyasta id na abin da yau ke ciki.

<label> Labali za a iya ta bayyana labali (nakidanci) wa abin da yau ke ciki:

Shi ka amfani da abin da a ciki da label a yance yau zai kasance ganinwa ga abokan da suka kamata:

  • Ayyuka masuwarin fassarawa da sauri (idanna abokan yau ke kama da abin da suke zama a cikin element, za a fassara kamarin shi)
  • 难以点击非常小的区域（例如复选框）的用户 - 因为当用户单击 <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> element inside binds the label to the element.

attribute

attribute value description
for element id specifies which form element the label is bound to.
form form id specifies the form field to which the label belongs.

global attributes

<label> tags also support global attributes in HTML.

event attributes

<label> tags also support 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