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

Zdroják » Webdesign » Formuláře v HTML5 a nové inputy

Formuláře v HTML5 a nové inputy

Vyplňování formulářů je nedílnou součástí našich digitálních životů, ať už jde o hledání na webu, přihlašování na e-mail nebo vyplňování čtyřstránkové registrace na e-shop. V předchozím článku jsme se podívali na nové atributy a lehce zabrousili do historie HTML5 formulářů. V tomto článku se podíváme na nové inputy.

Tento text je zkráceným překladem článku HTML5 forms input types, jehož autorem je Richard Clark a je zde zveřejněn pod licencí CC BY-NC 2.0. Zároveň se jedná o úryvek z knihy Beginning HTML5 and CSS3 — The Web Evolved.

Nové inputy

HTML5 přináší 13 nových formulářových políček, která krátí čas na vývoj a zlepšují uživatelský prožitek. Postupně si na každé z nich posvítíme a řekneme si, proč byste je měli používat. Do světla reflektorů přichází:

search

Když mluvíme o vyhledávání, nemluvíme jen o Google, Bing nebo Yahoo, ale o vyhledávacím políčku na e-shopu, na Wikipedii nebo i na vašem blogu. Pravděpodobně jde o nejčastější úkon, který na webu denně děláme, ale kód nemáme úplně sémanticky správně, že? Všichni píšeme něco takového:

<input type="text" name="search">

Inu, co kdybychom to psali takto…

<input type="search" name="search">

S HTML5 můžeme. O moc lepší. Desktopové prohlížeče type="search" vykreslí podobně jako textové políčko, ale jakmile začnete psát, zobrazí se vpravo malý křížek, který kliknutím vymaže obsah (jako zabudované vyhledávání v Safari).

Obrázek vyhledávacího políčka v Safari pro Windows s hodnotou html4.01 a 'x' vpravo

Obrázek 1: type="search" v Safari pro Windows

Na mobilu je situace o něco zajímavější. Například na klávesnici v iPhone (obrázek 2) je místo standardního tlačítka „Go“ napsáno „Search“. Jde sice jen o drobnost, které si většina uživatelů skoro nevšimne, ale ti, kteří ano, si dovolí lehký úsměv.

Obrázek iPhone se softwarovou klávesnicí a tlačítkem 'Search'

Obrázek 2: type="search" v iPhone

Je to podobné jako s novými atributy – prohlížeče, pokud je neznají, degrade gracefully (v tomto případě je ignorují). Stejně to funguje pro nové inputy, o kterých se zde bavíme. Pokud prohlížeč políčko type="search" nezná, zobrazí type="text". Znamená to tedy, že nic neztratíte, vlastně jde o progressive enhancement a některým uživatelům zlepšujete prožitek. Vyplňování formulářů není moc zábavná činnost, takže cokoliv, co alespoň trochu usnadní práci, se počítá.

email

email políčko vypadá stejně jako standardní textové políčko a povoluje zadávat více adres najednou. Když k tomu přidáme ještě atribut required, prohlížeč může celkem snadno kontrolovat, zda byla e-mailová adresa zadána správně. Samozřejmě jde jen o základní kontrolu, jestli byl uveden například zavináč, tečka nebo nechtěné mezery. Opera 9.5+, Firefox 4+, Internet Explorer 10 a Chrome 5+ to podporují a umí případně zobrazit chybovou hlášku (vizte obrázek 3). Políčko lze stylovat pseudotřídami :valid, :invalid a :required (pokud má atribut required).

<input type="email" name="email" required>

Obrázek email políčka v Opeře s hodnotou 'gordo' a chybovou hláškou 'Please enter a valid email address'.

Obrázek 3: Chybová hláška v email políčku v Opeře

Více o stylování formulářů přes pseudotřídy naleznete ve článku na A List Apart od Ryana Seddona.

Ve specifikaci je uvedeno, že lze zadat i více adres najednou, takže na input type="email" lze použít atribut multiple.

Pěkné, že? Opět hezká ukázka, jak lze s HTML5 odseknout JavaScript, který bychom jinak psali ručně.

Je tu ovšem jedno malé ale. V době psaní tohoto článku (28. 2. 2013) je známo, že input type="email" má problém s vícebajtovými znaky v názvu domény, takže například toto:

<input type="email" name="email" value="gordo@日本.jp">

zobrazí chybové hlášení v prohlížeči Firefox, Safari a Chrome (Opera problém nemá). Kyle Barrow našel dočasné řešení přes input type="text" a atribut pattern:

