Labeling form fields (<label>)

The label element is used to add information to a particular control, let say a text field.

The advantage of a label element is that a browser recognizes that it belongs to a certain control and uses that to, i.e., re-directs its focus to the control it belongs to if tabbing navigation is used.

To associate a label element to a form control, the label's attribute for must match the control's id attribute. The other way is to explicitly assign a label to an element by wrapping it around the element; that is to make it the element's parent tag.

An advantage of using the for attribute is that a label can be placed anywhere in the form's body and a browser is going to recognize it properly.

Syntax:

<label for=""></label>

Attributes:

id, class (document-wide identifiers)
lang (language information), dir (text direction)
title (element title)
style (inline style information)
accesskey (access keys)
for (label association)
onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

Example

HTML label element:

<html>

<head>
<title>HTML tutorial</title>
</head> 

<body>

<form action="" method="post" name="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" /><br />

<input type="submit" value="Type: SUBMIT" />

</form>

<h6>p.s. submitting the form will not generate any action</h6>

</body>

</html>

›› go to examples ››

Labeling form fields (<label>)

Syntax:

Attributes:

Example

HTML label element:

Comments

About

Contact

Get Connected