ikonka šipky nahoru

HTML5 formuláře a jejich validace – stručná příručka

Příručka pro práci s HTML5 atributy a typy ve formulářích na webových stránkách a aplikacích včetně ošetření pomocí HTML5 validace a rolí WAI-ARIA pro handicapované uživatele.

Atribut required

Je booleovský atribut (s hodnotami ANO/NE, platný/neplatný). Required zabrání odeslání formuláře s nevyplněnými či neplatně vyplněnými  inputy formuláře. Navíc prohlížeč zobrazí u prvního chybně vyplněného pole chybovou zprávu ve stylu “Vyplňte prosím toto pole” nebo “Musíte specifikovat hodnotu” atp. 

<label for="user_name">Jméno a příjmení: <span class="required">*</span></label>
<input name="user[name]" id="user_name" type="text" required aria-required="true" placeholder="Jméno a příjmení">

Přidaný atribut aria-required=”true” slouží k zlepšení přístupnosti pro handikepované uživatele, kteří používají čtečky obrazovky (screen readers), které ne vždy podporují HTML5 atributy, mnohá tato zařízení však podporují role WAI-ARIA. Díky přidáním role uživatelé budou vědět, že toto pole je povinné.

Jak ostylovat povinná require pole pomocí pseudotříd

S využitím pseudotříd můžeme uživatelům dát vědět, že pole formuláře je povinné, vyplnili správně nebo špatně.

<style>
input:required {
    background-image: url('../images/required.svg');
}
input:focus:invalid {
    background-image: url('../images/invalid.svg');
}
input:focus:valid {
   background-image: url('../images/valid.svg');
}
</style>

Prohlížeče aplikují vlastní prvky a styly na neplatná pole např. Firefox jej červeně podbarví. Staré prohlížeče nepodporují pseudotřídu :required obojí však lze řešit.

/*Pro Firefox*/
:invalid {
   box-shadow: none;
}

/* Pro staré prohlížeče */
input:required, input[required] {
   background-image: url('../images/required.png');
}

Hook – hookování

Tento atribut ( input[required] ) lze využít jako tzv. hook, na který se zavěsí validace formuláře pro webové prohlížeče, které nepodporují HTML5.

Vlastní chybové zprávy

Pokud chcete změnit text chybové zprávy, lze to udělat pomocí metody setCustomValidity(errorMsg), která jako svůj jediný parametr přebírá chybovou zprávu, kterou chcete zobrazit. 

Atribut pattern

Umožňuje definovat pravidlo zapsané pomocí regulárního výrazu např. validace hesla ve formuláři při přihlášení.

<label for="user_pass">Heslo: <span class="required">*</span></label>
<input name="user[pass]" id="user_pass" type="text" required aria-required="true" pattern="\S{6.}" placeholder="Zadejte 6ti místné heslo">

\S … jakýkoliv neprázdný znak
{6.} … alespoň 6x

Atribut zabrání odeslání formuláře pokud je pole nevyplněné, respektve neodpovídá zadanému vzoru, zapsaným regulárním příkazem.

Atribut placeholder

Umožňuje vepsat do pole nápovědu, v jakém tvaru má uživatel vyplnit data v inputu. Pro lepší použitelnost lze nápovědu umístit i do prvku title=” ” pro staré prohlížeče. Nebo využít tzv. tooltip.

Placeholder je především relevantní pro typy: text, search, URL, telephone, email a password.

Atribut disabled

Formulářové prvky, které mají definovaný atribut disabled, se zobrazují jako zašedlé – evokující, že jsou neaktivní a uživatel s nimi nemůže manipulovat. Lze tak znepřístupnit tlačítko, dokud nejsou správně vyplněna všechna povinná pole formuláře. Nebo nějaká nabídka ve formuláři, která se zpřístupní až po nějaké volbě uživatele.

Atribut readomly

Funkce atributu je stejná jako u disabled s tím rozdílem, že toto pole získá fokus a jeho hodnota se odešle na server.

<label for="from">Dotaz ze stránky:</label>
<input name="from" id="from" type="url" readonly placeholder="www.databook.cz">

Atribut multiple

Umožňuje pro prvky vstupních typů email, file a select zadat více hodnot, více mailů nebo souborů.

Atribut form

Atribut form jako svou hodnotu přebírá id z prvku form, s nímž se má sada polí sdružit. Pomocí tohoto atributu lze sdružovat  respektive propojit formulářové prvky s formulářem, do kterého však nejsou vnořeny.

Atribut autocomplete

Usnadňuje vyplnění formuláře. Někdy je dobré automatické vyplňování vypnout (např. u vyplňování čísel karet nebo různých antispam CAPCHA kódů, či voleb datumů v kalendáři).

Prvek datalist a atribut list

Prvek datalist neboli datové seznamy umožňuje předefinovat nejčastější volby a zapsat je do seznamu. Uživatel začne vyplňovat pole a pokud je klíčové slovo v nabídce, prohlížeč mu ho našeptá. Z uživatelského hlediska je to snadnější volba než vybírání a rolování v select listu.

<label for="favservice">Co poptáváte za službu?</label>
<input type="text" list="services" id="favservice" name="favservice">

