Všimli jste si, že řada webů dnes používá v hledacích polích malou nápovědu? Jedná se o text, který se zobrazuje, když je textové pole prázdné. Jakmile do pole umístíte kurzor, abyste začali psát, nápověda zmizí. Typicky se jedná o text "Zadejte hledaný výraz", "Váš e-mail", "www.example.cz", který jednak uživateli s psaním pomůže a také upoutá pohled uživatele k formuláři.
V poněkud sofistikovanějším provedení takové řešení můžete vidět vpravo nahoře na www.weblogy.cz (tam je kromě textu zobrazeno i logo Googlu). Prázdné textové pole je nevyužitá plocha, proč ji nevyužít (v případě Googlu dokonce k propagaci značky).
K realizaci takové nápovědy je ovšem nutný JavaScript. Podle moudrého pravidla úkoly, které se dělají často, by se měly dát dělat jednoduše textovým formulářovým prvkům nově přibude atribut placeholder, který výše uvedenou funkcionalitu zastane. Použití je snadné:
<input type="email" placeholder="jan@example.cz">
Atribut placeholder dostane nejen input s type="text", ale i nově zavedené značky z WebForms2, např. type="email", type="url" apod.
Specifikace říká, že placeholder má obsahovat krátkou nápovědu sloužící uživateli k vyplnění pole. K delší nápovědě může být použit např. atribut title. Prohlížeče text atributu placeholder zobrazí pouze v případě, kdy je formulářové pole prázdné a nemá focus.
Více najdete v příslušném diffu specifikace (musíte odscrollovat až téměř nakonec).
Pondělí, 17. listopad 2008
Přihlásit se k odběru:
Komentáře k příspěvku (Atom)
4 komentářů:
Opravte si nadpis článku.
Už to vidím, děkuji.
Jen doplním, že uvedený atribut pochází od Safari.
http://www.beyondstandards.com/archives/input-placeholders/
Výborně:
* Nedávno jsem někde četl něco o přístupnosti nevidomým a tam bylo takovéto použití pole kritizováno. Toto tedy zřejmě bude řešením.
* input type="email" apod. jsou vhodné např. pro mobily, které můžou umožnit vyhledání v kontaktech.
Škoda, že tu není type="jid"...
Přidat komentář
Děkuji vám, že v diskusích vystupujete slušně. A nezapomeňte se prosím podepsat.