Formuláře v HTML5 a nové atributy

HTML5 W3C logo

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. Jakožto vývojáři píšeme pořád stejné validace, takže si můžeme alespoň trochu ulehčit práci využitím HTML5, které přišlo s několika novými atributy, políčky a dalšími elementy. V tomto článku se podíváme na nové atributy a v příštím článku na nové elementy.

Tento text je zkráceným překladem článku HTML5 forms introduction and new attributes, 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.

Jak uvidíme, tyto nové prvky nám usnadní život, a přitom poskytnou pěkný uživatelský prožitek. A co je na tom všem nejlepší? Můžeme je začít používat hned teď. Nejprve ale trocha historie HTML5 formulářů.

Historie HTML5 formulářů

Sekce o formulářích v HTML5 byla původně specifikací s názvem Web Forms 2.0, která přidala nové ovládací prvky pro formuláře. Její autor a editor byl Ian Hickson (tenkrát zaměstnanec Opery). Specifikace byla na začátku roku 2005 předložena W3C, kde se na ní dále pracovalo. Postupem času se spojila se specifikací Web Applications 1.0, aby utvořila základ pro specifikaci Hypertext Application Technology Working Group (WHATWG) HTML5, už mimo W3C.

Zásady pro vývoj HTML5

Jedna z nejlepších věcí na HTML5 formulářích je fakt, že skoro všechny nové elementy a atributy můžete používat hned teď. Nepotřebujete žádné shivs, hacky a podobně. Bohužel, ne všechny prohlížeče je podporují. V moderních prohlížečích, které je podporují, dělají hezké věci, a v těch ostatních se zobrazí jako obyčejné inputy. To vše díky zásadám pro vývoj HTML5. Momentálně mluvíme o principu graceful degradation. V podstatě to znamená, že není důvod, proč je nepoužívat; znamená to, že jste napřed.

Nové atributy

Postupně probereme 14 nových atributů:

placeholder

První je placeholder atribut, který nám umožňuje nastavit výchozí text tak, jak jsme to dosud dělali přes HTML4 value atribut. Měl by se používat jen pro krátký popis, pro cokoliv delšího používejte title atribut. Rozdíl od HTML4 je ten, že placeholder text se zobrazí, jen když je políčko prázdné a nemá focus. Jakmile focus obdrží (například klikem myši nebo tabulátorem) a začnete psát, text zmizí. Je to velmi podobné vyhledávacímu políčku v Safari (viz obrázek 1).

Obrázek vyhledávacího políčka v Safari bez a s focusem
Obrázek 1: Vyhledávací políčko v Safari bez a s focusem.

Podívejme se, jak placeholder atribut implementovat:

<input type="text" name="user-name" id="user-name" placeholder="at least 3 characters">

Toť vše! „A co je na tom tak božího? Tohle dělám v JavaScriptu už léta.“ Ano, pravda, ale díky HTML5 je to nyní součást prohlížeče, takže není potřeba tolik skriptovat, abychom dostali přístupnější variantu, která funguje napříč prohlížeči (i když je JavaScript vypnutý). Obrázek 2 ukazuje placeholder atribut v Chrome:

Obrázek formulářového políčka v Chrome bez a s focusem, čili s placeholderem a bez něho
Obrázek 2: Placeholder atribut v Chrome, bez focusu a s focusem.

Prohlížeče, které placeholder atribut neznají, ho ignorují, takže text nezobrazí. Tím, že ho přidáte, zlepšujete uživatelský prožitek pro uživatele s podporou v prohlížeči, a do budoucna jste připraveni. Všechny moderní prohlížeče placeholder podporují.

Poznámka: Momentálně není žádná oficiální pseudo–třída pro stylování placeholder textu, nicméně Mozilla (tvůrce Firefoxu) a WebKit umožňují stylování přes vendor prefixy (-moz-placeholder a -webkit-input-placeholder). Můžeme tedy bezpečně říci, že se časem stanou standardem. Více informací lze najít ve vláknu WHATWG mailing listu.

