Automaattinen täydennys on nykyään suosittu ominaisuus internetissä. Kirjoittamalla jotain lomakkeen kenttään selaimet tarjoavat sanavaihtoehtoja, jos toiminto on aktivoitu ja selain tukee sitä.
Tällaiset sovellukset on nyt erittäin helppo toteuttaa. Tähän tarkoitukseen määritetään input-elementille attribuutti autocomplete.
<input type="text" autocomplete="on" />
Arvolla on automaattinen täydennys aktivoidaan kentälle. Selain alkaa muistamaan kenttään syötetyt arvot ja tarjoaa niitä myöhemmin valitsemislistan kautta. Tällä tavalla lomakkeiden täyttäminen on huomattavasti nopeampaa.
Kuitenkin tämä toiminta ei ole toivottu kaikilla kentillä. Näissä tapauksissa automaattinen täydennys voidaan deaktivoida. Tähän tarkoitukseen määritetään autocomplete-attribuutille arvo off.
<input type="text" autocomplete="off" />
Vaihtoehtoisesti voidaan myös lisätä form-elementtiin autocomplete-attribuutti. Riippuen siitä, käytetäänkö arvoja on vai off, koko lomakkeen automaattinen täydennysaktivointi tai -deaktivointi toteutuu.
<form autocomplete="on"> .. </form>
Jos lomakkeessa on vastakkaisia määrittelyjä, ne kuitenkin korvaavat nämä.
<form autocomplete="on"> Nimi: <input type="text" name="vname" autocomplete="off" /><br /> Etunimi: <input type="text" name="nname" /><br /> Postinumero: <input type="text" name="plz" /><br /> Kaupunki: <input type="text" name="ort" /> </form>
Tässä esimerkissä automaattinen täydennys käytettäisiin kaikkiin lomakkeen kenttiin, koska johdattavassa form-elementissä attribuutti autocomplete on asetettu arvoon on. Poikkeuksena tässä on vain vname-kenttä, jossa automaattinen täydennys on nimenomaisesti deaktivoidtu.
Jotta automaattinen täydennys toimisi, tämän toiminnon on oltava tuettu selaimessa eikä sitä saa olla deaktivoidtu. Lisäksi ehdotetaan luettelossa ainoastaan sellaisia arvoja, jotka on aiemmin syötetty.
Jotta voitaisiin vaikuttaa valintalistan arvoihin, HTML5 toi mukanaan elementin datalist. Tämä elementti ei vaikuta näkyvästi selaimeen. Alitason option-elementtien avulla voidaan määrittää arvot valintalistoille. Esimerkki:
<div> Kieli: <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-elementin list-attribuutin kautta luodaan looginen yhteys syöttökentän ja datalist-elementin välille. Tätä varten list- ja datalist-elementin id-attribuutille on käytettävä samoja arvoja.
Aseta fokus
Lomakkeen kentälle voidaan automaattisesti antaa fokus, kun sivu ladataan. Tämänkaltaista toimintoa voitte nähdä esimerkiksi Googlen etusivulla. Kun sivu ladataan, voit heti alkaa kirjoittamaan hakusanaa ilman että olet ensin manuaalisesti asettanut kursoria hakukenttään.
HTML5:ssä tähän tarkoitukseen on autofocus-attribuutti. Tämä attribuutti varmistaa, että siihen liitetty lomakkeen kenttä saa automaattisesti fokuksen sivun latauksen yhteydessä.
Esimerkki:
<form> <input name="suchfeld" autofocus="autofocus" /> <input type="submit" value="Suche" /> </form>
Selaimet, jotka eivät tunnista autofocus-attribuuttia, yksinkertaisesti ohittavat sen. Tämän ohittamisella ei ole kielteisiä seuraamuksia. (Tällöin tietysti kenttää ei fokusoitu).
Syötteiden tarkistus
Aiemmin lomakkeiden syötteitä ei voitu tarkistaa pelkästään HTML:n ominaisuuksilla. Jos esimerkiksi haluttiin tarkistaa, oliko käyttäjä todella kirjoittanut sähköpostiosoitteen lomakkeeseen, yleensä käytettiin JavaScriptiä tai PHP:ta. HTML5:ssä tällaisiin temppuihin ei enää tarvitse turvautua. HTML:ssä on nyt mukana validointi-API. Ja se tuo mukanaan paljon. Tästä lähtien lomakkeiden syötteitä voidaan tarkistaa hyvin vähällä vaivalla.
HTML5:ssä on joitakin sääntöjä, joiden mukaan kentät validoidaan. Esimerkiksi syöttökentät tyypillä email tarkastetaan, onko niihin syötetty syntaktisesti oikea sähköpostiosoite.
• url – Tarkistaa URL:n
• email – Tarkistaa sähköpostiosoitteen
• range – Tarkistaa liukuluvun
• number – Tarkistaa liukuluvun
Jos kenttä on pakollinen, sille annetaan required-attribuutti.
<input id="vname" name="vname" type="text" required="required" />
Kentällä, joka on varustettu näin, on oltava täytetty eli se ei saa olla tyhjä.
Mutta huomioi: Kenttien tarkistamiseksi on täytettävä tiettyjä edellytyksiä.
• Elementille on annettava name-attribuutti.
• Elementin on oltava form-elementin sisällä eli se on oltava HTML-lomakkeessa. Vaihtoehtoisesti yhteys lomakkeeseen voidaan luoda myös form-attribuutin avulla.
• Elementillä ei saa olla readonly- eikä disabled-attribuuttia.
Oikea käyttö olisi siis seuraava:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Tässä tapauksessa selain tarkistaa, onko kenttä täytetty. Jos kenttä on tyhjä ja siitä yritetään huolimatta lähettää lomake, selaimen tulisi nyt antaa virheilmoitus.
Tässä sarjassa on jo useaan otteeseen mainittu lomakkeiden kenttätyypit email, range, number, tel ja url. Nämä kentät tarkistavat paitsi niiden sisältämän arvon myös sen, onko syötetty arvo oikein.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Esimerkiksi email-kentissä tarkistetaan, onko syötetty arvo syntaktisesti oikeanmuotoinen sähköpostiosoite. Jos näin ei ole, selain antaa virheilmoituksen.
Selaimet ovat vastuussa virheilmoitusten näyttämisestä.
Kenttien automaattisen tarkistuksen estäminen
Ei aina ole toivottavaa, että syötteet tarkistetaan automaattisesti. Jos halutaan estää koko lomakkeen validointi, form-elementille annetaan novalidate-attribuutti.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Vaihtoehtoisesti formnovalidate-attribuutin voi lisätä lähetyspainikkeeseen. Tämä on hyödyllistä esimerkiksi silloin, kun rinnakkain lähettä-painikkeen kanssa tarjotaan lomakkeen väliaikaista tallennuspainiketta.
<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="Kirjaudu ulos" />
</form>
Tässä tapauksessa lomaketta tarkistetaan vain ensimmäisen lähettä-painikkeen kautta. Toiset kaksi palvelevat tallentamista ja uloskirjautumista, eikä validointia tarvita näissä tapauksissa.
