[whatwg] Placeholder option for text input boxes
whatwg at phroggy.com
Tue Sep 30 11:46:31 PDT 2008
On Sep 30, 2008, at 10:54 AM, Tab Atkins Jr. wrote:
> 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.
Hey, I never said this was an example of good design - it's just an
example of using labels for something that shouldn't be rendered as a
placeholder, while also using placeholders.
> 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).
Hopefully the site will designed well enough that the form is usable
without the placeholder text or tooltips. For example, there could
be instructions outside of the form that explain what is expected,
with the placeholder serving as a subtle reminder to improve usability.
As for accessibility, the goal is to mark it semantically so user
agents have the opportunity to render it however is appropriate for
particular implementation. Safari is (AFAIK) the only user agent
that currently implements placeholder; there's no reason to assume
non-graphical user agents won't implement it in the same timeframe
that other graphical user agents do.
> 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.).
Legend is supposed to label a fieldset, not an individual field.
<input name="eyes" id="eyes" placeholder="Color" title="Enter
the color of your eyes"><br>
<input name="nose" id="nose" placeholder="Shape" title="Describe
the shape of your nose">
<label for="dob">Date of Birth:</label>
<input name="dob" id="dob" type="date" title="Enter the date you
<label for="birthplace">Place of Birth:</label>
<input name="birthplace" id="birthplace" placeholder="City,
State" title="Enter the city and state where you were born">
> 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
Of course! If I wanted both hair color and hair length, it would be
inappropriate to label both of them "Hair", and if I labeled them
"Hair Color" and "Hair Length", then I wouldn't use "Color" as a
placeholder (although I might use "Inches").
whatwg at phroggy.com
-------------- next part --------------
An HTML attachment was scrubbed...
More information about the whatwg