Automatické doplňování je dnes oblíbenou funkcí na internetu. Když začnete něco psát do pole formuláře, prohlížeče nabídnou seznam slovních návrhů, pokud je funkce povolena a podporována prohlížečem.
Takové aplikace je nyní možné velmi snadno implementovat. K tomu se přiřadí atribut autocomplete prvku input.
<input type="text" autocomplete="on" />
Hodnotou on se automatické doplňování pro pole aktivuje. Prohlížeč si nyní zapamatuje zadané hodnoty do pole a později je nabídne výběrovým seznamem. Tím lze formuláře vyplňovat výrazně rychleji.
Někdy však toto chování není žádoucí. V takových případech může být automatické doplňování explicitně deaktivováno. K tomu se hodnota atributu autocomplete nastaví na off.
<input type="text" autocomplete="off" />
Jako alternativu k tomu lze přidat atribut autocomplete prvku form. Podle toho, zda je zde použita hodnota on nebo off, je automatické doplňování pro celý formulář povoleno nebo zakázáno.
<form autocomplete="on"> .. </form>
Pokud jsou uvnitř formuláře uvedeny protichůdné údaje, platí tyto.
<form autocomplete="on"> Jméno: <input type="text" name="vname" autocomplete="off" /><br /> Příjmení: <input type="text" name="nname" /><br /> PSČ: <input type="text" name="plz" /><br /> Město: <input type="text" name="ort" /> </form>
V tomto příkladě by automatické doplnění bylo použito na všechna pole formuláře, protože v úvodním prvku form je hodnota autocomplete nastavena na on. Výjimkou je pouze pole vname, u kterého bylo automatické doplňování explicitně zakázáno.
Aby fungovalo automatické doplňování, musí tuto funkci daný prohlížeč podporovat a nesmí být deaktivována. Navíc jsou v návrhovém seznamu zobrazeny pouze takové hodnoty, které byly již dříve jednou zadané.
Aby bylo možné skutečně ovlivňovat hodnoty v návrhovém seznamu, byl v HTML5 zaveden prvek datalist. Tento prvek v prohlížeči nezobrazuje žádný viditelný výstup. Pomocí podřízených prvků option lze definovat hodnoty pro seznamy návrhů. Ukázka:
<div> Jazyk: <br /> <input type="text" autocomplete="on" list="sprache" /> </div> <datalist id="sprache"> <option value="HTML5"></option> <option value="XHTML"></option> <option value="PHP"></option> <option value="JavaScript"></option> </datalist>
Pomocí atributu list prvku input se vytvoří logické spojení mezi vstupním polem a prvkem datalist. Pro splnění tohoto spojení musí být u hodnot atributu list a u atributu id prvku datalist použity stejné hodnoty.
Nastavit fokus
Na vstupní pole formuláře lze nastavit automaticky fokus při načtení stránky. Tuto funkci znáte například z úvodní stránky Google. Pokud je tato stránka načtena, můžete okamžitě začít psát hledaný výraz, aniž byste předtím ručně umístili kurzor do pole pro vyhledávání/vstupu.
V HTML5 existuje pro tyto případy atribut autofocus. Tento atribut zajišťuje, že vstupní pole s tímto atributem získá automaticky fokus při načtení stránky.
Ukázka:
<form> <input name="suchfeld" autofocus="autofocus" /> <input type="submit" value="Hledat" /> </form>
Prohlížeče, které atribut autofocus nepodporují, jej prostě ignorují. To nemá žádný negativní dopad. (I když se pak pole nenačte do fokusu).
Prověření vstupů
Formulářové vstupy se doposud s prostředky HTML nedaly prověřovat samostatně. Pokud jste tedy například chtěli ověřit, zda uživatel do pole formuláře skutečně zadal e-mailovou adresu, obvykle jste k tomu potřebovali JavaScript nebo PHP. V HTML5 už se tyto "kličky" nevyžadují. HTML nyní přináší validační API. A to s sebou nese jistou sílu. S velmi málo úsilím lze nyní ověřovat formulářové vstupy.
HTML5 obsahuje několik pravidel, která určují způsob, jakým jsou pole validována. Například pole typu email jsou kontrolována na to, zda byla zadána správná e-mailová adresa.
• url – kontroluje se na URL
• email – kontroluje se na e-mailovou adresu
• range – kontroluje se na desetinné číslo
• number – kontroluje se na desetinné číslo
Aby bylo pole označeno jako povinné, přiřadí se mu atribut required.
<input id="vname" name="vname" type="text" required="required" />
Pole označené tímto způsobem musí být vyplněno, nesmí být tedy prázdné.
Ale pozor: Aby byla pole ověřena, musí být splněny určité podmínky.
• Prvek musí mít přiřazen atribut name.
• Prvek musí být umístěn uvnitř prvku form, tedy se nacházet v HTML formuláři. Alternativně k tomu může být spojení s formulářem vytvořeno také pomocí atributu form.
• Prvek nesmí mít atributy readonly ani disabled.
Špatný použití by mělo vypadat následovně:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Zde by prohlížeč zkontroloval, zda bylo pole vyplněno. Pokud je pole prázdné a přesto se pokusíte odeslat formulář, měl by prohlížeč nyní zobrazit chybové hlášení.
V průběhu této série již bylo několikrát upozorněno na typy polí formuláře email, range, number, tel a url. Tato pole nejsou kontrolována pouze z hlediska existence hodnoty, ale také z hlediska správnosti zadané hodnoty.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
U polí typu email se například kontroluje, zda je zadaná hodnota skutečně syntakticky správnou e-mailovou adresou. Pokud tomu tak není, prohlížeč vypíše chybové hlášení.
Pro výpis chybové zprávy jsou zodpovědné prohlížeče.
Pole automaticky neověřujte
Ne vždy je žádoucí automaticky ověřovat vstupy. Pokud chcete zamezit ověřování celého formuláře, přiřaďte úvodnímu prvku form atribut novalidate.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Alternativně může být atributu formnovalidate přidán k tlačítku Odeslat. To je například zajímavé tehdy, když kromě tlačítka pro odeslání nabízíte také tlačítko pro dočasné uložení formuláře.
<form action="form.cgi" method="post">
<input id="email" name="email" type="email" />
<input type="submit" name="submit" value="Odeslat" />
<input type="submit"
formnovalidate="formnovalidate" value="Uložit" />
<input type="submit"
formnovalidate="formnovalidate" value="Odhlásit se" />
</form>
V tomto případě bude formulář validován pouze pomocí prvního tlačítka Odeslat. Ostatní dva slouží k uložení a odhlášení. Validace v těchto případech není nutná.
