Automaatne täiendusfunktsioon on muutunud internetis väga populaarseks funktsiooniks. Kui vormivälja midagi sisestatakse, pakuvad brauserid - kui funktsioon on aktiveeritud ja brauser toetab seda - sõnavalikute loendit.
Selliseid rakendusi saab nüüd väga lihtsalt rakendada. Selleks tuleb määrata input-elemendile atribuut autocomplete.
<input type="text" autocomplete="on" />
Väärtuse on abil lülitatakse funktsioon vormivälja jaoks sisse. Nüüd mäletab brauser sisestatud väärtusi ja pakub neid hiljem valikute loendi abil. Nii saab vorme täita oluliselt kiiremini.
Kuid mitte igas väljas ei soovita seda käitumist. Sellistel juhtudel võib automaatse täienduse spetsiaalselt välja lülitada. Selleks määratakse autocomplete-atribuudile väärtus off.
<input type="text" autocomplete="off" />
Alternatiivselt saab ka form-elemendile lisada autocomplete-atribuudi. Sõltuvalt sellest, kas kasutatakse väärtust on või off, lülitatakse funktsioon kogu vormi jaoks sisse või välja.
<form autocomplete="on"> .. </form>
Kui vormis tehakse vasturääkivad märked, siis need aga kehtivad.
<form autocomplete="on"> Nimi: <input type="text" name="vname" autocomplete="off" /><br /> Eesnimi: <input type="text" name="nname" /><br /> Postiindeks: <input type="text" name="plz" /><br /> Asukoht: <input type="text" name="ort" /> </form>
Antud näites rakenduks automaatne täiendus kõikidele vormiväljadele, kuna avamisel määrati form-elemendis attribuudi väärtuseks on. Erandiks on vaid vname-väli. Sest selle välja puhul deaktiveeriti automaatne täiendus spetsiaalselt.
Automaatse täienduse töötamiseks peab see funktsioon olema toetatud vastavast brauserist ega tohi olla deaktiveeritud. Lisaks kuvatakse valikute loendis ainult need väärtused, mis on varem juba korra sisestatud.
Et tegelikult kujundada valikute loendis olevaid väärtusi, tutvustati HTML5-s datalist-element. See element ei paku brauseris nähtavat väljundit. Valikute loendite väärtused saab määrata alamkomponentide option-elementide abil. Näide:
<div> Keel: <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>
Input-elemendi list-atribuudi kaudu luuakse loogiline seos sisestusvälja ja datalist-elemendi vahel. Selleks tuleb kasutada väärtusi, mis on id atribuudil datalist-elemendis list ja id korral.
Etteanne
Vormiväljale saab automaatselt määrata fookuse, kui leht avatakse. Selline funktsioon on teile tõenäoliselt tuttav näiteks Google'i avalehelt. Kui see leht on avatud, saab kohe sisestada otsingusõna, ilma et peaksime eelnevalt kursorit otsingus/sisestusvälja käsitsi seadma.
HTML5-s on selleks autofocus-atribuut. See atribuut määrab, et lehel laadimisel saab sellele varustatud vormiväljale automaatselt fookus määrata.
Näiteks:
<form> <input name="suchfeld" autofocus="autofocus" /> <input type="submit" value="Suche" /> </form>
Brauserid, mis ei tunne ära autofocus-atribuuti, ignoreerivad seda lihtsalt. Selle ignoreerimise negatiivseid tagajärgi ei ole. (Kuigi see tähendab muidugi, et väli ei saa keskenduda.)
Sisendite kontrollimine
Siiamaani ei saanud vormisisendeid ainult HTML-i abil kontrollida. Seega kui näiteks soovisite kontrollida, kas kasutaja sisestas vormivälja tõepoolest e-posti aadressi, oli tavaliselt vaja selleks kasutada JavaScripti või PHP-d. HTML5-s pole sellised "võimlemised" enam vajalikud. Kuna HTML toob nüüd kaasa valideerimise API. Ja see on üsna võimas. Väga väikese vaevaga saab nüüd vormisisendeid kontrollida.
HTML5-l on mõned reeglid, mis määravad, kuidas välju valideeritakse. Näiteks kontrollitakse email-tüüpi sisestusvälju, kas sisestati süntaksilt õige e-posti aadress.
• url - URL-i kontroll
• email - E-posti aadressi kontroll
• range - Detsimaalarvu kontroll
• number - Detsimaalarvu kontroll
Et välja määrata kui kohustuslik välja on, määratakse sellele atribuut required.
<input id="vname" name="vname" type="text" required="required" />
Väli, millele see märge antakse, peab olema täidetud, seega ei tohi olla tühi.
Kuid silmas peab pidama: Et väljad valideeritakse, peavad olema täidetud teatud eeldused.
• Elemendile tuleb anda name-atribuut.
• Element peab asuma form-elemendi sees, seega HTML-vormis. Alternatiivselt võib ühendus vormiga luua ka atribuudi form abil.
• Elemendil ei tohi olla atribuute readonly ega disabled.
Õige rakendus oleks seega järgmine:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Siin kontrolliks brauser, kas väli on täidetud. Kui väli on tühi ja üritatakse siiski vormi esitada, peaks brauser nüüd väljastama veateate.
Selle loengu jooksul on juba mitu korda mainitud vormiväljade tüüpe email, range, number, tel ja url. Neid välju kontrollitakse mitte ainult selle järgi, kas need sisaldavad väärtust, vaid ka selle järgi, kas sisestatud väärtus on õige.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Seega kontrollitakse email tüüpi väljade puhul näiteks, kas sisestatud väärtus on süntaktiliselt õige e-posti aadress. Kui see pole nii, annab brauser veateate.
Vea sõnumi väljastamise eest vastutavad brauserid.
Välju pole automaatselt valideeritud
Igal juhul ei pruugi olla soovitud automaatset andmete valideerimist. Kui soovite keelata kogu vormi valideerimise, tuleb algsele form-elemendile omistada novalidate atribuut.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Alternatiivina võib formnovalidate atributi lisada saatmisnupule. See on huvitav näiteks siis, kui lisaks saatmise nupule soovitakse pakkuda vormi salvestamise nuppu.
<form action="form.cgi" method="post">
<input id="email" name="email" type="email" />
<input type="submit" name="submit" value="Saata" />
<input type="submit"
formnovalidate="formnovalidate" value="Salvesta" />
<input type="submit"
formnovalidate="formnovalidate" value="Logi välja" />
</form>
Antud juhul valideeritakse vorm ainult esimese saatmisnupu kaudu. Teised kaks on siiski mõeldud salvestamiseks ja välja logimiseks. Neil juhtudel pole valideerimine vajalik.
