<label> element is used to associate a label with an HTML form control such as
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.
Here's an example of how to use the
<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.
This element includes the global attributes.
|Specifies the ID of the form control that the label is associated with. It allows a user to activate the associated control when the label is clicked
- 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
forattribute 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.
- Always use a
labelelement to associate text with form controls. This allows assistive technologies to identify the relationship between the label and the form control.
- Use the
forattribute to associate the
labelwith 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
labelis 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
titleattribute 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
accesskeyattribute, 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
- Consider using
aria-labelattributes in addition to
labelelements, particularly for complex form controls. These attributes can provide additional information for users who may be using assistive technologies.