Should we use <label> for every <input>?
-
04-10-2019 - |
Question
Should we use <label>
for every input
? , even for submit button and keep hidden thorough css if we don't want to show label
.
or no need of label for submit button?
.hide {display:none}
<fieldset>
<legend>Search</legend>
<label for="Search">Search...</label>
<input value="" id="Search" name="Search">
<label for="Submit" class="hide">Submit</label>
<input type="submit" value="Go!" name="submit" id="submit">
</fieldset>
or we should use like this (no label for submit)
<fieldset>
<legend>Search</legend>
<label for="Search">Search...</label>
<input value="" id="Search" name="Search">
<input type="submit" value="Go!" name="submit" >
</fieldset>
Solution
No. Don't use labels for elements which have intrinsic label text (e.g. all kinds of buttons). (Note: Faking a label with the value
attribute doesn't count).
See the description section of the WCAG section on the subject.
OTHER TIPS
From official docs:
The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.
http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL
Note the term may be not must be. However, it is always a good idea to use a lable
, this turns out to be handy:
- For accessibility reasons
- For mobile browsers