<div dir="ltr"><br><br><div class="gmail_quote">On Tue, Sep 30, 2008 at 1:46 PM, Andy Lyttle <span dir="ltr"><<a href="mailto:whatwg@phroggy.com">whatwg@phroggy.com</a>></span> wrote:<br><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><div class="Ih2E3d"><div>On Sep 30, 2008, at 10:54 AM, Tab Atkins Jr. wrote:</div></div><div class="Ih2E3d"><br><blockquote type="cite"><div dir="ltr">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.).</div>
</blockquote><div><br></div></div><div>Legend is supposed to label a fieldset, not an individual field.</div><div><br></div><div><fieldset></div><div> <legend>Facial Features</legend></div><div><div class="Ih2E3d">
<div style="margin: 0px;"><font style="font-family: Helvetica; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;" size="3" face="Helvetica"> <label for="eyes">Eyes:</label></font></div>
<div style="margin: 0px;"><font style="font-family: Helvetica; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;" size="3" face="Helvetica"> <input name="eyes" id="eyes" placeholder="Color" title="Enter the color of your eyes"><br></font></div>
<div style="margin: 0px; min-height: 14px;"> <label for="nose">Nose:</label></div><div style="margin: 0px;"><font style="font-family: Helvetica; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;" size="3" face="Helvetica"> <input name="nose" id="nose" placeholder="Shape" title="Describe the shape of your nose"></font></div>
</div><div></fieldset></div><div><fieldset></div><div> <legend>Birth Information</legend></div><div><div style="margin: 0px;"><font size="3" face="Helvetica"> <label for="dob">Date of Birth:</label></font></div>
<div style="margin: 0px;"><font size="3" face="Helvetica"> <input name="dob" id="dob" type="date" title="Enter the date you were born"><br></font></div></div><div><div class="Ih2E3d">
<div style="margin: 0px;"><font style="font-family: Helvetica; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;" size="3" face="Helvetica"> <label for="birthplace">Place of Birth:</label></font></div>
<div style="margin: 0px;"><font style="font-family: Helvetica; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;" size="3" face="Helvetica"> <input name="birthplace" id="birthplace" placeholder="City, State" title="Enter the city and state where you were born"></font></div>
</div><div style="margin: 0px;"></fieldset></div></div></div></div></div></blockquote><div><br>Is this (the splitting of necessary descriptive information between label and placeholder text) sufficiently widespread enough to justify designing toward it? In every use of placeholder text *I've* seen in the wild, it was *only* used as a label *replacement*, not an augment. Frex, a forum I frequent has username and password fields shoved away very compactly into an infobar at the top of the screen, and uses placeholder text to indicate what they are for. You've provided cases where it *could* be useful, but in each of these it would be just as useful to the user to have that information in the label itself. It's really just the designer's aesthetic concerns that dictate it must be separated. Obviously this entire discussion is about mere aesthetics ultimately, but if a qualitatively better answer will solve 90% of use cases with greater ease, accessibility, and less coding, we should probably go with it. I'm arguing that a CSS-based packing of the <label> text into the input is just such an answer.<br>
</div></div><br></div>