Automātiskās ievades palīglīnijas funkcija ir kļuvusi par laipni gaidītu funkciju internetā. Ievadot kaut ko veidlapas laukā, pārlūkiem - ja funkcija ir aktivizēta un tiek atbalstīta pārlūkprogrammā - tiek piedāvāta vārdu saraksta ieteikumu saraksts.
Līdzīgas lietojumprogrammas tagad ir iespējams ļoti viegli ieviest. To izdarot, input-elementam jānorāda atribūts autocomplete.
<input type="text" autocomplete="on" />
Šāda uzvedība nav vēlama visos gadījumos. Šādos gadījumos ievades palīglīniju var izslēgt. To var izdarīt, piešķirot atribūtam autocomplete vērtību off.
<input type="text" autocomplete="off" />
autocomplete form-elementam, jeļ vērtība izmantojam on vai off, tā aktivizē vai deaktivizē automātisko aizpildīšanas funkciju visai formai.
<form autocomplete="on"> .. </form>
<form autocomplete="on"> Vārds: <input type="text" name="vards" autocomplete="off" /><br /> Uzvārds: <input type="text" name="uzvards" /><br /> Pasta indekss: <input type="text" name="pvsk" /><br /> Pilsēta: <input type="text" name="pilseta" /> </form>
form-elementā autocomplete vērtība ir uzstādīta uz on. Izņēmums ir tikai vards-lauks. Jo šim laukam ir izslēgta automātiskā aizpildīšana.
Lai tiešām varētu ietekmēt vērtības ieteikumu sarakstā, HTML5 ieviesa datalist-elementu. Šis elements neizraisa pārlūkā redzamu izvadi. Pārdatu elementu palīdzība var noteikt vērtības ieteikumu sarakstiem. Piemērs:
<div> Valoda: <br /> <input type="text" autocomplete="on" list="valoda" /> </div> <datalist id="valoda"> <option value="HTML5"></option> <option value="XHTML"></option> <option value="PHP"></option> <option value="JavaScript"></option> </datalist>
Ar list-atribūta palīdzību input-elementam tiek izveidots loģisks savienojums starp ievades lauku un datalist-elementu. Lai to paveiktu, list un datalist-elements id-atribūtā ir jāizmanto vienādi vērtības.
Iestatīt uzsvaru
Veidlapas laukam automātiski var piešķirt uzsvaru, ja lapu atvēršanas brīdī. Tādu funkciju jūs, piemēram, zināt no Google sākumlapas. Atverot šo lapu, jūs varat uzreiz ievadīt meklēšanas frāzi, nešķirot iepriekš manuāli ievades lauku.
HTML5 piedāvā šādām situācijām autofocus-atribūtu. Šis atribūts nodrošina, ka, ielādējot lapu, lauciņam, ar ko tas ir aprīkots, automātiski tiek piešķirts uzsvars.
Piemērs:
<form> <input name="meklētājlauciņš" autofocus="autofocus" /> <input type="submit" value="Meklēt" /> </form>
Ja pārlūkprogramma neatpazīst autofocus-atribūtu, tā to vienkārši ignorē. Šī ignorēšana neietekmē negatīvi. (Lai gan tad, protams, lauciņš netiks uzsākts).
Ievades pārbaude
Līdz šim HTML rīki vienatnē neļāva veikt formas ievades pārbaudi. Ja jums bija nepieciešams, piemēram, pārbaudīt, vai lietotājs patiešām ir ievadījis e-pasta adresi veidlapas laukā, parasti šādu darbību veicāt izmantojot JavaScript vai PHP. HTML5 šādus "somersaults" vairs neprasa. Jo tagad HTML piedāvā validācijas API. Un tas noteikti ir ievērojams. Ar ļoti mazu darbību var veikt formas ievades pārbaudi.
HTML5 ir dažas likmes, kas nosaka, kā veicami lauku validācijas. Piemēram, ievades laukus, kas ir no satura tipa email uz priekšu tiks pārbaudīti, vai tajā ievadīta sintaktiski pareiza e-pasta adrese.
• url – Pārbaudit uz URL
• email – Pārbaudit uz e-pasta adresi
• range – Pārbaudit uz plūdošu punktu
• number – Pārbaudit uz plūdošu punktu
Lai iekrāsu lauku iezīmētu kā obligātu lauku, tai ir jāpiešķir atribūts required.
<input id="vname" name="vname" type="text" required="required" />
Lauks, kas atzīmēts ar šo, ir jāaizpilda, tātad tas nedrīkst būt tukšs.
Taču uzmanību: Lai lauki tiktu validēti, ir jāatzīmē noteiktas prasības.
• Elementam jābūt piešķirtam atribūtu name.
• Elements jābūt iekš form-elementa, jābūt HTML formā. Vai arī saistība ar veidlapu var tikt izveidota, izmantojot atribūtu form.
• Elementam nedrīkst būt atribūtiem readonly vai disabled.
Pareiza piemērošana būtu šāda:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Šeit pārlūks pārbaudīs, vai lauks ir aizpildīts. Ja lauks ir tukšs, un tomēr tiek mēģināts iesniegt veidlapu, pārlūkam tagad vajadzētu rādīt kļūdas paziņojumu.
Šī sērija jau vairākas reizes ir norādījusi uz veidlapas lauku tipiem email, range, number, tel un url. Šie lauki netiek tikai pārbaudīti, vai tiem ir vērtība, bet arī vai ievadītā vērtība ir pareiza.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Tādējādi, piemēram, laukiem ar tipu email tiks pārbaudīts, vai ievadītā vērtība ir syntaktiski pareiza e-pasta adrese. Ja tā nav, pārlūks izvadīs kļūdas paziņojumu.
Kļūdas paziņojumu izvadīšanai ir atbildīgi pārlūki.
Laukus neļaut pārbaudīt automātiski
Ne vienmēr ir vēlams automātiska ievadu validācija. Lai novērstu visu veidlapas ievadu validāciju, sākuma form-elementam piešķir atribūtu novalidate.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Kā alternatīvu ir iespējams pievienot atribūtu formnovalidate iesniegšanas pogai. Tas ir noderīgi, piemēram, ja paralēli sūtīšanas pogai tiek piedāvāta pogai veidlapas saglabāšanai.
<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="Izrakstīties" />
</form>
Šajā gadījumā veidlapa tiks validēta tikai ar pirmo Nosūtīt pogu. Otrās divas ir paredzētas datu saglabāšanai un izrakstīšanai. Šajos gadījumos validācija nav nepieciešama.
