<label>

Definition

The HTML <label> element is used to associate a label with an HTML form control such as <input>, <textarea>, <select>, etc.

The label provides a visible description or a name for the form control. When a user clicks on a label, it activates the associated form control. This helps improve the user experience for people who may have difficulty clicking on small form control elements.

Examples

Here's an example of how to use the <label> element:

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

In this example, the label "Username:" is associated with the input field with an id of "username". The for attribute of the <label> element references the id attribute of the associated form control.

Attributes

This element includes the global attributes.

Best Practices

• Always use a label element to provide a visible description or name for form controls. This helps users understand what information is expected of them.
• Use the for attribute to associate the label with the correct form control. This helps improve accessibility for users with disabilities.
• Make sure that the label text is descriptive and concise. Avoid using overly technical or ambiguous language.
• Consider the layout and design of your form when positioning labels. Placing labels above form controls is usually the most accessible option, but side-by-side or inline labels can be appropriate in certain situations.
• Use appropriate styling to make labels stand out from other text on the page. This can include using larger font sizes, bold or colored text, or placing the label in a separate container from the form control.
• Test your form with screen readers or other assistive technologies to ensure that labels are properly associated with form controls, and that they are read in a logical order.

Accessibility Considerations

• Always use a label element to associate text with form controls. This allows assistive technologies to identify the relationship between the label and the form control.
• Use the for attribute to associate the label with the correct form control. This ensures that assistive technologies can correctly identify which label belongs to which form control.
• Ensure that the text of the label is descriptive and clearly identifies the purpose of the form control. This helps users who may be using assistive technologies, such as screen readers, to understand the context of the form control.
• Consider using the title attribute to provide additional information about the purpose of the form control. This can be particularly useful for users who may have difficulty understanding the label text.
• When using the accesskey attribute, ensure that the shortcut key is not already in use by the browser or assistive technology. Additionally, avoid using access keys that conflict with common assistive technology commands, such as Alt+Tab.
• Consider using aria-labelledby or aria-label attributes in addition to label elements, particularly for complex form controls. These attributes can provide additional information for users who may be using assistive technologies.

Browser Compatibility