HTML - <label>

Examples

<label>Click me <input type="text"></label>

<label for="username">Click me</label>
<input type="text" id="username">

Description  

The HTML Label Element (<label>) represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the <label> element, or by using the for attribute. Such a control is called the labeled control of the label element. One input can be associated with multiple labels.

It's worth noting, however, that labels are not themselves directly associated with forms. They are only indirectly associated with forms through the controls with which they're associated.

Browser Compatibility  

[1] Starting with Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5), a bubbling click event triggers at most one <label>, and the synthetic click event cannot trigger additional <label>s. In Gecko, a click event will still bubble up past a <label>, while in WebKit or Internet Explorer the click event will stop at the <label>. The behavior prior to Gecko 8.0 (triggering multiple <label>s) caused Firefox to stop responding (see bug 646157).

[2] The HTML specification was updated in April 2016 to deprecate the form attribute. It's still available from script, but its definition has changed: it now returns the associated control's form, or null if there is no associated control (that is, if HTMLLabelElement.control is null). See HTMLLabelElement.form.

This change is implemented in Firefox 49.

See Also  

• Other form-related elements: <form>, <button>, <datalist>, <legend>, <select>, <optgroup>, <option>, <textarea>, <keygen>, <fieldset>, <output>, <progress> and <meter>.

Specifications  

License