autofocus

autofocus dělá právě to, co si myslíte. Přidáte–li ho na políčko, automaticky dostane při načítání stránky focus. Podobně jako jsme si dřív pomáhali JavaScriptem u atributu placeholder.

S JavaScriptem je tu ale menší problém: začneme–li vyplňovat formulář příliš brzy, focus nám po načtení skriptů přeskočí zpět na první políčko. autofocus atribut toto řeší tak, že focus přesune rovnou při načítání dokumentu bez nutnosti čekat na skripty. Buďte však opatrní, používejte tento atribut jen tam, kde je hlavním cílem vyhledávat (jako Google), abyste předešli problémům s použitelností.

Je to logický (booleovský) atribut (pokud píšete XHTML5, viz poznámka níže) a implementuje se takto:

<input type="text" name="first-name" id="first-name" autofocus>

Všechny moderní prohlížeče tento atribut podporují, a ostatní jej podobně jako placeholder ignorují.

Poznámka: Některé další HTML5 formulářové atributy jsou také logické atributy. To znamená, že jsou–li přítomné, jsou zapnuté, a jsou–li nepřítomné, jsou vypnuté. V HTML5 je lze zapsat několika způsoby:

autofocus
autofocus=""
autofocus="autofocus"

Pokud píšete XHTML5, musíte použít autofocus="autofocus" variantu.

autocomplete

autocomplete atribut nabízí doplňování políček na základě dřívějších dat. Tento atribut je tu už od IE5.5, ale konečně je standardizován jako součást HTML5. Výchozí stav je zapnuto, což znamená, že ho nemusíme psát. Pokud chcete, aby dřívější data nenabízel, implementuje se takto:

<input type="text" name="tracking-code" id="tracking-code" autocomplete="off">

Hodnota autocomplete atributu políčka má přednost před hodnotou definovanou na rodičovském formuláři.

required

required atribut nepotřebuje moc úvodu; podobně jako autofocus dělá právě to, co byste od něj čekali. Když ho přidáte na políčko, prohlížeč po vás bude chtít, abyste ho před odesláním vyplnili. Díky tomu můžeme ušetřit nějaký čas, který bychom jinak strávili validací přes JavaScript. required je také logický atribut, a v akci vypadá takto:

<input type="text" id="given-name" name="given-name" required>

required je momentálně implementován pouze v prohlížečích Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 a Chrome 5+, takže pro ostatní prohlížeče (*ehm* IE!) je potřeba psát ještě validaci přes JavaScript.

Při špatném odeslání zobrazí Opera, Chrome a Firefox chybovou hlášku (viz obrázek 3); Safari hlášku nezobrazí, ale focus přesune na dané políčko. Ve většině prohlížečů jsou hlášky přeložené podle daného jazyka.

Obrázek formulářového políčka s required atributem a chybovou hláškou v Opeře
Obrázek 3: Formulářové políčko s required atributem a chybovou hláškou v Opeře.

Každý prohlížeč má individuální styl chybové hlášky, a prozatím ji nelze standardně stylovat. Chrome má některé vlastní pseudo–třídy, se kterými to lze, Peter Gasston o tom napsal článek. Dále můžete stylovat inputy pomocí :required pseudo–třídy. Alternativně lze předefinovat text a styly přes JavaScript metodu setCustomValidity(). Nezapomeňte, že validace na straně klienta není náhrada za validaci na straně serveru.

Poznámka: Bruce také napsal článek o stylování formulářů a vyšlo ještě jedno zajímavé psaní od Petera.

pattern

Poznámka: Regulární výraz (regex nebo regexp) je mechanismus pro porovnávání řetězců (textu) proti určitým vzorům (angl. pattern). Regexy lze využít ke kontrole formátu PSČ, telefonu a podobně. Lze je použít v řadě programovacích jazyků a některé z nich (Perl, Ruby) je mají zabudované v syntaxi. Regex je původ našeho pattern atributu.

