Přejít k navigační liště

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

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

Články Webdesign

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.

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.

Komentáře

Subscribe
Upozornit na
guest
8 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
dejaVu

Hezky den.
Nechtenou validaci na strane prohlizece by zrejme mel resit atribut formnovalidate.
http://dev.w3.org/html5/markup/spec.html#shared-form.attrs.formnovalidate
dejaVu.

BS-Harou

Opera rozhodně input/color nepodporuje a nikdy nepodporovala. Stejně tak ani nepodporuje Placeholder (a to ani ve verzi 10.60RC1), jak nahoře píšete. Jinak fajn článek a těším se na další =)

BS-Harou

Ještě mě napadá, plánujete na toto téma ještě jeden článek? Protože je tu spousta dalších atributů, které jste vůbec nezmínili =)

BS-Harou

Z hlavy mě napadají třeba atributy: pattern, multiple, list (a s ním související element datalist), required, novalidate (atribut elementu form), formaction, formenctype, formmethod, formnovalidate, formtarget

anonym

Nejen atributy, ale i tagy. Např tag <datalist>.

PeterKahoun

Ad WebKit a implementace input-type-color: GUI ještě ne, validace nějak ano: http://jdem.cz/gn4y9. Color wheel je jen jeden způsob vyjádření barevného prostoru, záleží na UA, jakou formu zvolí. Např. bych se velmi divil, kdyby Safari @ Mac OS X nepoužilo tradiční systémový dialog.

v6ak

Nebyla zde možnost hledání v kontaktech. Běžné to je v J2ME (vyjma Samsungu snad všude), v HTML5 to může dopadnout podobně. Ostatně, Firefox již má experimentální doplněk pro kontakty.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.