CODEWITHSUNDEEP
htmlvalidation
Vlad
Vlad

Reputation: 91

The for attribute of the label element must refer to a non-hidden form control

I have some errors in my code Here is my error:

The for attribute of the label element must refer to a non-hidden form control.

And myd code: 

<form action="/search">
  <span class="input input--hoshi search-wrapp main-page-open" style="display:block">
    <input class="input__field input__field--hoshi" type="text" id="search" name="keyword" placeholder="Search..."/>
    <label class="input__label input__label--hoshi input__label--hoshi-color-2" for="input-5">
      <!--<span class="input__label-content input__label-content-hoshi">Search...</span>-->
    </label>
    <span class="icon-serch"></span>
  </span>
  <input id="search-btn" type="submit" style="display: none;"/>
</form>

What is wrong with it? Thanks!

Upvotes: 7

Views: 48244

Answers (2)

Igor Sukharev
Igor Sukharev

Reputation: 3118

The label for attribute must contain the input id value

<label for="foo">Foo:</label>
<input id="foo">

To omit the for and id attributes all-together, put input inside label

<label>
    Foo: <input name="foo">
</label>

Also note, that input cannot be hidden <input type="hidden">, however it can be styled as hidden <input style="display:none">

Upvotes: 11

andersan
andersan

Reputation: 125

The validator is expecting for your label's for field to target the id field of the input element that contains it. Here, that means that for="input-5" is expected to be for="search", as <input>'s id is search.

As you're expecting the user to add input to this field, you should be making sure they are linked to each other.

Upvotes: 0

Related Questions