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

HTML

<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>

Result

Editor