Input labels
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]