Avtomatska dopolnitev je trenutno zelo priljubljena funkcija na internetu. Ko nekaj vnesemo v polje obrazca, brskalniki - če je funkcija omogočena in podprta s strani brskalnika - ponudijo seznam predlogov besed.
Takšne aplikacije je zdaj zelo enostavno implementirati. Za to dodelimo input-elementu atribut autocomplete.
<input type="text" autocomplete="on" />
Z vrednostjo on se omogoči samodejno dokončevanje za polje. Brskalnik si zdaj zapomni vrednosti, ki so bile vnešene v polje, ter jih kasneje ponudi prek seznama za izbiro. Na ta način je mogoče obrazce izpolnjevati veliko hitreje.
Včasih to obnašanje ni zaželeno pri vseh poljih. V takšnih primerih se avtomatsko dokončevanje lahko izrecno onemogoči. Za to dodelimo atributu autocomplete vrednost off.
<input type="text" autocomplete="off" />
Alternativno je mogoče form-elementu dodati atribut autocomplete. Glede na to, ali je tukaj uporabljena vrednost on ali off, se avtomatska dopolnitev za celoten obrazec omogoči ali onemogoči.
<form autocomplete="on"> .. </form>
Vendar v primeru nasprotujočih si navedb znotraj obrazca se upoštevajo te.
<form autocomplete="on"> Ime: <input type="text" name="vname" autocomplete="off" /><br /> Priimek: <input type="text" name="nname" /><br /> Poštna številka: <input type="text" name="plz" /><br /> Kraj: <input type="text" name="ort" /> </form>
V tem primeru bi se avtomatska dopolnitev uporabila za vsa polja obrazca, saj je bila v začetnem form-elementu vrednost atributa autocomplete nastavljena na on. Izjema je samo polje vname, kjer je bila avtomatska dopolnitev izrecno onemogočena.
Da avtomatska dopolnitev deluje, mora to funkcijo podpirati ustrezni brskalnik in ne sme biti onemogočena. Poleg tega so v seznamu predlogov prikazane samo tiste vrednosti, ki so bile že enkrat vnešene prej.
Da lahko dejansko vplivamo na vrednosti v seznamu predlogov, je bilo s HTML5 uvedeno datalist-element. Ta element ne povzroči vidnega izhoda v brskalniku. Prek podrejenih elementov option se lahko določijo vrednosti za sezname predlogov. Primer:
<div> Jezik: <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>
Preko atributa list elementa input se vzpostavi logična povezava med poljem za vnos in elementom datalist. Pri tem morajo biti pri list in atributu id elementa datalist uporabljene enake vrednosti.
Nastavitev fokusa
Pred obremenitvijo strani je mogoče polju obrazca samodejno določiti fokus. Takšno funkcijo poznate na primer iz Googlove domače strani. Ko je ta stran obiskana, je mogoče takoj vnesti iskalni niz, ne da bi morali ročno postaviti kazalec v iskalno/vnosno polje.
V HTML5 obstaja za takšne primere atribut autofocus. Ta atribut poskrbi, da obremenitev strani polju obrazca, ki je bilo opremljeno s tem, samodejno določi fokus.
Primer:
<form> <input name="suchfeld" autofocus="autofocus" /> <input type="submit" value="Suche" /> </form>
Brskalniki, ki ne poznajo atributa autofocus, ga preprosto prezrejo. To preziranje nima negativnih posledic (čeprav se polje potem ne osredotoči).
Preverjanje vnosov
Do sedaj vnosov v obrazce z osnovnimi sredstvi HTML ni bilo mogoče preveriti. Če smo želeli na primer preveriti, ali je uporabnik v obrazec dejansko vnesel e-poštni naslov, smo običajno morali za to uporabiti JavaScript ali PHP. V HTML5 takšne "vragolije" niso več potrebne. Ker HTML zdaj prinaša preverjanje s pomočjo odobritvenega vmesnika. In ta ima precej učinka. Zelo malo truda je zdaj mogoče vnos v obrazcih preverjati.
HTML5 vsebuje nekaj pravil, ki določajo, na kakšen način se polja preverjajo. Na primer se polja tipa email preverjajo, ali je bil vnešen e-poštni naslov z ustrezno sintakso.
• url - Preverjanje URL-ja
• email - Preverjanje e-poštne naslov
• range - Preverjanje plavajoče številke
• number - Preverjanje plavajoče številke
Da označimo polje kot obvezno polje, mu dodelimo atribut required.
<input id="vname" name="vname" type="text" required="required" />
Pole, označeno s tem, mora biti izpolnjeno, zato ne sme biti prazno.
Vendar bodite pozorni: Da se polja preverijo, morajo biti izpolnjeni določeni pogoji.
• Elementu je treba dodeliti atribut name.
• Element mora biti znotraj elementa form, torej se mora nahajati v obrazcu HTML. Lahko pa se povežete tudi z obrazcem prek atributa form.
• Element ne sme imeti atributa readonly ali disabled.
Pravilna uporaba bi bila torej takšna:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Tukaj bi brskalnik preveril, ali je polje izpolnjeno. Če je polje prazno in ga poskušate vseeno poslati obrazec, bi moral brskalnik zdaj prikazati sporočilo o napaki.
V tej seriji je bilo že večkrat omenjeno o vrstah polj obrazcev email, range, number, tel in url. Ta polja niso preverjena samo glede na to, ali vsebujejo vrednost, ampak tudi, ali je vnesena vrednost pravilna.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Pri poljih tipa email se na primer preveri, ali je vnesena vrednost dejansko veljaven e-poštni naslov. Če temu ni tako, bo brskalnik prikazal sporočilo o napaki.
Za izpis napake so odgovorni brskalniki.
Ne dovolite samodejnega preverjanja polj
Samodejna validacija vnosov ni vedno zaželena. Če želite preprečiti, da bi se celoten obrazec preverjal, obrazcu dodelite atribut novalidate.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Podobno lahko atribut formnovalidate dodamo gumbu za pošiljanje. To je na primer zanimivo, kadar hkrati s gumbom za pošiljanje ponujate gumb za shranjevanje obrazca.
<form action="form.cgi" method="post">
<input id="email" name="email" type="email" />
<input type="submit" name="submit" value="Senden" />
<input type="submit"
formnovalidate="formnovalidate" value="Speichern" />
<input type="submit"
formnovalidate="formnovalidate" value="Ausloggen" />
</form>
V tem primeru se obrazec validira samo prek prvega gumba za pošiljanje. Druga dva sta namenjena shranjevanju in odjavi. Validacija v teh primerih ni potrebna.