<input type="text" name="email" value="gordo@日本.jp" pattern="[^ @]*@[^ @]*">

Alternativně lze použít input type="email" s atributem formnovalidate na tlačítku pro odeslání, takže hodnota nebude validována, což může (ale nemusí) být náš záměr.

<form action="process.php">
  <label for="email">Email:</label>
  <input type="email" name="email" value="gordo@日本.jp">
  <input type="submit" formnovalidate value="Submit">
  …

Nebo můžete použít atribut novalidate na elementu form:

<form action="process.php" novalidate>
  <label for="email">Email:</label>
  <input type="email" name="email" value="gordo@日本.jp">
  <input type="submit" value="Submit">
  …

Když pomineme tento problém, pamatujete si, jak jsme mluvili o dvou výhodách HTML5 inputů? Méně času na vývoj a lepší prožitek? Pojďme se ještě jednou v obrázku 4 podívat na iPhone.

Obrázek iPhone se softwarovou klávesnicí a tlačítkem 'Go'

Obrázek 4: Input type="email" donutí iPhone zobrazit jinou klávesnici

Všimli jste si toho? Ne? Podívejte se klávesnici znovu. Ano, je jiná, jsou tam speciální klávesy pro zavináč a tečku, aby šlo psát efektivněji. Jak jsme říkali u políčka type="search", input type="email" můžete použít hned, a pokud mu prohlížeč nerozumí, zobrazí input type="text".

url

Input type="url" slouží, světe div se, pro URL adresy, a s atributem multiple lze zadat více adres najednou. Podobně jako u políčka type="email", prohlížeč provede před odesláním jednoduchou validaci a případně zobrazí chybovou hlášku. Může hlídat lomítka, tečky, mezery a třeba i platnost domény prvního řádu (.cz, .com, .co.uk…).

<input type="url" name="url" required>

Poznámka: Momentálně probíhá diskuze, jestli by se mělo vždy zadat http://, nebo jestli by to měl prohlížeč prependnout před odesláním formuláře. Více informací je ve specifikaci HTML5.

Na obrázku 5 vidíme iPhone s upravenou klávesnicí pro zjednodušené zadávání URL adres: mezerník nahradila tečka, lomítko a klávesa .com (další domény jako .org, .net se zobrazí, když tlačítko .com chvíli podržíme).

Obrázek iPhone se softwarovou klávesnicí a tlačítkem 'Go' a focusem na URL políčku

Obrázek 5: type="url" donutí iPhone zobrazit klávesnici pro zadávání URL

tel

Formát telefonních čísel se v každé zemi liší, takže tel na rozdíl od email a url nevynucuje žádnou speciální syntaxi, možná kromě omezení znaků na čísla a symbol +. Specifický formát lze kontrolovat JavaScriptem nebo atributem pattern.

<input type="tel" name="tel" id="tel" required>

Na obrázku 6 je pro změnu iPhone, který šel zase o kousek dál a zobrazil standardní numerickou klávesnici pro volání. Některé zařízení s Androidem (např. HTC, který je vidět vpravo na obrázku 6) také zobrazí klávesnici pro volání. Pěkná velká tlačítka, aby šlo vyplňování formuláře rychleji.

Obrázek iPhone a Androidu s numerickou klávesnicí a políčkem tel

Obrázek 6: type="tel" a numerická klávesnice na iPhone a Android zařízení. (Obrázek Androidu poskytl Stuart Langridge).

number

number slouží pro číselné hodnoty. Opera (která většinu těchto polí implementovala jako první), Safari a Chrome zobrazují políčko se šipkami (vizte obrázek 7), kterými lze hodnotu měnit (ale jde to i ručně). Firefox zobrazuje jen standardní textové políčko a v IE 10 nečíselné hodnoty po ztrátě focusu prostě bez varování zmizí.

Obrázek políčka typu number v Opeře se šipkami

Obrázek 7: type="number" v Opeře

Pomocí atributů min, max a step můžeme nastavit minimum, maximum a rozdíl mezi jednotlivými kroky; výchozí hodnotu lze nastavit již známým atributem value.

<input type="number" min="5" max="18" step="0.5" value="9" name="shoe-size">

