Syntax
<label for="email">Email:</label>
<input type="email" id="email">Examples
Label with for Attribute
Explicitly associating a label with an input using matching for/id.
<label for="username">Username:</label>
<input type="text" id="username" name="username">Wrapped Label
Associating a label implicitly by wrapping the input inside it.
<label>
Accept terms and conditions
<input type="checkbox" name="terms">
</label>Styled Label with Input
A label and input styled together as a form field.
<div style="display: flex; flex-direction: column; gap: 4px;">
<label for="pw" style="font-weight: 600; font-size: 14px;">Password</label>
<input type="password" id="pw" style="padding: 8px; border: 1px solid #d1d5db; border-radius: 6px;">
</div>Attributes
- for (string): The id of the form control this label describes
Best practices
- Every form input should have an associated label — never rely on placeholder text alone
- Prefer the explicit for/id association over wrapping, as it is more robust with custom-styled inputs
- Keep label text short and descriptive of exactly what the field expects
- Make sure the for value exactly matches the input's id, including capitalization
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<button>
The <button> element creates a clickable button that can trigger actions like submitting a form, resetting a form, or running custom JavaScript. Unlike <input type="button">, <button> can contain other HTML content such as icons or styled text, not just plain text. Its type attribute determines its default behavior within a form.<input>
The <input> element creates interactive form controls for collecting user data. Its behavior changes dramatically based on the type attribute — a single element can become a text field, checkbox, radio button, date picker, file uploader, and more. It is a void (self-closing) element with no closing tag or child content.<textarea>
The <textarea> element creates a multi-line plain-text input control, ideal for comments, messages, and any content longer than a single line. Unlike <input>, its default value is placed between the opening and closing tags rather than in a value attribute, and users can typically resize it by dragging its corner.<select>
The <select> element creates a dropdown list of options, letting users pick one or more predefined values. Each choice is defined with an <option> element inside it. Related options can be grouped visually using <optgroup>. It is a compact way to offer a constrained set of choices without the space a list of radio buttons would need.
The <button> element creates a clickable button that can trigger actions like submitting a form, resetting a form, or running custom JavaScript. Unlike <input type="button">, <button> can contain other HTML content such as icons or styled text, not just plain text. Its type attribute determines its default behavior within a form.<input>
The <input> element creates interactive form controls for collecting user data. Its behavior changes dramatically based on the type attribute — a single element can become a text field, checkbox, radio button, date picker, file uploader, and more. It is a void (self-closing) element with no closing tag or child content.<textarea>
The <textarea> element creates a multi-line plain-text input control, ideal for comments, messages, and any content longer than a single line. Unlike <input>, its default value is placed between the opening and closing tags rather than in a value attribute, and users can typically resize it by dragging its corner.<select>
The <select> element creates a dropdown list of options, letting users pick one or more predefined values. Each choice is defined with an <option> element inside it. Related options can be grouped visually using <optgroup>. It is a compact way to offer a constrained set of choices without the space a list of radio buttons would need.