The <input> Element
As defined in the HTML Living Standard, the <input> element represents a typed data field, usually with a form control to allow the user to edit the data.
<label for="email">Email:</label>
<input type="email" id="email" name="user_email">
View HTML Living Standard: The input element
The Power of the type Attribute
The behavior of an <input> is defined almost entirely by its type attribute. Choosing the correct type is the first step in accessibility and mobile usability.
type="email"/"tel"/"url": Triggers specialized virtual keyboards on mobile devices (e.g., showing the '@' or '.com' keys).type="checkbox"/"radio": Provides native selection states and keyboard navigation within groups.type="date"/"number": Provides native browser UI for picking dates or incrementing values.
WCAG Requirement: Labels or Instructions
Success Criterion 3.3.2 (Level A): Labels or instructions are provided when content requires user input.
An <input> without an associated <label> is an accessibility failure. Sighted users might guess the purpose based on nearby text, but screen readers will simply announce "Edit text, blank," leaving the user blind to the field's purpose. Always use the for attribute on the label to match the id on the input.
Advanced Accessibility Attributes
To provide a truly inclusive experience, utilize these standard attributes:
required: Natively informs the browser and assistive technology that the field must be completed.aria-invalid: Signals when a field has a validation error, allowing screen readers to alert the user immediately.aria-describedby: Links an input to additional help text or error messages, ensuring they are read when the field gains focus.
<label for="pass">Password:</label>
<input type="password" id="pass" aria-describedby="pass-hint">
<p id="pass-hint">Must be at least 8 characters long.</p>
Common Pitfalls
A11y Tip: Placeholder is not a Label
Do not use the placeholder attribute as a replacement for a visible <label>. Placeholders disappear when a user starts typing, which is a major barrier for users with cognitive or memory impairments. They also often fail color contrast requirements by default.