LABEL Tag Warning

[kennedyrt]

Using Pro version 10.0204 to validate the following code:

<form method="get" class="searchForm" action="http://google.foo.com/">
<input class="searchField" type="text" name="q" value="&nbsp;Search This Site" id="q" size="18" maxlength="180" onfocus="this.value='';" />
<input type="hidden" name="client" value="foo" />
<input type="hidden" name="output" value="xml_no_dtd" />
<input type="hidden" name="proxystylesheet" value="foo" />
<input type="hidden" name="site" value="foo" />
<input id="googlesearch" type="hidden" name="sitesearch" value="mysite.foo.com" />
<input class="searchButton" name="btnG" type="image" src="/escor/_images/searchbutton.gif" align="middle" alt="Search This Site" title="Search This Site" />
</form>

I get the message: The "input" tag has an "id" attribute but it must be used to explicitly associate this control with a "label" element using the "label" element's "for" attribute (for="q"). When electronic forms are designed to be completed online, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues [Section 1194.22 (n)]. Information attached to controls via the "label" element can be very useful to users of talking browsers. Note that "id" and "for" values are case-sensitive. Visit http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels for more information. NOTE: Use the "title" attribute when labels cannot be used.

Yet when I add a label tag as shown below:

<form method="get" class="searchForm" action="http://google.foo.com/">
<label for "q"><input class="searchField" type="text" name="q" value="&nbsp;Search This Site" id="q" size="18" maxlength="180" onfocus="this.value='';" /></label>
<input type="hidden" name="client" value="foo" />
<input type="hidden" name="output" value="xml_no_dtd" />
<input type="hidden" name="proxystylesheet" value="foo" />
<input type="hidden" name="site" value="foo" />
<input id="googlesearch" type="hidden" name="sitesearch" value="mysite.foo.com" />
<input class="searchButton" name="btnG" type="image" src="/escor/_images/searchbutton.gif" align="middle" alt="Search This Site" title="Search This Site" />
</form>

I get the warning: This "label" element contains no text and may be useless. Consider removing this element or placing text in it so that it contains text.

Is my XHTML poorly written or is the warning message spurious in this case?

[Albert Wiersch]

Is my XHTML poorly written or is the warning message spurious in this case?

Hello,

The "label" element should contain text (such as the label text for the control). It looks like you are not using it properly.

Please see:
http://www.htmlvalidator.com/help.php?m=2&h=label
and
http://reference.sitepoint.com/html/label

However, you may not want a text label in your case... if not, then the "title" attribute should be used instead of the "label" element:

Code: Select all

<input title="Text to search this site for" class="searchField" type="text" name="q" value="&nbsp;Search This Site" id="q" size="18" maxlength="180" onfocus="this.value='';" />

I hope this helps.