site logo

Atributy formulářových elementů podle HTML5

Jak vypadají nové formulářové prvky podle specifikace HTML5 jsme si ukázali v předešlém článku. Nyní se podíváme na nové atributy podle HTML5. V tomto článku je uveden přehled podpory nových atributů v často používaných prohlížečích, dále najdete živé, ukázkové formuláře, příklady html kódu a komentář k atributům, včetně popisu jak upravují chování formulářů.

Podpora atributů v browserech

atributIEFirefoxOperaChromeSafari
autocomplete ne3.59.53.04.0
autofocus ne4.010.03.04.0
form ne4.09.510.0ne
form overrides ne4.010.510.0ne
list, datalist ne4.09.5nene
min, max, step nene9.53.0ne
novalidate ne4.09.010.0ne
pattern ne4.09.53.03.0
placeholder ne4.011.03.03.0
required ne4.09.010.0ne

V tabulce jsou zahrnuty pouze finální verze browserů, nikoli betaverze. Připomínám, že specifikace HTML5 ještě není v konečné podobě a vyznačená podpora se může měnit, nebo doplňovat.

Popis atributů a ukázky

Nové atributy můžete používat již nyní, ale nemůžete na ně spoléhat, pokud není zajištěno, že bude použit browser který potřebný atribut zvládá. Toto lze zajistit jen v prostředí intranetu, kde typ použitého browseru je předepsán interními předpisy firmy. Zda Váš aktuální browser podporuje nové formulářové atributy si můžete vyzkoušet v živých ukázkách formulářů na této stránce.

<form ... autocomplete="on">

Atribut autocomplete určuje zda formulář, nebo jen některé jeho prvky budou nabízet "podobné" hodnoty již dříve zapsané do téhož pole formuláře. Když uživatel začne vyplňovat formulářové pole, browser nabídne seznam dříve vložených textů. Hodnota on  povoluje uchování textů pro pozdější účely, hodnota off  vypíná tuto funkci. Atribut by měl fungovat v těchto typech formulářových prvků: form, text, search, url, tel, email, password, range, color a všechny varianty elementů pro zadávání datumu a času. Následuje příklad kódu pro formulář, kde atribut autocomplete je zapnut pro celý formulář, ale pro prvek email je vypnut.


<form action="HTML5attrib.asp" method="get" autocomplete="on">
Jméno:  <input type="text"  name="name">
...
E-mail: <input type="email" name="email" autocomplete="off">
<input type="submit">
</form>

<input ... autofocus>

Formulářový prvek, který má uveden atribut autofocus bude po načtení celé stránky aktivní. To znamená, že je možné ihned psát např. vyhledávací fráze a není potřeba příslušný prvek aktivovat pomocí myši, nebo klávesou tab. Tento atribut je vhodný především pro vyhledávací formuláře.

Když kterýkoli testovací formulář na této stránce odešlete, server vrátí stejnou stránku, ale vstupní políčko daného formuláře bude mít atribut autofocus. Kromě browserů IE8 a FF3, které tento atribut nepodporují, stránka automaticky naroluje tak, aby dané vstupní pole bylo viditelné, i když způsob narolování je různých browserech odlišný. Dále uvidíte zcela jasné, mimo pochybnost označené aktivní pole v prohlížeči Chrome. V ostatních browserech je aktivní pole rozeznatelné jen podle textového kurzoru. Označení elementů, které mají focus je vysvětleno v článku fokus elementů.

<input ... form="formID">

Na jedné stránce může být více formulářů, ale odeslán může být vždy jen jeden formulář. Odeslány jsou jen ty elementy, které jsou uvnitř formuláře, tedy mezi otevíracím a zavíracím tagem form. To znamená, že prvek umístěný mimo element form nelze podle starší specifikace odeslat na server ke zpracování.