V tomto příkladu min reprezentuje minimální hodnotu, a max hodnotu maximální, kterou políčko akceptuje. Když dosáhneme maxima nebo minima, příslušná šipka zešedne a nelze s ní dále interagovat. step je přírůstek, kterým upravujeme hodnotu nahoru nebo dolů a výchozí hodnota je 1. Znamená to, že můžeme pracovat se zápornými čísly a postupovat po 0,5 nebo klidně 5. value atribut už znáte z dřívějších verzí HTML. Všechny tyto atributy jsou nepovinné a pokud nejsou použity, mají nějakou výchozí hodnotu.

Na rozdíl od Opery, iPhone a některé Android zařízení (obrázek 8) zobrazí standardní textové políčko a numerickou klávesnici pro snadnější zadávání čísel.

Obrázek políčka typu number na iPhone a Android HTC Desire a numerickou klávesnicí

Obrázek 8: type="number" na iPhone a Android HTC Desire (opět od Stuart Langridge)

Bohužel iPhone zobrazí místo té numerické klávesnici normální, takže abychom ho donutili přepnout, Chris Coyier našel malý trik: místo type="number" použijte type="text" a a nastavte pattern atribut tak, aby akceptoval jen čísla (příklad níže). Není to ideální, ale pokud by se vám to hodilo, Chris natočil krátké video s iPhonem v akci.

<input type="text" pattern="[0-9]*" name="shoe-size">

Chrisovo řešení může s příchodem nového atributu inputmode brzo zastarat. Tento čerstvě přidaný atribut by měl určit, který mechanismus zadávání je pro uživatele nejlepší. Jakmile bude implementován, budete si moci zvolit mezi módy: čísla, latinka, e-mail nebo kana.

range

Input type="range" je podobný number, ale specifičtější. Reprezentuje číselnou hodnotu v dané škále. Proč to, říkáte? Inu proto, že když používáme range, nejde nám o přesnou hodnotu, a prohlížeče nabízejí jednodušší ovládání než pro number. V prohlížečích Opera, Safari, Internet Explorer 10 a Chrome se type="range" zobrazuje jako slider (obrázek 9). Když se hýbe s jezdcem v IE 10, zobrazuje se i aktuální hodnota. Když se v CSS nastaví height větší než width, Opera vykreslí slider vertikálně.

Poznámka: Remy Sharp vytvořil pro prohlížeče, které type="range" neznají, javascriptový polyfill na zalepení děr. Více informací je na jeho blogu.

Následující kód ukazuje, jak bychom nakódovali naši schopnost létání na škále od 1 do 100 použitím atributů min a max (obrázek 9). Můžeme také nastavit výchozí hodnotu pomocí atributu value.

<input id="skill" type="range" min="1" max="100" value="0">

Obrázek políčka typu range v Chrome

Obrázek 9: type="range" v Chrome

Data a časy

Pokud jste někdy rezervovali letenky online, určitě jste narazili na date picker, widget pro snadnější zadávání data. Případně jste nějaký ten date picker implementovali na svém webu. Většinou jde o javascriptovou knihovnu jako jQuery, Dojo nebo YUI. Je škoda, že kvůli jednoduchému widgetu musíme načíst celou knihovnu a několik dalších pluginů. Díky HTML5 máme tuto funkčnost zabudovanou přímo v prohlížeči. A nejen to, několika inputy můžeme jednoduše vybrat týden, měsíc, čas, datum a čas, popř. datum a čas a zónu.

<input id="dob" name="dob" type="date">

Můžete jít ještě o krok dál a omezit výběr atributem min a max.

<input id="startdate" name="startdate" min="2012-01-01" max="2013-01-01" type="date">

Podobně jako s ostatními formulářovými prvky, Opera je v čele (podpora v ostatních prohlížečích je různá). Pojďme se podívat, jak prohlížeče tyto pole zobrazují.

Poznámka: Možná jste si všimli, že HTML5 nemá input type="year". Důvod je ten, že bylo málo use case případů. Všechny šly vyřešit políčkem type="number".

date

Obrázek 10 ukazuje políčko pro datum type="date" v Opeře 10.5.

Obrázek políčka typu date v Ope5e 10.5 s kalendářem

Obrázek 10: type="date" v Opeře 10.5

Date picker není jen pro desktopy, některé Blackberry zařízení a Chrome pro Android zobrazují svůj vlastní date picker (obrázek 11).

Obrázek políčka typu date v Blackberry s roletou pro den, měsíc a rok

Obrázek 11: type="date" v Blackberry (poskytl Terence Eden)

month

Na obrázku 12 vidíme políčko pro měsíc type="month", který lze použít třeba na datum vypršení kreditní karty.

<input id="expiry" name="expiry" type="month" required>

