HTML for Attribute
Description
The for
attribute in HTML is a special attribute used primarily with the <label>
element to bind the label to a specific form input. This association enhances usability and accessibility, making forms easier to navigate for users, including those using assistive technologies like screen readers.
Here's how it works: the for
attribute on a <label>
element must have a value that is identical to the id
attribute of a form control (like <input>
, <select>
, <textarea>
, etc.) within the same document. When these IDs match, clicking on the label text will focus on or activate the associated form control, which is particularly helpful for small checkboxes and radio buttons, improving the clickable area.
Syntax example:
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="email">
In this example, the label "Email:" is associated with the input field through the use of the for
attribute, which has a value of "user-email". This matches the id
of the input, creating a functional link between the label and the input field. When a user clicks on the label "Email:", the input field receives focus, allowing for immediate text entry.
Using the for
attribute correctly is a best practice for creating accessible web forms. It ensures that form controls are easily selectable and that labels are properly announced by screen readers, improving the overall user experience on the web.
Syntax
<tagname for="value">
Values
- valueis the value you're assigning to the attribute, which will be the same value as the
id
that is used on the form control (like<input>
,<select>
,<textarea>
, etc.). The value is always enclosed in quotation marks.
Applies To
The for
attribute can be used on the following html elements.
Example
<form action="formscript.php">
<label for="html">HTML</label><br>
<input type="text" id="html" name="html" value="HTML"><br><br>
<label for="css">CSS</label><br>
<input type="text" id="css" name="css" value="CSS"><br><br>
<label>JavaScript (No 'for' assigned)</label><br>
<input type="text" id="javascript" name="javascript" value="JavaScript"><br><br>
<input type="submit" value="Submit">
</form>
Browser Support
The following table will show you the current browser support for the HTML for
Attribute.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 1 | 1 | 15 | 4 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 14 | 3.2 | 1 | 4.4 |
Last updated by CSSPortal on: 26th March 2024