[whatwg] Placeholder option for text input boxes

[Andy Lyttle]

Hi all!

I would like to see Apple's <input type="search"> adopted as an  
official standard, but there's one particular feature that would be  
easy to adopt without supporting the rest, and that's the  
"placeholder" option.  Currently, lots of sites are implementing  
placeholder text through a combination of creative CSS and JavaScript  
hacking, but each site has to reinvent the wheel, and very often the  
wheel gets reinvented badly (examples below).  Making it a standard  
feature of HTML would eliminate the need for all the extra scripting  
and improve accessibility, and consistent behavior would make a  
better user experience.

The desired behavior is for the placeholder text to appear in the  
field with a gray color when the field is not focused and the value  
is empty.  Of course the meaning of "gray" is up to the browser.  The  
placeholder option was originally intended for search fields, but  
it's useful for other input types as well, and Safari already  
supports it on all text input fields.  The HTML simply looks like:

<input name="zip" placeholder="Zip Code">

Here are a bunch of examples of sites that currently use JavaScript  
and CSS tricks in an attempt to simulate this behavior, to varying  
degrees of success:

These use black placeholder text that disappears on focus but does  
not reappear on blur:
http://www.bestbuy.com/ top left, "Keyword or Item #"
http://www.blockbuster.com/ top right corner, "Movies, Actors,  
Directors"
http://www.cisco.com/ top right corner, "Search"
...and countless others (army.mil, navy.mil, af.mil, weather.com,  
weather.gov, kfc.com, dennys.com, napaonline.com, etc.)

These use gray placeholder text which reappears on blur, but text  
entered by the user is also gray:
http://www.myspace.com/ on the right, "Find Friends on MySpace" box
http://wordpress.com/ top right corner, "Search WordPress.com Blogs"

These use gray placeholder text, but text entered by the user is also  
gray, and the placeholder does not reappear on blur:
http://www.fedex.com/us/ top center, "Search"
http://www.cnet.com/ top center, "Search"
http://www.safeway.com/ top right, "Enter Keyword"

These use black user-entered text and gray placeholder text that  
reappears on blur, but user-entered text turns gray on blur too:
http://www.mapquest.com/ top right corner, "Search the Web"
http://digg.com/ top right corner, "Search Digg..."
http://www.gateway.com/ top right corner, "Search" (gray text is also  
italic)

This uses black user-entered text and gray placeholder text, but the  
placeholder text does not reappear on blur and user-entered text  
disappears on focus:
http://www.lenovo.com/us/en/index.html top right corner

These behave as I would expect, with black user-entered text and gray  
placeholder text that reappears on blur:
http://www.mapquest.com/beta left side, "Find a Business"
http://www.mcafee.com/us/ top right corner, "Search"
http://www.britannica.com/ top center, "Search Site..." (also has a  
cancel button)
http://www.filemaker.com/ top center, "Search FileMaker.com" (also  
has a cancel button)
http://www.apple.com/ top right corner, "Search" (also has a cancel  
button, uses AJAX for live searching)

These use black placeholder text, but otherwise behave as expected:
http://www.adobe.com/ top right corner, "Search Adobe.com..." (uses  
AJAX for live searching)
http://www.nbc.com/ top left corner, "search"
https://www.cia.gov/ top right corner, "Search"
http://us.blizzard.com/support/ top center, "Enter a word, phrase or  
solution ID"

As you can see, that's seven different behaviors, some of which are  
clearly not ideal, and all of which require JavaScript, which takes  
time to implement, test in multiple browsers, and debug.  Supporting  
the placeholder attribute (which is already implemented in one major  
browser) would solve all of these problems.

Comments?

-- 
Andy Lyttle
whatwg at phroggy.com