Az automatikus kitöltés funkciója ma már egy kedvelt szolgáltatás az interneten. Ha valaki beír valamit egy űrlapmezőbe, a böngészők - ha a funkció be van kapcsolva és a böngésző támogatja - egy lista szótanácsokat kínálnak.
<input type="text" autocomplete="on" />
Az ilyen alkalmazások mostantól nagyon könnyen megvalósíthatók. Ehhez az input-elemhez rendeljük az autocomplete attribútumot.
<input type="text" autocomplete="off" />
Választásával az on érték bekapcsolja a mező automatikus kitöltését. Ezután a böngésző megjegyzi a mezőbe bevitt értékeket, majd később egy választási listán keresztül kínálja azokat. Így a űrlapok kitöltése sokkal gyorsabb lesz.
Ez a viselkedés azonban nem minden mezőnél kívánatos. Ilyen esetekben az automatikus kitöltés explicit módon kiiktatható. Ehhez az autocomplete attribútumhoz az off értéket kell hozzárendelni.
<input type="text" autocomplete="off" />
Ezzel szemben az form-elemhez is hozzá lehet adni az autocomplete attribútumot. Attól függően, hogy itt az on vagy az off értéket használjuk, az automatikus kitöltés funkció a teljes űrlapon be vagy kikapcsolható.
<form autocomplete="on"> .. </form>
Mindenesetre, ha ellentétes utasítások szerepelnek az űrlapon belül, azok lesznek az irányadóak.
<form autocomplete="on"> Név: <input type="text" name="vname" autocomplete="off" /><br /> Keresztnév: <input type="text" name="nname" /><br /> Irányítószám: <input type="text" name="plz" /><br /> Hely: <input type="text" name="ort" /> </form>
Ebben a példában az automatikus kitöltés minden űrlapmezőre vonatkozna, mivel az bevezető form-elemre az autocomplete attribútumnak az on értéke lett beállítva. Kivételt képez csak a vname mező. Mivel ebben a mezőben az automatikus kitöltés explicit módon letiltásra került.
Az automatikus kitöltés működéséhez ezt a funkciót támogatnia kell a kiválasztott böngészőnek és nem szabad letiltva lennie. Ezenkívül a javaslatlistában csak azok az értékek jelennek meg, amelyek korábban már egyszer be lettek írva.
Hogy valóban befolyásolni lehessen az értékeket a javaslatlistában, az HTML5-ben bevezetésre került a datalist-elem. Ez az elem nem jelent látható kimenetet a böngészőben. Az alárendelt option-elemek segítségével definiálhatók az érték listákhoz. Egy példa:
<div> Nyelv: <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>
A list attribútum segítségével logikai kapcsolatot hozunk létre az input-elem és a datalist-elem között. Ehhez azonos értékeket kell használni a list-nál és a datalist-elem id attribútumánál.
Focus megadása
Egy űrlapmező automatikusan kap fókuszt, amikor az oldalt betöltik. Egy ilyen funkciót például a Google kezdőoldaláról is ismerhetsz. Ha ezt az oldalt betöltöd, azonnal be tudsz írni egy keresési kifejezést, anélkül hogy előtte manuálisan beállítanád a kurzort a keresés/beviteli mezőbe.
A HTML5-ben ilyen esetekre az autofocus attribútum van. Ez az attribútum az oldal betöltésekor automatikusan fókuszt helyez azzal felruházott űrlapmezőre.
Példa:
<form> <input name="suchfeld" autofocus="autofocus" /> <input type="submit" value="Keresés" /> </form>
A böngészők, amelyek nem ismerik a autofocus attribútumot, egyszerűen figyelmen kívül hagyják. Eznek az elhanyagolásnak nincs negatív hatása. (Bár ekkor természetesen a mező nem lesz fókuszban).
Bevitel ellenőrzése
Korábban HTML-saját eszközökkel nem lehetett ellenőrizni az űrlapbevitelt. Ha például azt akartuk megnézni, hogy valóban beírt-e egy felhasználó egy e-mail címet egy űrlapmezőbe, általában JavaScriptre vagy PHP-ra támaszkodtunk. Ezek a "trükkök" már nem szükségesek az HTML5-ben. Mert mostantól az HTML tartalmaz egy validációs API-t. És ez elég nagy dolog. Nagyon kis erőfeszítéssel ellenőrizhetők az űrlapbevitel.
<input id="vname" name="vname" type="text" required="required" />
Egy ezzel jelölt mezőt ki kell tölteni, tehát nem lehet üres.
De vigyázat: A mezőket validáláshoz bizonyos feltételeknek kell teljesülniük.
• A name attribútumot meg kell adni az elemnek.
• Az elemnek egy form elemen belül kell lennie, vagyis egy HTML űrlapon belül kell elhelyezkednie. Alternatívaként a kapcsolat az űrlappal a form attribútumon keresztül is létrehozható.
• Az elemnek nem szabad a readonly vagy a disabled attribútummal rendelkeznie.
Tehát a helyes alkalmazás így nézne ki:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Ebben az esetben a böngésző ellenőrzi, hogy a mező ki lett-e töltve. Ha a mező üres, és mégis megpróbálják elküldeni az űrlapot, akkor a böngészőnek most hibaüzenetet kellene megjelenítenie.
Ennek a sorozatnak a folyamán már többször is utaltunk az űrlapmező típusokra, mint például az email, range, number, tel és url. Ezek a mezők nemcsak azt ellenőrzik, hogy tartalmaznak-e értéket, hanem azt is, hogy az azonosított érték helyes-e.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Például az email típusú mezőknél ellenőrzik, hogy valóban helyes-e a beírt érték egy szintaktikailag helyes e-mail cím. Ha ez nem stimmel, a böngésző hibaüzenetet fog kiadni.
A hibaüzenet kimeneteléért a böngészők felelősek.
Mezők automata validálásának tiltása
Nem minden esetben kívánatos a beviteli mezők automatikus validálása. Ha megakarjuk akadályozni az egész űrlap validálását, akkor a nyitó form elemnek hozzá kell rendelni a novalidate attribútumot.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Alternatívaként a formnovalidate attribútumot hozzá lehet adni egy küldés gombhoz. Ez például akkor érdekes, ha egy küldés gomb mellett egy gombot is kínálunk az űrlap ideiglenes mentésére.
<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="Kijelentkezés" />
</form>
Ebben az esetben az űrlapot csak az első küldés gombbal validálják. A másik két gomb viszont a mentést és a kijelentkezést szolgálja. Ezekben az esetekben a validálás nem szükséges.