Atribut form  umožní přidat do formuláře element, jehož html kód je mimo kód formuláře. Hodnota atributu specifikuje ke kterému formuláři daný prvek náleží. Element může přiřazen i do více formulářů současně, pak uvedeme seznam všech formulářů (odděleno mezerou). Přiřazení je provedeno pomocí id  formuláře tak jak je naznačeno v následující ukázce kódu:


<form ... id="formID">
jméno: <input type="text" name="fname">
<input type="submit">
</form>
...
příjmení: <input type="text" name="lname" form="formID">

Atribut form může být specifikován ve všech typech prvků input.

přepsání atributů elementu form

Někdy potřebujeme přepsat atributy elementu form. To je možné pomocí JavaSkriptu, ale co když je vypnutý skript v browseru? Pro tento účel je specifikována skupina atributů, které můžeme využít ve formuláři, který má více odesílacích prvků. Každý odesílací element pak může nastavit jiné podmínky odeslání formuláře. Následující atributy je možné použít v elementech submit a image a fungují i při vypnutém JavaSkriptu.

atribut v submitatribut ve formovlivní / přepíše
formactionactioncílovou adresu serverového skriptu
formenctypeenctypezpůsob kódování formulářových dat
formmethodmethodzpůsob odeslání formuláře (get / post)
formnovalidatenovalidatenastaví / zruší nativní validaci formuláře
formtargettargetokno ve kterém se otevře stránka po odeslání formuláře

Následuje ukázka html kódu formuláře, který obsahuje jedno textové pole a tři odesílací tlačítka submit. První tlačítko odešle formulář běžným způsobem, druhé tlačítko odešle formulář na jiný serverový skript a třetí tlačítko odešle formulář na původní skript, ale bez validace.


<form action="demo.asp" method="get">
E-mail: <input type="email" name="userid">
<input type="submit" value="odeslat">
<input type="submit" formaction="demo_admin.asp" value="odeslat jako admin">
<input type="submit" formnovalidate="true" value="odeslat bez validace">
</form>

<input ... list="mydata">, <datalist id="mydata">


Atribut list, společně s elementem datalist  vytvoří formulářový prvek, který je jakousi kombinací prvku select a textbox. Můžeme vybrat jednou z předem nastavených možností (jako select), nebo napsat vlastní hodnotu (textbox), pokud nabízené možnosti nevyhovují.

Vpravo je testovací formulář, který využívá nabídky datalist. Nabídka se otevře při aktivování textboxu. Funguje v Opera11 a Firefox4. Opera rozbalí nabídku ihned poté, když prvek získá fokus, Firefox vyžaduje použití kurzorové klávesy (šipka dolů, nebo nahoru). Následuje ukázka kódu pro tento formulář.


<form method="get" action="HTML5attrib.asp">
<input type="text" name="text3" list="mydata">
<datalist id="mydata">
  <option value="Firefox"></option>
  <option value="Chrome"></option>
  <option value="Opera"></option>
  <option value="IE"></option>
</datalist>
<input type="submit">
</form>

Safari ver.5 rozhodí renderování stránky, pokud atribut <option> není zakončen uzavíracím tagem </option>. Dovnitř <option> můžeme kromě atributu value vložit další atribut label="..." a vytvořit tak např. seznam emailů (jméno / adresa).

<input type="number" min="0" max="12" step="1">


Atributy min, max a step mají význam v elementech typu number, range a elementech pro zadávání datumu a času. Test, zda vložená hodnota odpovídá předepsaným limitům, včetně počtu desetinných míst podle atributu step je proveden až před odesláním formuláře.

Ukázkový formulář vpravo očekává zápis číselné hodnoty v rozmezí 0 až 12, je povoleno žádné, nebo jedno desetinné místo. Zápis může být proveden pomocí klávesníce přímým zápisem číslic, dále pomocí kurzových kláves, nebo kliknutím na tlačítka, která jsou součástí elementu. Správný element typu number je vidět jen v Opeře a Chrome, ostatní browsery zobrazí běžný formulářový prvek typu text.

<input ... multiple>

