Webdesignérův průvodce po HTML5 – taháme data od návštěvníka

Na většině webových stránek budeme po návštěvníkovi chtít, aby nám poskytl nějaké informace. Ať už je to poštovní adresa při objednávce u e-shopu nebo komentář na webu. Formuláře tu s námi jsou již dlouho a skoro stejně dlouho si webdesigneři přáli, aby toho uměly více. Naštěstí pomohl JavaScript a většinu chybějících věcí jsme si nějak dopsali. Podívejme se, jak HTML5 usnadňuje tvorbu formulářů bez potřeby JavaScriptu.

Seriál: Webdesignérův průvodce po HTML5 (21 dílů)

  1. Webdesignérův průvodce po HTML5 – díl nultý 25.5.2010
  2. Webdesignérův průvodce po HTML5 – nová sémantika 1.6.2010
  3. Webdesignérův průvodce po HTML5 – nová sémantika II 8.6.2010
  4. Webdesignérův průvodce po HTML5 – pohyblivé obrázky 15.6.2010
  5. Webdesignérův průvodce po HTML5 – používáme pohyblivé obrázky 22.6.2010
  6. Webdesignérův průvodce po HTML5 – taháme data od návštěvníka 29.6.2010
  7. HTML5 Audio: rádio ve vašich stránkách 13.7.2010
  8. Webdesignérův průvodce po HTML5: Microdata 20.7.2010
  9. AppCache: webové aplikace i bez připojení 27.7.2010
  10. Webdesignérův průvodce po HTML5: WebStorage 3.8.2010
  11. Webdesignérův průvodce po HTML5: Multithreading s WebWorkers 10.8.2010
  12. Webdesignérův průvodce po HTML5: Databáze v prohlížečích 17.8.2010
  13. Webdesignérův průvodce po HTML5: Shrnutí a rozhrnutí 24.8.2010
  14. HTML5: ukládáme si data k elementům 6.12.2010
  15. Webdesignérův průvodce po HTML5: Táhni a srůstej 5.1.2011
  16. HTML5: První krůčky s FileSystem API 15.2.2011
  17. Mobilizujeme web v HTML5 4.4.2011
  18. Single Page Apps a řešení problémů s historií 1.6.2011
  19. Page Visibility API: Kouká na mě vůbec někdo? 10.8.2011
  20. Práce se soubory v prohlížeči, díl 1 15.8.2011
  21. Práce se soubory v prohlížeči, díl 2 5.9.2011

HTML5 přidává starým známým inputům několik nových atributů a také několik nových typů. Skvělé na nich je několik věcí:

  1. Pro mnoho věcí odpadá nutnost používat JavaScript.
  2. Používat je můžete začít ihned. Prohlížeče, které je neznají, automaticky degradují (na klasický input type=„text“).
  3. Některé z nich upřesňují, co má daný input obsahovat. Umožňují tak lepší (či automatickou) validaci zadaných dat, uzpůsobení virtuální klávesnice mobilu či cokoli, co si tvůrce prohlížeče usmyslí.

Představme si, co HTML5 do formulářů přináší.

Nové atributy

Začněme atributy, které HTML5 nově zavádí, a které příjemně zjednodušují každodenní práci. Projdeme jen ty nejzajímavější, případní zájemci o další se mohou podívat na kompletní přehled.

autocomplete = „on“ nebo „off“

Jistě všichni víte, že prohlížeče některé formuláře předvyplňují za nás. Atribut „autocomplete“ jim říká, zda to mají dělat či nemají.

autofocus (boolean atribut)

Stránky zaměřené primárně na vyhledávání (např. Google či Seznam) rády automaticky po načtení dávají focus do vyhledávacího pole. Tento atribut je tedy přesně pro ně – po načtení stránky přesune focus na ten element, který obsahuje atribut autofocus.

Dávejte si ale pozor, abyste tento atribut nepoužívali častěji, než je skutečně potřeba. To, že se focus rovnou přesune na primární akci, nemusí být všemi uživateli oceněno. (Např. mně to zruší možnost zmáčknout backspace a vrátit se na předchozí stránku, za což tvůrci stránek vždy patřičně v duchu vynadám. – Pozn. aut.)

Podpora: Safari 4+, Chrome 3.0+, Opera 10.0+

placeholder = „string“

Znáte takový ten šedý text v inputu, který slouží jako nápověda a zmizí, když na políčko kliknete? Dříve jsme to složitě vymýšleli přes JavaScript, nyní HTML5 zavádí atribut placeholder, který dělá přesně toto.

Podpora: Firefox 3.7+, Safari 4.0+, Chrome 4.0+, Opera 10.0+

Nové typy vstupních prvků

Po mnoho let jsme si pro většinu věcí vystačili s obyčejným <input
type="text">
. Pomocí JavaScriptu jsme mu přidávali kalendář, zajišťovali, aby se do něj daly psát pouze čísla atd. HTML5 většinu těchto potřeb řeší novými hodnotami atributu type. Pojďme se na ně podívat.

Jak jsme již zmiňovali výše, pokud prohlížeč nezná novou hodnotu, jednoduše vygeneruje input jako by měl type="text" (a to skutečně udělá každý prohlížeč na téhle planetě). Žádné podivné nekonzistentní chování. Nové input typy můžete tedy začít používat už dnes.

Chcete znát nějaké důvody, proč to dělat? Je to jednoduché – pokud prohlížeč ví, co bude uživatel do inputu zadávat, může mu s tím významně pomoci. Dovedu si představit, že například při zadávání e-mailu se prohlížeč podívá do adresáře a uživateli bude napovídat (a vy sami si jistě dokážete představit spoustu skvělých věcí). Ale to je hudba budoucnosti.

