the value of the for attribute of the label element must be the id of a non-hidden form control.

Question

Problem :

Facing following strange error

the value of the for attribute of the label element must be the id of a non-hidden form control.

Answer 1

The label for attribute should have the input id value as shown below

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

Now to omit the for and id attributes completely, please put input inside label as shown below

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

Also please note input cannot be hidden like <input type="hidden"> but  it can be styled as hidden <input style="display:none">

If you follow above approach then your issue will be resolved.

Answer 2

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">

If you use the for attribute in a label element it has to match the id of an input element in your form

<label for="field-id" style="line-height:24px;">Your Name</label><br>&nbsp;&nbsp;
<input type="text" id="field-id">

The for attribute of a <label> must refer to the id attribute of a form input.

Use:

<label for="email-field">Email</label>
<input name="email" id="email-field" type="text" />

instead of:

<label for="email-field">Email</label>
<input name="email" id="email" type="text" />