Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

validating HTML: The for attribute of the label element must refer to a form control

I don't know why I keep getting this error while checking my page at http://validator.w3.org/check The error was:

Line 235, Column 84: The for attribute of the label element must refer to a form control.
… <label for="name" style="line-height:24px;">Your Name</label><br>&nbsp;&nbsp;

here is my actual code

<div>&nbsp;&nbsp;
  <label for="name" style="line-height:24px;">Your Name</label><br>&nbsp;&nbsp;
  <input class="css_form_namefield TooltipIstok " type="text" name="name" value="" style="width: 554px;" maxlength="50" >
</div>
like image 327
SOoCreative Avatar asked Sep 22 '13 15:09

SOoCreative


People also ask

What is non hidden form control?

<input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password">

Why should the value of the for attribute of label tag be same as the ID of the corresponding?

Explanation: The for property is used to associate a label with a certain form control. The value of the for attribute must match the value of the form control's id attribute. The for property is used to associate a label with a certain form of control.

What is a form label?

A <label> is used to create a caption for a form control. The <label> can be associated with a form control either implicitly by placing the control element inside the label element, or explicitly by using the for attribute.

How to give label to button in HTML?

Labeling buttons When using the <input> element to create buttons, the label is set in the value attribute of the element. If the image button ( <input type="image"> ) is used, the label is set in the alt attribute, for example: <input type="image" src="searchbutton.


2 Answers

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

ie

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

This page may be helpful for more information. http://www.w3.org/TR/WCAG-TECHS/H44.html

like image 176
Shane A. Darr Avatar answered Oct 26 '22 10:10

Shane A. Darr


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

From the error message, it seems that you are validating against HTML5, so the rule that applies is that the for attribute must refer to a button, input (other than with type=hidden), keygen, meter, output, progress, select, or textarea element. My guess is that you just forgot the id attribute, incorrectly assuming that the name attribute could do its job.

like image 28
Jukka K. Korpela Avatar answered Oct 26 '22 08:10

Jukka K. Korpela