Ve starších verzích HTML byl atribut multiple specifikován jen pro prvek select. Pomocí klávesy Ctrl a myši je možné v takto označeném prvku select vybrat více položek (hodnot). V HTML5 je tento atribut doporučen i pro elementy typu file a email. Uvnitř formulářového elementu se tak vytvoří seznam položek, oddělených čárkou.

<form ... novalidate>, <input ... novalidate>

Potlačení validace pro celý formulář najednou, nebo jen pro určité prvky formuláře lze dosáhnout pomocí atributu novalidate. Význam může nabývat v následujících elementech: form, input type: text, search, url, tel, email, password, range, color a všechny varianty elementů pro zadávání datumu a času.

<input ... pattern="[A-z]{3}">


Validace formulářového vstupního pole <input type="text"> se někdy provádí pomocí JavaSkriptu a regulárního výrazu. Attribut pattern umožní zapsat vzor regulárního výrazu podle kterého bude provedena validace vstupního pole i bez zapnutého JavaSkriptu. Validace je provedena po kliknutí na odesílací tlačítko. Pokud hodnota nesplňuje předepsané kriterium, vyskočí chybová hláška a formulář není odeslán. Atribut pattern lze použít v následujících typech formulářových prvků: text, search, url, tel, email, a password.

Testovací formulářové pole vpravo má nastaven atribut pattern="[A-z]{3}"  očekává tedy přesně tři písmena, velká, nebo malá. Test funguje pouze v Opeře. Všiměte si, že nemůžete psát písmena s diakritikou, což silně omezuje použitelnost regulárních výrazů v ne-anglických zemích.

<input ... placeholder="toto je placeholder">


V ukázkovém formuláři vpravo je tento atribut použit v textboxu. Funguje tak, že text zapsaný do tohoto atributu je viditelný jako světle šedý text uvnitř prvku a to jen když je prvek prázdný. Jakmile je aktivován kliknutím, nebo pomocí klávesy tab  tj. prvek získá fokus, text placeholderu zmizí. Když je zapsán jakýkoli text do prvku, placeholder je již neviditelný (pokud není text smazán).

Placeholder slouží jako pokyn, náznak, doporučení, nebo nápověda, jaký je očekávaný formát vstupních dat. Nevýhodou je, že po vložení hodnoty zmizí, nelze se k němu jednoduše vrátit. Podle W3C se uplatní v následujících typech prvků: text, search, url, tel, email, a password. Funguje v browserech Chrome, Safari a Opera. V Chrome, Safari a Firefox4 funguje navíc i v prvku textarea, což je chvályhodné.

<input type="email" ... reqiured>


Atribut required zajistí přirozenou, nativní validaci formulářového pole bez podpory JavaScriptu a podle W3C by měl pracovat v následujících typech formulářových elementů: všechny varianty elementů pro zadávání datumu a času, text, url, email, number, search, tel, password, file, checkbox a radio.

Když je specifikován atribut required  formulářové pole nesmí být prázdné. Dalším krok je kontrola, zda vložený text (hodnota) odpovídá deklarovanému typu pole. Např. type="email" musí obsahovat jeden znak zavináč a jednu, nebo několik teček, které nesmí být bezprostředně za sebou.

Formulář vpravo vyžaduje zadání emailové adresy. Při odesílání formuláře je text testován, zda odpovídá syntaxi emailové adresy. Když Opera zjistí chybu, zobrazí zprávu a formulář není odeslán. Ostatní browsery neumí atribut required zpracovat a odešlou formulář vždy.

 

V návrhu nových atributů pro formulářové prvky mi chybí atribut pro povolení / zakázání odeslání formuláře klávesou Enter. Starší specifikace doporučovaly odeslání formuláře pomocí Enter jen pro jednoduché, vyhledávací, nebo přihlašovací formuláře. Různé browsery reagují na Enter nejednotně. Dále chybí atributy pro podporu národních formátů desetinných čísel, nebo datumů v odpovídajících formulářových typech. V neposlední řadě chybí atribut pro blokování vícenásobného odeslání formuláře.

updated 2011-03-25