pattern atribut jistě vzruší hodně vývojářů (asi tak, jak se u formulářových atributů vzrušit lze). Definuje JavaScriptový regulární výraz, který se použije pro kontrolu hodnoty v políčku. Díky pattern atributu můžeme lehce psát validace na specifické kódy produktů, čísla faktur a podobně. Možnosti tohoto atributu jsou široké, toto je jen jednoduchý příklad na kontrolu kódu produktu:

<label>
  Product Number:
  <input pattern="[0-9][A-Z]{3}" name="product" type="text" title="Single digit followed by three uppercase letters."/>
</label>

Tento výraz říká, že kód produktu by měl být ve formátu číslo [0-9] a tři velká písmena [A-Z]{3}. Pro začátek lze najít více příkladů na stránce HTML5 Pattern.

Podobně jako u required, pattern momentálně podporuje jen Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 a Chrome 5+, ale díky rychlému tempu prohlížečů je zbytek jistě brzy dohoní.

list a datalist element

list atribut umožňuje propojit seznam voleb (option elementy) s určitým políčkem. Hodnota list atributu musí být stejná jako ID elementu datalist, který je ve stejném dokumentu. datalist element je v HTML5 nový a představuje předdefinovaný seznam voleb pro formulářové prvky. Funguje podobně jako vyhledávací políčka v prohlížeči, které nabízí volby při psaní (viz obrázek 4).

Obrázek Google nabídky pro vyhledávání v Safari
Obrázek 4: Google nabídka pro vyhledávání v Safari.

Následující příklad ukazuje kombinaci list a datalist elementu (viz obrázek 5):

<label>
  Your favorite fruit:
  <datalist id="fruits">
    <option value="Blackberry">Blackberry</option>
    <option value="Blackcurrant">Blackcurrant</option>
    <option value="Blueberry">Blueberry</option>
    <!-- … -->
  </datalist>
  If other, please specify:
  <input type="text" name="fruit" list="fruits">
</label>

Když přidáme select element dovnitř datalist elementu, vytvoříme lepší graceful degradation, než kdybychom tam nechali jen option elementy. Následuje elegantní kód od Jeremy Keith, který hezky odpovídá HTML5 principu graceful degradation:

<label>
  Your favorite fruit:
  <datalist id="fruits">
    <select name="fruits">
      <option value="Blackberry">Blackberry</option>
      <option value="Blackcurrant">Blackcurrant</option>
      <option value="Blueberry">Blueberry</option>
      <!-- … -->
    </select>
    If other, please specify:
  </datalist>
  <input type="text" name="fruit" list="fruits">
</label>

Elementy list a datalist jsou momentálně podporovány v prohlížečích Opera 9.5+ (viz obrázek 5), Chrome 20+, Internet Explorer 10 a Firefox 4+.

Obrázek list a datalist elementu v Opeře
Obrázek 4: list a datalist element v Opeře.

multiple

listy a datalisty lze posunout ještě o kousek dál tím, že povolíme zadávání více hodnot z datalistu logickým atributem multiple. Například:

<label>
  Your favorite fruit:
  <datalist id="fruits">
    <select name="fruits">
      <option value="Blackberry">Blackberry</option>
      <option value="Blackcurrant">Blackcurrant</option>
      <option value="Blueberry">Blueberry</option>
      <!-- … -->
    </select>
    If other, please specify:
  </datalist>
  <input type="text" name="fruit" list="fruits" multiple>
</label>

multiple však není jen pro datalisty. Pokud bychom chtěli odeslat soubor na více e-mailových adres, můžeme to udělat takto:

<label>
  Upload files:
  <input type="file" multiple name="upload">
</label>

multiple je podporován v Firefox 3.6+, Safari 4+, Opera 11.5+, Internet Explorer 10 a Chrome 4+.

novalidate a formnovalidate

