Automatické dopĺňanie je už dnes veľmi obľúbenou funkciou na internete. Ak niečo napíšete do poľa formulára, prehliadače ponúknu zoznam návrhov slov, ak je táto funkcia aktívna a podporovaná prehliadačom.
Takéto aplikácie je teraz veľmi jednoduché implementovať. K tomu je potrebné priradiť elementu input atribút autocomplete.
<input type="text" autocomplete="on" />
Hodnotou on sa aktivuje automatické dopĺňanie pre toto pole. Prehliadač si teraz pamätá hodnoty zadané do tohto poľa a neskôr ich ponúka prostredníctvom výberového zoznamu. Týmto spôsobom sa formuláre dajú vyplňovať oveľa rýchlejšie.
Ak dané správanie nie je požadované pre každé pole, je možné túto funkciu explicitne deaktivovať. Na tento účel sa priradí atribútu autocomplete hodnota off.
<input type="text" autocomplete="off" />
Alternatívne je možné pridať atribút autocomplete aj elementu form. V závislosti od toho, či je tu použitá hodnota on alebo off, sa automatické dopĺňanie pre celý formulár aktivuje alebo deaktivuje.
<form autocomplete="on"> .. </form>
Ak sú uvedené protichodné údaje vo vnútri formulára, potom sa použijú tieto.
<form autocomplete="on"> Meno: <input type="text" name="vname" autocomplete="off" /><br /> Priezvisko: <input type="text" name="nname" /><br /> PSČ: <input type="text" name="plz" /><br /> Mesto: <input type="text" name="ort" /> </form>
V tomto príklade by sa automatické dopĺňanie uplatnilo na všetkých poliach formulára, keďže v počiatočnom prvku form bolo nastavené autocomplete na hodnotu on. Výnimkou je len pole vname, pre ktoré je automatické dopĺňanie explicitne deaktivované.
Aby fungovalo automatické dopĺňanie, musí byť táto funkcia podporovaná daným prehliadačom a nesmie byť vypnutá. Navyše sa v zozname návrhov zobrazujú iba hodnoty, ktoré už boli raz zadané.
Ak chcete skutočne ovplyvniť hodnoty v zozname návrhov, HTML5 zaviedlo element datalist. Tento element nezobrazuje v prehliadači žiaden viditeľný výstup. Hodnoty pre zoznamy návrhov je možné definovať pomocou podradených elementov option. Príklad:
<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>
Pomocou atribútu list elementu input sa vytvorí logické spojenie medzi vstupným poľom a elementom datalist. Pri tom musia byť pri atribútoch list a id elementu datalist použité rovnaké hodnoty.
Nastavenie fokusu
Polu formulára možno automaticky priradiť fokus pri načítaní stránky. Takáto funkcia je napríklad známa na úvodnej stránke Googlu. Keď sa načíta táto stránka, môžete okamžite písať vyhľadávací výraz bez toho, aby ste museli kurzor manuálne umiestniť do vyhľadávacieho/pole vstupu.
V HTML5 je na takéto prípady atribút autofocus. Tento atribút zabezpečuje, že formulárovému polu s ním automaticky priradený fokus pri načítaní stránky.
Príklad:
<form> <input name="suchfeld" autofocus="autofocus" /> <input type="submit" value="Hľadať" /> </form>
Prehliadače, ktoré nepoznajú atribút autofocus, jednoducho ho ignorujú. Toto ignorovanie nemá žiadne negatívne dôsledky. (Avšak potom sa pole nezaostrí).
Kontrola vstupov
Doteraz nebolo možné kontrolovať formulárové vstupy len s prostriedkami HTML. Ak ste chceli napríklad overiť, či používateľ do formulárového poľa skutočne zadal e-mailovú adresu, obvykle ste na to používali JavaScript alebo PHP. V HTML5 už nie sú také "akrobatické kúsky" potrebné. Pretože HTML už má Validáciu API. A tá je naozaj výnimočná. S veľmi malým úsilím je teraz možné kontrolovať formulárové vstupy.
HTML5 obsahuje niekoľko pravidiel, ktoré určujú spôsob, ako sa polia overujú. Napríklad polia pre zadávanie typu email sú overované na správne zadanú e-mailovú adresu.
• url – Overuje URL
• email – Overuje e-mailovú adresu
• range – Overuje desatinné číslo
• number – Overuje desatinné číslo
Pre označenie poľa ako povinného sa priradí atribútu required.
<input id="vname" name="vname" type="text" required="required" />
Pole označené touto značkou musí být vyplněno, nesmí být prázdné.
Ale pozor: Aby byla pole ověřena, musí být splněny určité předpoklady.
• Prvku musí být přiřazena atribut name.
• Prvek musí být uvnitř elementu form, tedy musí být součástí HTML formuláře. Alternativně lze spojení s formulářem navázat také prostřednictvím atributu form.
• Prvek nesmí mít atributy readonly nebo disabled.
Pravilné použití by tedy vypadalo následovně:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Zde prohlížeč zkontroluje, zda bylo pole vyplněno. Je-li pole prázdné a přesto se pokusí odeslat formulář, měl by prohlížeč nyní vypsat chybovou zprávu.
V průběhu této série bylo opakovaně upozorňováno na typy polí formuláře email, rozsah, číslo, tel a url. Tato pole nejsou pouze kontrolována na obsah hodnoty, ale také na správnost zadané hodnoty.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
U polí typu email je například kontrolováno, zda zadávaná hodnota skutečně odpovídá syntakticky správné e-mailové adrese. Pokud tomu tak není, prohlížeč vypíše chybovou zprávu.
Za zobrazování chybových zpráv jsou zodpovědné prohlížeče.
Pole automaticky neověřovat
Ne vždy je žádoucí automatické ověřování vstupů. Chcete-li zabránit ověřování celého formuláře, přidejte úvodnímu elementu form atribut novalidate.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Alternativně může být atribut formnovalidate přidán k tlačítku Odeslat. Je to zajímavé například v případě, kdy k tlačítku Odeslat nabízíme tlačítko pro dočasné uložení formuláře vedle.
<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" />
</form>
V tomto případě bude formulář ověřován pouze přes první tlačítko Odeslat. Ostatní dvě slouží k uložení a odhlášení. Ověřování v těchto případech není nutné.
