<div dir="ltr">On Tue, Sep 30, 2008 at 12:37 PM, Andy Lyttle <span dir="ltr"><<a href="mailto:whatwg@phroggy.com">whatwg@phroggy.com</a>></span> wrote:<br><div class="gmail_quote"><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<div style=""><div class="Ih2E3d">
<div>On Sep 30, 2008, at 7:00 AM, Tab Atkins Jr. wrote:</div><div><br></div><div><blockquote type="cite">Hm.  I have a problem with your example.  "Get local weather forecast" isn't a semantic <label> for the field - it doesn't describe what the field is for.  It describes what the *form* is for, and so should be a <legend> or <hn>.  "City, State" actually describes the use of the <input> itself, and should be the label.<br>
</blockquote><div><font color="#0000dd"><br></font></div></div></div><div>Hmm, good call.  Let's see if I can do better:</div><div><br></div><div><div><label for="hair">Hair:</label></div><div><input name="hair" id="hair" placeholder="Color" title="Enter the color of your hair"><br></div>
<div><br></div></div><div><label for="eyes">Eyes:</label></div><div><input name="eyes" id="eyes" placeholder="Color" title="Enter the color of your eyes"><br></div>
<div><br></div><div><label for="nose">Nose:</label></div><div><input name="nose" id="nose" placeholder="Shape" title="Describe the shape of your nose"><br></div>
<div><br></div><div><label for="birthplace">Place of Birth:</label></div><div><input name="birthplace" id="birthplace" placeholder="City, State" title="Enter the city and state where you were born"><br></div>
<div><br></div><div>This shows how label AND placeholder AND title could be used for three different purposes.  If I were designing the spec from scratch, I might have chosen "tooltip" and "hint" instead of "title" and "placeholder" respectively, but we have to consider existing implementations.</div>
</div></blockquote><div><br>Eh, I'll still complain.  ^_^  While all of your labels *would* be appropriate by themselves, the fact that you have to clarify them means they're not accurate enough for your purposes.<br>
<br>One must also consider the needs of people who are using browsers without the ability to render this placeholder text.  They'll put "long" in hair, "two" in eyes, and "yes" in nose because they can't see the placeholder and are using their keyboard to navigate through your form (and thus won't see the tooltips either).  <br>
</div></div><br>Of course, the aesthetics of splitting the description between the <label> and the placeholder text can't always be denied.  Semantically, though, you're still using your <label>s as headers in this situation, and then providing the actual labels as placeholder text, and it would *still* be best semantically to either mark it up explicitly as such (move "Hair:"/"Nose:"/etc to a <legend> or <hn> and then <label>ing the fields with "Color:", "Shape", etc) or collapse the hierarchy and combine ( "Hair:" becomes "Hair color:", etc.).<br>
<br>Am I being anal and a little contrived about semantics to support my point?  Of course, but that doesn't make my point invalid.  ^_^  After all, what if you wanted hair length as well as color?  You'd be forced to move to one of the two solutions - either promoting "Hair" to a full <legend>/<hn> in the <form> and using "Color:" and "Length" as <label>s or collapsing the label/placeholder dichotomy with "Hair color" and "Hair length" both as <label>s or both as placeholders.<br>
<br>~TJ<br></div>