[whatwg] Placeholder option for text input boxes

[Tab Atkins Jr.]

On Tue, Sep 30, 2008 at 12:37 PM, Andy Lyttle <whatwg at phroggy.com> wrote:

> On Sep 30, 2008, at 7:00 AM, Tab Atkins Jr. wrote:
>
> 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.
>
>
> Hmm, good call.  Let's see if I can do better:
>
> <label for="hair">Hair:</label>
> <input name="hair" id="hair" placeholder="Color" title="Enter the color of
> your hair"><br>
>
> <label for="eyes">Eyes:</label>
> <input name="eyes" id="eyes" placeholder="Color" title="Enter the color of
> your eyes"><br>
>
> <label for="nose">Nose:</label>
> <input name="nose" id="nose" placeholder="Shape" title="Describe the shape
> of your nose"><br>
>
> <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"><br>
>
> 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.
>

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.

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).

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.).

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.

~TJ
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/whatwg-whatwg.org/attachments/20080930/cedde293/attachment-0001.htm>