Obrázek políčka typu month v Opeře 10.5 s kalendářem

Obrázek 12: type="month" v Opeře 10.5

week

Podobně je to s políčkem pro týden type="week". Všimněte si, jak Opera používá stejný kalendář a zvýrazní jen řádek.

<input id="vacation" name="vacation" type="week">

Obrázek políčka typu week v Opeře 10.5 s kalendářem

Obrázek 13: type="week" v Opeře 10.5

time

Na obrázku 14 je vidět políčko pro čas type="time", který vypadá podobně jako type="number" se šipkami.

<input id="exit-time" name="exit-time" type="time">

Obrázek políčka typu time v Opeře 10.5

Obrázek 13: type="time" v Opeře 10.5

datetime

Pokud chceme specifikovat přesný datum a čas, užijeme type="datetime".

<input id="entry-day-time" name="entry-day-time" type="datetime">

Obrázek políčka typu datetime v Opeře 10.5 s kalendářem

Obrázek 15: type="datetime" v Opeře 10.5

datetime-local

A nakonec tu máme políčko pro lokální datum a čas bez zóny type="datetime-local".

<input id="arrival-time" name="arrival-time " type="datetime-local">

Obrázek políčka typu datetime-local v Opeře 10.5 s kalendářem

Obrázek 16: type="datetime-local" v Opeře 10.5

Poznámka

S těmito políčky se pojí dva problémy. Za prvé, v žádném prohlížeči s date pickerem momentálně nelze vyplnit hodnotu políčka ručně (ale je přístupné pro klávesnici). Například někdo, kdo často vyplňuje stejný formulář, vyplní pole rychleji ručně, než kdyby se tam měl proklikat myší. Za druhé, date picker nelze stylovat. Můžeme si myslet, že je to dobře, že si uživatel rychleji zvykne (jelikož vypadá v daném prohlížeči vždy stejně), ale firemní weby často vyžadují jednotný styl. Safari 5 a Chrome 5 tyto inputy podporují, ale nejsou moc přívětivé. Data musejí být ve formátu YYYY-MM-DD a časy v YYYYMM-DDT00:00Z, což není vůbec přívětivé.

Podobně jako to je s ostatními novými inputy, pokud je prohlížeč nepodporuje, zobrazí input type="text", na který lze napojit javascriptovou variantu.

color

Input type="color" umožňuje vybrat barvu a vrátit ji jako hodnotu hex. Čeká se, že uživatelé budou moci napsat hodnotu buď ručně, nebo ji vybrat přes color picker, který může být systémový nebo zabudovaný v prohlížeči. Opera 11 má právě takový jednoduchý color picker s tlačítkem Other, který otevře ten systémový (obrázek 17).

<input id="color" name="color" type="color">

Obrázek políčka typu color v Opeře v Opeře, vlevo z prohlížeče, vpravo systémový

Obrázek 17: type="color" v Opeře, vlevo z prohlížeče, vpravo systémový

Color picker v zařízení Blackberry:

Obrázek políčka typu color v Blackberry

Obrázek 18: type="color" v Blackberry (poskytl Terence Eden)

Shrnutí

Pokud použijeme nové typy inputů dnes, můžeme zlepšit uživatelský prožitek, připravit se na budoucnost a ušetřit si trochu práce jako vývojáři. Samozřejmě starší prohlížeče nemůžeme úplně ignorovat a v kapitole 6 naší knihy Beginning HTML5 and CSS3 si ukážeme, jak nové typy detekovat JavaScriptem.

Testovací formulář s některými inputy a atributy si můžete vyzkoušet na stránce HTML5 forms demo page.

Pokud vás zajímá, která vlastnost je v kterém prohlížeči podporována, doporučujeme stránky can I use …, FindMeByIp nebo Wufoo’s HTML5 forms research.

Komentáře

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

Validace e-mailové adresy přes html5 dokáže pěkně naštvat třeba u přihlašování do webového rozhraní Gmailu. Na Blackberry to držkuje, dokud nezadám do uživatele i @gmail.com

petr

Divný, že nejde zadat formát času i HH:MM:SS, a SS to uřízne… Tudíž v mnoha případech nepoužitelné.

bauglir

samozřejmě jde, záleží na parametru step, výchozí step je 60 (sekund) a vzhledem k výchozímu k parametru min (0 sekund) od kterého se step počítá obvykle UI nezobrazí sekundy (na co taky), ale pokud zadáte
input type=time step=1
tak to bude fungovat

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.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.