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>
Was it helpful?

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
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top