Form Input Field
A form input field is the HTML element in which a user enters or selects data: free text, date, checkbox, dropdown, file upload. To be accessible, each field must be linked in the code to a label that identifies the expected data. Without this connection, screen readers announce a silent field.
48.2% of home pages analyzed by the WebAIM Million 2025 contain at least one form field without a label. It is the third most common accessibility error on the web, after insufficient contrast and images without alt text.
#What is a form input field?
The RGAA glossary distinguishes several types:
- Free entry:
<input>(text, email, password, date…),<textarea> - Predefined choices:
<select>, radio buttons, checkboxes - File upload:
<input type="file">
Buttons (<button>, <input type="submit">) are not included.
Each field needs an accessible name: the text that assistive technologies announce when the user reaches the field. The W3C H44 technique recommends creating it via the <label> element:
<!-- Explicit label: for + id -->
<label for="email">Email</label>
<input id="email" type="email">
<!-- Implicit label: the field is inside -->
<label>
Email
<input type="email">
</label>Both methods are equivalent for screen readers. The first is more common in React or Vue projects, where label and input rarely live in the same component.
#The trap of placeholder without label
Many designs replace the label with a placeholder. The text appears in the field, the layout is clean. Except the placeholder disappears as soon as the user types. The user no longer knows which field they are filling in.
The problem is worse for people with cognitive impairments or reduced short-term memory. And some screen readers simply don't announce the placeholder as the field name.
<!-- ❌ Placeholder alone — no accessible label -->
<input type="email" placeholder="[email protected]">
<!-- ✅ Visible label + placeholder as additional hint -->
<label for="email">Email</label>
<input id="email" type="email" placeholder="[email protected]">The placeholder is a hint. Not a label.
#The right type makes all the difference
Using type="text" everywhere is a missed opportunity. HTML5 input types (email, tel, url, date) adapt the virtual keyboard on mobile, activate native browser validation, and enable auto-completion. A type="email" displays the @ directly on the keyboard. A type="tel" opens the numeric keypad.
No JavaScript needed. The browser does the work.
#In summary
Every form input field needs a <label> linked in the code, not just text placed beside it. The placeholder never replaces the label. And the most precise input type possible gives the user the right keyboard, the right validation, and the right auto-fill.