• Register
0 votes

Problem :

I want to know why I keep facing below error while I try to check my page on http://validator.w3.org/check The error is as below :


Line 300, Column 90: The for attribute of the label element must refer to a form control.
… <label for="myname" style="line-height:30px;">My Name</label><br>&nbsp;&nbsp;

here is my actual code

  <label for="myname" style="line-height:30px;">My Name</label><br>&nbsp;&nbsp;
  <input class="css_form_namefield TooltipIstok " type="text" name="myname" value="" style="width: 600px;" maxlength="60" >


6 5 3
7,540 points

2 Answers

0 votes

Solution :

By definition, your for attribute value must match your id attribute value of “another” form control, to use your HTML 4.01 terminology. The  Controls are created by the input, textarea, button, select, or any object elements, so you need to just read “another” as “a”. HTML5 understands it very differently, specifying that your attribute must refer to the labelable element.

From your error message, it is clear that you are trying to validate against HTML5, so your rule that will apply  is that your for attribute must be referring to the button, input other than the with type=hidden keygen,/meter/output/progress/select, or the textarea element. My suggession is that you must have forgotten the id attribute and you are incorrectly assuming that your name attribute could do the job for you.

I hope my suggestions will help you in resolving your issue.

9 7 4
38,600 points
0 votes


What This Implies

This error is saying you that a <label> within a <form> uses a for attribute inaccurately.

The for attribute of a <label> is employed to associate a label with appointed form input. It should comprise the id of the input to which it is associated. Leaving the for attibute blank or referring to an input that does not subsist is not approved.

The label for attribute should comprise the input id value

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

To throw away the for and id attributes all-together, place input inside label

    Foo: <input name="foo">

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

In case you employ 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">

By definition, the for attribute value should match the id attribute value of “another” form control, to employ the HTML 4.01 terminology. Controls are made by inputtextareabuttonselect, or object elements, hence only read “another” as “a”. HTML5 puts this somewhat diversely, secluding that the attribute should refer to a labelable element.

From the error message, it appears that you are validating against HTML5, hence the rule that executes is that the for attribute should refer to a buttoninput (other than with type=hidden), keygenmeteroutputprogressselect, or textarea element. My guess is that you only forgot the id attribute, inaccurately pretending that the name attribute could do its job.

10 6 4
31,120 points

Related questions

0 votes
2 answers 140 views
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.
asked Nov 12, 2019 peterlaw 6.9k points
0 votes
1 answer 37 views
Problem : I am facing below error if I try to export datagrid to the excel. &ldquo;Control 'gridview1' of type 'gridview' must be placed inside a form tag with runat=server.&rdquo; Please find below my code : <form runat="server" id="form1"> <div runat="server" id=" ... TextBox> </form> My GridView is within the from tag with the runat="server", but still I am facing above error. How to fix this?
asked Feb 17 mphil 2.3k points
1 vote
1 answer 113 views
Problem : I am very new to Angular 4. Please find below my component in Angular 4: @Component( { selector: 'input-extra-field', template: ` <div class="form-group" [formGroup]="formGroup" > <switch [attr.title]="field.etiquette" [attr.value]="field.valeur" ... .../../../forms/@angular/forms.es5.js.FormControlDirective.ngOnChanges (forms.es5.js:4617) Please guide me in fixing above Angular 4 error.
asked May 11 stewart 4k points
0 votes
1 answer 2K views
Problem : I am facing following error from the Angular 2 core.umd.js:5995 EXCEPTION: Uncaught (in promise): Error: Error in app/model_exposure_currencies/model_exposure_currencies.component.html:57:18 caused by: If ngModel is used within a form tag, either the name attribute must be set or the form ... 0-9]+)?" required> </div> </td> Below is my form tag: <form #f="ngForm" (ngSubmit)="onSubmit()">
asked Dec 3, 2019 alecxe 7.5k points
0 votes
1 answer 4 views
4 views asked 1 day ago miki 770 points