novalidate a formnovalidate jsou logické atributy indikující, že odeslaný formulář se nemá validovat. formnovalidate může být aplikován na submit nebo image tlačítka, kdežto novalidate atribut může být pouze na elementu form.

Ukázkový příklad pro formnovalidate atribut je „Uložit koncept“ tlačítko, kde validace políček není potřeba, nebo je dokonce nežádoucí. novalidate atribut lze použít v případě, že nechcete formulář validovat, ale chcete využít uživatelské „vychytávky“, které tyto prvky nabízejí.

Příklad s formnovalidate:

<form action="process.php">
  <label for="email">Email:</label>
  <input type="text" name="email" value="gordo@example.com">
  <input type="submit" formnovalidate value="Submit">
</form>

Příklad s novalidate:

<form action="process.php" novalidate>
  <label for="email">Email:</label>
  <input type="text" name="email" value="gordo@example.com">
  <input type="submit" value="Submit">
</form>

form

Pomocí form atributu lze propojit formulářový prvek s formulářem (tzv. vlastníkem). Znamená to, že tento prvek nemusí být potomek formuláře a může ležet někde mimo. Hlavním případem užití jsou třeba tlačítka v tabulce, které lze propojit s formulářem.

<input type="button" name="sort-l-h" form="sort">

formaction, formenctype, formmethod, a formtarget

formaction, formenctype, formmethod, a formtarget atributy korespondují s atributy definovanými na elementu form, které znáte z HTML4. Pojďme se na každý z nich krátce podívat. Tyto nové atributy vznikly proto, abyste mohli napojit různé akce na různá tlačítka, namísto toho, abyste měli v dokumentu více formulářů.

formaction

formaction specifikuje soubor nebo aplikaci, kam bude formulář odeslán. Funguje stejně jako action atribut na elementu form a lze ho použít jen na submit nebo image tlačítko (type="submit" nebo type="image").

Když se formulář odešle, prohlížeč nejprve zkontroluje formaction atribut, a pokud neexistuje, zkontroluje action atribut ve formuláři.

<input type="submit" value="Submit" formaction="process.php">

formenctype

formenctype specifikuje, jak se mají data odeslaná přes POST zakódovat. Funguje stejně jako enctype atribut na elementu form a lze ho použít jen na submit nebo image tlačítko (type="submit" nebo type="image"). Pokud není uveden, výchozí hodnota je application/x-www-formurlencoded.

<input type="submit" value="Submit" formenctype="application/x-www-form-urlencoded">

formmethod

formmethod udává, kterou HTTP metodou (GET, POST, PUT, DELETE) bude formulář odeslán. Funguje stejně jako method atribut na elementu form a lze ho použít jen na submit nebo image tlačítko (type="submit" nebo type="image").

<input type="submit" value="Submit" formmethod="POST">

formtarget

formtarget udává cílové okno, které má zobrazit výsledek zpracování. Funguje stejně jako target atribut na elementu form a lze ho použít jen na submit nebo image tlačítko (type="submit" nebo type="image").

<input type="submit" value="Submit" formtarget="_self">

Shrnutí

Podívali jsme se na několik nových atributů, které zlepšují uživatelský prožitek a šetří čas strávený na vývoji. V příštím článku probereme některé další atributy a nové formulářovými prvky.

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

Pokud vás zajíma, 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.

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

Komentáře: 16

Přehled komentářů

Honza77 Šetření času? Za kolik let?
Oldřich Vetešník Kdo ví no
Jirka Kosek Re: Šetření času? Za kolik let?
bauglir Re: Šetření času? Za kolik let?
Martin Hlaváč Javascriptové knihovny
Vladimír IE8
Petr Totín Díky
bauglir Aplikace
Vladimír Re: Aplikace
bauglir Re: Aplikace
Oldřich Vetešník
Vladimír Re: Aplikace
bauglir Re: Aplikace
enumag Atribut multiple
bauglir Re: Atribut multiple
bauglir Re: Atribut multiple
Zdroj: https://www.zdrojak.cz/?p=7560