[whatwg] Placeholder option for text input boxes
whatwg at phroggy.com
Mon Sep 29 17:20:11 PDT 2008
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
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">
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,
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
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
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
As you can see, that's seven different behaviors, some of which are
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.
whatwg at phroggy.com
More information about the whatwg