The for attribute of the label element must refer to a non-hidden form control <label for=“Country” >Countr

Question

<div class="needContent">
                    <label for="Country" >Country</label>

                    <input list="browsers" name="Country" required="required">
                    <datalist id="browsers">
                        <option value="Canada">
                        <option value="The United States">
                        <option value="India">
                        <option value="Pakistan">
                        <option value="Germany">
                    </datalist>
                </div>

Hi, I am new to html.I am trying to validate my file on html validator but it is giving me the error specified above. Can someone help me to fix that please?

Answer 1

The problem is that the for attribute of <label> corresponds to the element's ID , not its name :

for

• The id of a labelable form-related element in the same document as the label element. The first such element in the document with an ID matching the value of the for attribute is the labeled control for this label element.

To resolve this, all you have to do is give your <input> element an id that is the same as its name . Note that you'll probably also want to ensure that both of these are lowercase to prevent confusion:

 <div class="needContent"> <label for="country">Country</label> <input list="browsers" id="country" name="country" required="required"> <datalist id="browsers"> <option value="Canada"> <option value="The United States"> <option value="India"> <option value="Pakistan"> <option value="Germany"> </datalist> </div>