What is the For attribute for in an HTML tag?

It allows you to create a label that is attached to a specific element in the DOM. When the label receives a mouse down event it focuses the element it is attached to.

<label for="username">Username:</label>
<input type="text" id="username" name="username" />

When the user clicks on the "Username:" text it will focus the text box.

This is also good for accessibility as screen readers will read the label's inner HTML before reading the input field, regardless of the physical order they appear in the DOM.


It refers to the id (not name!) of the form element (input, select, textarea, option, etc.) that it is labelling. The implication of this is that using for allows one to click on the label, and have the related form element focused.

Tags:

Html