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. listopadu 2008
Přihlásit se k odběru:
Komentáře k příspěvku (Atom)
Opravte si nadpis článku.
OdpovědětVymazatUž to vidím, děkuji.
OdpovědětVymazatJen doplním, že uvedený atribut pochází od Safari.
OdpovědětVymazathttp://www.beyondstandards.com/archives/input-placeholders/
Výborně:
OdpovědětVymazat* 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"...