<label> Tag in HTML
The <label> tag in HTML is used to define a label for an <input>
, <textarea>
, <select>
, or other form elements. It helps in providing a user-friendly description of the input field and improves form accessibility by associating a text description with a form control.
Key Points on <label> Tag:
- The
<label>
tag defines a label for an input element, making forms easier to understand. - The
for
attribute of the<label>
tag associates the label with a specific input element by matching its ID. - The
<label>
tag increases form accessibility, as it allows screen readers to correctly read out the labels for input fields. - If the
<label>
tag is used correctly, clicking on the label will focus the associated input field.
Syntax of <label> Tag:
Syntax Example
<label for="elementID">Label Text</label>
Example of <label> Tag in HTML:
This example demonstrates the use of the <label>
tag to associate labels with input elements.
Code Example
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</form>
Output
Attributes of <label> Tag:
- for: Specifies the ID of the input element that the label is associated with. This is essential for making the form more accessible.
- form: Associates the label with a form by its ID, allowing the label to be used outside the form.
- id: Specifies a unique identifier for the
<label>
element, useful for styling or scripting.
The <label>
tag is important for accessibility, ensuring that form inputs are clearly described and easy to interact with. It is especially useful when the input fields are complex or when the form is intended to be used by individuals with disabilities.