Dnes mají nové atributy svůj velký význam pro uživatele touch zařízení (např. mobily s iOS či Androidem). Vzhledem k tomu, že tyto zařízení mají virtuální klávesnici, mohou ji upravovat dle toho, co má uživatel zrovna zadávat. Ještě jednou to zopakuji – zařízení vám rovnou nabídne nejlepší možnost toho, jak zadat, co po vás tvůrce webu chce. (A to je prostě paráda. – pozn.aut.)

Pro představu – například na iPhone to vypadá takto:


Obrázek převzat od Jonathana Snooka.

Výběr data

Pamatujete si na JS kalendáře, které jsme všichni programovali? HTML5 je přináší přímo do prohlížeče. Zavádí hned několik nových hodnot „type“ pro výběr data a času, a většina z nich používá právě vyskakovací kalendář.

  • type=„date“
  • type=„month“
  • type=„week“
  • type=„time“
  • type=„datetime“
  • type=„datetime-local“

Podpora je zatím jen v Opeře (9.0+) a v Safari 5. Opera zobrazuje kalendář (viz. obrázek), Safari zatím jen šipky, pomocí kterých můžete listovat dny. (A ještě to není úplně odladěné. – Pozn. aut.)

type=„number“

Další věc, se kterou prohlížeč uživateli pomůže, je číslo. Desktopové prohlížeče obvykle zobrazí šipku nahoru a dolů, pomocí kterých můžeme zvyšovat/snižovat zadané číslo. Touch zařízení přepnou klávesnici do módu pro zadávání čísel.

Také můžeme pomocí atributů „min“ a „max“ specifikovat minimální, respektive maximální možnou hodnotu zadaného čísla. Pomocí atributu „step“ pak to, o kolik se změní hodnota při kliknutí na šipku. A „value“ pochopitelně uvádí výchozí hodnotu.

type=„range“

Na webu se v poslední době také rozmohly slidery. Jistě je znáte:

Slouží i pro zadávání číselné hodnoty a dají se nastavovat se stejnými atributy jako „number“. Opera je má již hezky implementované, Safari a Chrome sice zobrazí slider, ale implementace ještě není úplně hotová. Ani iPhone nemá „range“ implementován a zobrazuje jen klasický textový input.

type=„email“

Typ „email“ je právě jedním z těch, kde tvůrci prohlížečů mohou vymyslet úžasné věci. Zatím např. Opera sama validuje, zda zadaná hodnota je email. iPhone zase zapne speciální klávesnici pro zadávání emailové adresy. A jsem si jist, že časem uvidíme další a propracovanější použití.

type=„url“

S „url“ je to stejné jako s e-mailem. iPhone zobrazí speciální klávesnici, většina desktopových prohlížečů zatím neudělá nic.

type=„tel“

A do třetice tu máme „tel“. Jistě nikoho nepřekvapí, že slouží k zadávání telefonního čísla a většinou se zobrazuje jako standardní textový input.

type=„search“

Máte na stránkách hledání? A chtěli byste, aby hledání na stránkách vypadalo a pracovalo stejně, jako hledání všude jinde v systému? (Uživatelé Windows a Linuxu na mě teď budou koukat podivně. Vězte ale, že Mac OS X má určité zásady pro uživatelské rozhraní a např. vyhledávací pole tak ve všech rozumných aplikacích vypadá prakticky stejně. – pozn.aut.) Safari a Chrome při použití typu „search“ zobrazí toto hledání i na vašich webových stránkách.

type=„color“

Chcete nechat uživatele vybrat barvu? Konečně to půjde udělat rozumně! Prohlížeče podporující „color“ by měly zobrazit klasické barevné kolo pro výběr barvy. Zatím to však vypadá, že podpora v prohlížečích není. (Opera i Safari oficiálně mají typ „color“ podporovat, ale dle mých testů dialog pro výběr barvy prostě nezobrazí. – Pozn. aut.)

Závěrem

Formuláře 2.0, jak se formulářům v HTML5 taky někdy říká, přináší mnoho skvělých vylepšení, které nám (a hlavně návštěvníkům našich stránek) budou usnadňovat život. Zatím jejich implementace má smysl pouze pro omezenou skupinu lidí, ale pro ně je to velmi příjemné vylepšení. S novými verzemi prohlížečů si větší pohodlí při vyplňování formulářů bude moci užívat stále širší skupina lidí.

Jedna věc ale některé určitě bude trápit. HTML5 formuláře mají u některých typů zabudovanou automatickou validaci a zobrazují chybové hlášky, když validace selže. Zatím je vzhled i text těchto hlášek zcela na prohlížeči, většina webdesignérů by však uvítala, kdyby je mohla upravit podle svých potřeb. Uvidíme, co v tomto směru přinese budoucnost.

Pokud se chcete podívat, jak váš prohlížeč podporuje různé věci z formulářů, doporučuji test od Bruce Lawsona či od Mike Taylra.

A jako obvykle vysvětlení formulářů najdete i na Dive Into HTML5 od Marka Pilgrima.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 8

Přehled komentářů

dejaVu Validace prohlizecem
BS-Harou Opera
BS-Harou pokračování
Jan Sládek Re: pokračování
BS-Harou Re: pokračování
anonym Re: pokračování
PeterKahoun Doplnění k input type=color
v6ak Kontakty
Zdroj: https://www.zdrojak.cz/?p=3267