Using the label tag with form elements

[cyberRobot]

Does it matter if a form element appears inside of the label tag? For example:

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

vs

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

To me the first one makes more sense because the input field itself is not part of the label. I've seen it both ways. Is there a reason for doing it one way over the other?

Thanks

[Webnauts]

The first issue is the right one. Correct code syntax.

[cyberRobot]

Originally Posted by Webnauts

The first issue is the right one. Correct code syntax.

Then why does the W3C use the second example?
http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels

They also use the first example:
http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-grouping

Note: The W3C validator doesn't complain about either of the examples.

[Webnauts]

You send me links where there is a description about that. Did you read there and not understood?

Here some on-topic resources for further reading and learning:

http://www.seotoolbox.com/html-issues/forms.html
http://www.yourhtmlsource.com/forms/...ssibility.html
http://www.htmlhelp.com/reference/ht...rms/label.html
http://www.webaim.org/techniques/forms/
http://www.netmechanic.com/news/vol5...ility_no19.htm
http://www.evolt.org/article/Form_La...823/index.html

If you still have questions please let me know.

[cyberRobot]

Originally Posted by Webnauts

You send me links where there is a description about that. Did you read there and not understood?

According to the W3C, both methods are valid. (See links from previous post) The W3C validator (http://validator.w3.org/) doesn't seem to mind either way.

I was wondering if there is a difference between the two code examples I gave earlier?

[cyberRobot]

Never mind I figured it out. According to the W3C, the following code:

<LABEL>
   First Name
   <INPUT type="text" name="firstname">
</LABEL>

is used to implicitly associate a label with an input field. (without using the for or id attributes)

Here is the page I got the info from:
http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1

Thanks

[Webnauts]

So far I can remember, the above code is not valid in XHTML.

[cyberRobot]

Originally Posted by Webnauts

So far I can remember, the above code is not valid in XHTML.

The following code from W3C that I mentioned in my last post:

<LABEL> 
   First Name 
   <INPUT type="text" name="firstname"> 
</LABEL>

is not XHTML complient, because I got it from the HTML 4.01 Specifications page.

The other two examples I gave in my first post are valid XHTML. Note: I validate using XHTML Transitional, so I have no idea if it's valid for XHTML Strict.

[ScottNorton]

Originally Posted by cyberRobot

According to the W3C, the following code:

<LABEL>
   First Name
   <INPUT type="text" name="firstname">
</LABEL>

is used to implicitly associate a label with an input field. (without using the for or id attributes)

The US Government's Access Board states that implicit labels should be avoided, because they are "not reliably supported by many screen readers and, in particular, do not work well if explicit labels are simultaneously used anywhere on the same web page."

http://www.access-board.gov/sec508/g...194.22.htm#(n)

[Webnauts]

Very great and useful information Scott!
Thanks! :)

[Webnauts]

Scott Norton, as confusing as that document is worded, it means that if you use explicit labels, use them consistently to label all form elements and avoid having implicit ones (either by design, or by mistake). The best way to avoid problems is to have explicit labels and put them where a screenreader may be expecting implicit ones (e.g. have labels for radio buttons and checkboxes after the box, for text inputs etc have them right in front/above).