<datalist id="services">
   <option value="Kódování webu z grafického návrhu">
   <option value="Převedení šablony na WordPress">
   <option value="Tvorba webu na WordPress">
   <option value="Programování">
   <option value="UX Poradenství">
   <option value="Zvýšit rychlost načítání webu">
</datalist>

Atribut autofocus

Atribut autofocus umožňuje dát jednomu z polí focus ihned po načtení formuláře.

<label for="user_name">Jméno a příjmení:</label>
<input name="user[name]" id="user_name" type="text" autofocus placeholder="Jméno a příjmení">

Formulářové vstupní typy v HTML5

  • button
  • checkbox
  • file
  • hidden
  • image
  • password
  • radio
  • reset
  • submit
  • text
  • search
  • email
  • url
  • tel
  • datetime
  • date
  • month
  • week
  • time
  • datetime-local
  • number
  • range
  • color

Type search

Vstupní typ search definuje vyhledávací pole. Prohlížeč do prvku pole díky definování typu přidává například křížek pro rychlé odstranění hledaného dotazu. Prohlížeč poskytuje lepší vizuální vodítko pro uživatele.

<form id="search-ebooks" method="get">
   <input type="search" id="search" name="search">
   <input type="submit" value="Hledat eknihu">
</form>

Type email

Umožňuje validovat a rozpoznat správně vyplněný tvar emailové adresy a podporuje booleovský atribut multiple pro zadání většího počtu mailových adres. 

<label for="user_email">E-mail:<span class="required">*</span></label>
<input name="user[email]" id="user_email" type="email" required aria-required="true" placeholder="jmeno.prijmeni@vasemail.cz">

Type tel – telefonní čísla

Tento typ vstupního pole je určen pro zadávání telefonního čísla. Sice neověřuje jeho správný tvar, ale pomáhá při vyplňování telefonního čísla. 

Type URL adresy

Tento typ vstupního pole je určen pro zadávání webové adresy a ověřuje její správný tvar. Pokud však zadáte URL ve tvaru abc://abc.domena.abc  kontrolou projde, ikdyž se nejedná o skutečnou doménu prvního řádu. Přesnější tvar URL lze definovat pomocí atributů pattern a nápovědy v tite a umístěním placeholderu.

Type number – čísla

Umožňuje přidat číselník, pro volby počtu. Z uživatelského hlediska je to výrazně lepší volba než pro určení počtu používat volbu v select listu.

<label for="quantity">Pocet kusu:
<input type="number" name="quantity" id="quantity" value="1" min="1" max="10" step=”1”>Kusu</label>

Atribut step umožňuje defiinovat o kolik se zvýší číslo v číselníku. Atribut min, max a step je dobré používat, aby bylo zajištěné správné chování na všech prohlížečích.

Type range – rozsahy, posuvníky a slidery

Vstupní typ range zobrazí posuvník neboli slider. Je vhodný pro vstupy, kde se zadává orientační číslo například hodnocení jako recenze knihy nebo filmu. Výchozí hodnotou je střed posuvníku.

<label for="slider">Jak hodnotite stranky Databook.cz
<input type="range" name="slider" id="slider" step="10" min="0" max="100"></label>

Type color – volba barvy

Pomocí vstupního typu color lze pomocí formuláře v HTML5 vybrat barvu. Kliknutím na pole se načte panel s kompletní nabídkou všech hexadecimálních barev.

<label for="color">Barva:</label>
<input id="color" name="color" type="color" placeholder="#dadada" pattern="#(?:[0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})" required aria-required="true">

Type Date a Datetime – datum a čas

Vstupní typ Datum a čas se dá dobře integrovat na stránky a umožnit tak volbu registrace od určitého do určitého data.

<label for="startdate">Registrace od:</label>
<input id="startdate" name="startdate" type="date" placeholder="" min="2019-01-01" max="2019-12-31">

<label for="enddate">Registrace do:</label>
<input id="enddate" name="enddate" type="date" placeholder="" min="2019-01-01" max="2019-12-31">

Prvek output

Je šikovný prvek, který má za úkol zobrazovat výsledek nějakého výpočtu uživateli při vyplňování formuláře aniž by s hodnotou výsledku mohl přímo manipulovat (např. celková cena objednávky). ‘Prvek output může obsahovat atribut for, který se používá jako reference na id polí formuláře, jejichž hodnoty participují na výpočtu celkové hodnoty prvku output.

Prvek form

K prvku form se vztahuje několik nových atributů. Jsou to booleovský atribut novalidate (umožní odeslat formulář bez validace polí), nemusí mít nastavený atribut action (pak se chová stejn jako by action byl nastavený na aktuální stránku) a autocomplete.

Prvek Optgroup

Může být dceřinným prvkem jiného prvku opgroup a umožňuje tak udělat výběrové menu s více úrovněmi (multilevel select menus).

Prvek textarrea

Již nemusí mít  rows a cols.  Lze pro něj použít atribut wrap (s hodnotami soft a hard). Jde o zalamování řádků. Pokud je nastaveno hard musí se uvést počet cols.

Polyfil a javascriptová knihovna modernizr

Polyfily poskytují náhradní javascriptové řešení pro nějakou funkcionalitu HTML5 pro staré prohlížeče, které nativně HTML5 nepodporují. K tomu je dobrá javascriptová knihovna Modernizr: www.modernizr.com

Líbí? Pošlete to do světa. Díky