</>
ValidateHTML

Missing Form Labels

Every form input needs a visible label that's programmatically associated with it. Screen readers announce the label when a user focuses the input. Without it, users don't know what information to enter.

Why It Matters

Missing form labels make forms unusable for screen reader users. They also reduce usability for everyone: clicking a label focuses its associated input (larger click target). WCAG 2.1 Level A requires all form inputs to have labels.

Code Examples

❌ Invalid
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
✓ Valid
<label for="email">Email</label>
<input id="email" type="email">

<label for="password">Password</label>
<input id="password" type="password">

How to Fix

  • 1Add a <label> element with a for attribute matching the input's id.
  • 2Alternatively, wrap the input inside the label: <label>Email <input type="email"></label>.
  • 3Placeholder text is NOT a substitute for labels. It disappears when the user types.
  • 4For icon-only inputs, use aria-label: <input aria-label="Search" type="search">.

Check Your HTML Now

Our validator detects this error automatically and shows the exact line number.

Open HTML Validator
Recommended

Cloudways · Managed Cloud Hosting

Fix this HTML error, then deploy on Cloudways managed cloud (AWS, GCP, DigitalOcean). 20% off 3 months with code VALIDATEHTML.

Start free trial

Related HTML Errors

Missing Alt Attribute on Images

Learn why every img element needs an alt attribute and how to write good alt text for accessibility and SEO.

Duplicate ID Attributes

Why duplicate IDs break JavaScript and accessibility. Learn how to find and fix duplicate id attributes in your HTML.

Missing Lang Attribute

Learn why the lang attribute on the html element is critical for screen readers, translations, and SEO.

← View all HTML errors