<?xml version="1.0" encoding="utf-8"?>

Input labels

Input labels Bad Practice
Input labels Best Practice

Labels are no less important than inputs themselves — without them, users wouldn't know what information they need to type in or choose from. Of course, it's possible to replace labels with placeholders, but it will create all sorts of problems for assistive technology users. While label-free forms might look less cluttered, screen readers can't read placeholders, and low vision users might struggle reading them too.

Create labels with the <label> tag. We strongly recommend associating labels with inputs not only visually but also programmatically for better accessibility. You can do it either with the for attribute along with the value of the input's id, or by nesting the <input> directly inside the <label> (read more about that on MDN Web Docs).[1]

Improve your UX & Product skills with interactive courses that actually work