What does the HTML label mean? Examples of usage of HTML label tags and attributes

What does the HTML label mean? What do you know about the functions and attributes of HTML labels? This article explains the definition and function of the HTML label tag, as well as a detailed explanation of the two attributes of the HTML label tag (with examples of the for attribute of the HTML label tag)

The definition and function of the HTML label tag Usage:

The label defines the label (marker) for the input element. The

label element does not present any special effects to the user. However, it improves usability for mouse users. This control is triggered if you click on the text inside the label element. That is to say, when the user selects the label, the browser will automatically turn the focus to the form control related to the label.

The for attribute of the label should be the same as the id attribute of the related element.

Note: The "for" attribute can bind label to another element. Please set the value of the "for" attribute to the value of the id attribute of the relevant element.

The role of the HTML label tag:

is a text prompt label, but adding the for attribute to the label tag can be bundled with the corresponding option box, that is to say , in this case, when you click on this text box, it will have the effect of clicking on the option box.

Example:

<lable>男</lable>
<input style="checkbox">

When the mouse clicks "male", the text box behind it is automatically selected for input

Attributes of the HTML label tag:

In fact, there are two attributes in Label that are very useful, one is FOR and the other is ACCESSKEY.

The FOR attribute in the HTML label tag:

Function: Indicates the HTML element to be bound by the Label tag, you click this When a tag is attached, the bound element will gain focus.

Usage: Name

HTML label ACCESSKEY attribute in the label:

Function: Indicates the hotkey to access the element bound to the Label label. When you press the hotkey, the bound element will gain focus.

Usage: Name

Limitations: The shortcut keys set by the accessKey attribute cannot conflict with the browser's shortcut keys, otherwise the browser's shortcut keys will be activated first.

Note: To bind LABEL to another control, set the FOR attribute of the LABEL element to the same ID as the control. Binding LABEL to the control's NAME property is useless. However, to submit the form, you must specify a name for the control to which the LABEL element is bound.

HTML The for attribute of the label (example):

This has an example:

With two input fields and related Labeled simple HTML form:

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

HTMLThe for attribute definition and usage of the label:

The for attribute specifies which form element the label is bound to.

Implicit and explicit connections

Marks are usually associated with form controls in one of the following two ways: using the form controls as the content of the mark label, this is implicit formula form, or name a target form id for the for attribute under the tag, which is the explicit form.

For example, in XHTML:

Explicit association:

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

Implicit association:

<label>Date of Birth: <input type="text" name="DofB" /></label>

The first tag starts with explicit The form associates the text "Social Security Number:" with the form's Social Security Number text input control ("SocSecNum"). The value of its for attribute is the same as the control's id, which is SSN. The second tag ("Date of Birth:") does not need a for attribute, and its associated control does not need an id attribute. They are implicitly connected by placing an tag inside the tag. of.

Browser support:

All major browsers support the for attribute.

Safari 2 or earlier does not support the for attribute.

For attribute syntax of HTML label:

<label for="value">

For attribute attribute value of HTML label:

element_id: The id of the element to which the label is bound.

[Related recommendations]

html What does textarea mean? How to get newlines and spaces in textarea tags?

What does the HTML5 tag mean? Detailed explanation of the basic usage of HTML5 tag

The above is the detailed content of What does the HTML label mean? Examples of usage of HTML label tags and attributes. For more information, please follow other related articles on the PHP Chinese website!