Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

HTML and labels


May 04, 2021 HTML Reference Manual


Table of contents


HTML and labels

Labels are a common form control that triggers the corresponding form control functionality, enabling users to have a better experience when using forms. Refer to the following example:

A simple HTML form with two input fields and related tags:

<form action="demo-form.php">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="提交">
</form>

Try it out . . .

Browser support

HTML and labels HTML and labels HTML and labels HTML and labels HTML and labels

Most browsers currently support the hashtag.


Label definition and instructions for use

The label defines labels (tags) for input elements.

Label elements do not render any special effects to the user. H owever, it improves availability for mouse users. T his control is triggered if you click on the text within the label element. That is, when the user selects the label, the browser automatically turns the focus to the label-related form control.

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


Tips and comments

Tip: The "for" property binds the label to another element. Set the value of the "for" property to the value of the id property of the related element.


The difference between HTML 4.01 and HTML5

The "form" property is a new property of HTML5.


Property

New :HTML5 new property.

属性 描述
for element_id 规定 label 与哪个表单元素绑定。
form New form_id 规定 label 字段所属的一个或多个表单。


Global properties

The label supports global properties and views the full property sheet HTML global properties.


The event property

The label supports all HTML event properties.

Related articles

HTML DOM Reference Manual: HTML DOM Label Object