Funcția completării automate a devenit între timp o funcționalitate binevenită pe internet. Dacă se introduce ceva într-un câmp de formular, browserele - dacă funcția este activată și este suportată de browser - afișează o listă de sugestii de cuvinte.
Astfel de aplicații pot fi implementate acum foarte ușor. Pentru acest lucru, se atribuie elementului input atributul autocomplete.
<input type="text" autocomplete="on" />
Prin valoarea on se activează completarea automată pentru câmp. De acum înainte, browserul își amintește valorile introduse în câmp și le oferă ulterior printr-o listă de selectare. Astfel, formularele pot fi completate mult mai rapid.
Nu toate câmpurile doresc acest comportament. În aceste cazuri, completarea automată poate fi dezactivată explicit. Pentru aceasta, atributului autocomplete i se atribuie valoarea off.
<input type="text" autocomplete="off" />
Ca alternativă, se poate adăuga atributul autocomplete elementului form. În funcție de faptul dacă aici se folosește valoarea on sau off, funcția completării automate se activează sau se dezactivează pentru întregul formular.
<form autocomplete="on"> .. </form>
Însă, în cazul în care sunt făcute indicații opuse în cadrul formularului, acestea au prioritate.
<form autocomplete="on"> Nume: <input type="text" name="vname" autocomplete="off" /><br /> Prenume: <input type="text" name="nname" /><br /> Cod poștal: <input type="text" name="plz" /><br /> Oraș: <input type="text" name="ort" /> </form>
În acest exemplu, completarea automată ar fi aplicată tuturor câmpurilor de formular, deoarece valoarea atribuită lui autocomplete în elementul form este on. Excepția este doar câmpul vname. Pentru acest câmp, completarea automată a fost dezactivată explicit.
Pentru ca completarea automată să funcționeze, această funcție trebuie să fie suportată de browser-ul respectiv și nu trebuie să fie dezactivată. În plus, în lista de sugestii se afișează doar valorile care au fost introduse deja o dată.
Pentru a avea cu adevărat influență asupra valorilor din lista de sugestii, s-a introdus cu HTML5 elementul datalist. Acest element nu are o ieșire vizibilă în browser. Prin intermediul elementelor subordonate option se pot defini valorile pentru listele de sugestii. Un exemplu:
<div> Limbă: <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>
Prin atributul list al elementului input se stabilește o conexiune logică între câmpul de introducere și elementul datalist. Pentru aceasta, la list și la atributul id al elementului datalist trebuie să fie folosite aceleași valori.
Setarea focusului
Unui câmp de formular îi poate fi atribuit automat focusul atunci când pagina este accesată. O astfel de funcție o cunoașteți, de exemplu, de pe pagina de start a Google. Cand se accesează acea pagină, puteți introduce imediat termenul de căutare, fără să setați manual cursorul anterior în câmpul de căutare.
În HTML5 există pentru astfel de cazuri atributul autofocus. Acest atribut asigură faptul că câmpul de formular echipat cu acesta primește automat focusul la încărcarea paginii.
Un exemplu:
<form> <input name="campCautare" autofocus="autofocus" /> <input type="submit" value="Caută" /> </form>
Browser-ele care nu recunosc atributul autofocus îl ignoră pur și simplu. Acest lucru nu are efecte negative. (Cu toate acestea, atunci, desigur, câmpul nu primește focusul).
Verificarea intrărilor
Până acum, intrările în formulare nu puteau fi verificate doar cu facilitățile HTML. Dacă doreați, de exemplu, să testați dacă un utilizator a introdus efectiv o adresă de e-mail într-un câmp de formular, de obicei recurgeați la JavaScript sau PHP. În HTML5, astfel de "exerciții de echilibru" nu mai sunt necesare. De acum încolo, HTML-ul vine cu o API de validare. Și aceasta are un impact semnificativ. Cu foarte puțin efort, intrările în formulare pot fi verificate acum.
HTML5 are câteva reguli prin care se stabilește modul în care câmpurile sunt validate. Astfel, de exemplu, câmpurile de introducere de tip email sunt verificate pentru a vedea dacă a fost introdusă o adresă de e-mail corectă din punct de vedere sintactic.
• url - Verificare URL
• email - Verificare adresă de e-mail
• range - Verificare număr zecimal
• number - Verificare număr zecimal
Pentru a marca un câmp ca fiind obligatoriu, i se atribuie atributul required.
<input id="vname" name="vname" type="text" required="required" />
O câmp marcat trebuie completat, deci nu poate fi gol.
Dar atenție: Pentru validarea câmpurilor, anumite condiții trebuie să fie îndeplinite.
• Elementului trebuie să i se atribuie atributul name.
• Elementul trebuie să fie situat în cadrul unui element form, adică să se afle într-un formular HTML. Alternativ, conexiunea la formular poate fi stabilită și prin atributul form.
• Elementul nu trebuie să aibă nici atributul readonly, nici disabled.
O aplicare corectă ar arăta așa:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Aici browser-ul va verifica dacă câmpul este completat. Dacă câmpul este gol și totuși se încearcă trimiterea formularului, browser-ul ar trebui să afișeze acum un mesaj de eroare.
Pe parcursul acestui șir de lecții s-a subliniat de mai multe ori tipurile de câmpuri de formular email, range, number, tel și url. Aceste câmpuri nu sunt verificate doar pentru a vedea dacă conțin o valoare, ci și dacă valoarea introdusă este corectă.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Prin urmare, în cazul câmpurilor de tip email de exemplu, se verifică dacă valoarea introdusă este într-adevăr o adresă de email corectă din punct de vedere sintactic. Dacă nu este cazul, browser-ul va afișa un mesaj de eroare.
Pentru afișarea mesajului de eroare sunt responsabile browserele.
Câmpuri care nu sunt validate automat
Nu în toate cazurile se dorește validarea automată a introducerii datelor. Dacă se dorește să se oprească validarea întregului formular, se atribuie elementului form inițial atributul novalidate.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
În mod alternativ, atributul formnovalidate poate fi adăugat unui buton de trimitere. Acest lucru este interesant de exemplu atunci când, în paralel cu un buton de trimitere, se oferă un buton pentru salvarea formularului în memorie.
<form action="form.cgi" method="post">
<input id="email" name="email" type="email" />
<input type="submit" name="submit" value="Trimitere" />
<input type="submit"
formnovalidate="formnovalidate" value="Salvare" />
<input type="submit"
formnovalidate="formnovalidate" value="Deconectare" />
</form>
În acest caz, formularul va fi validat doar prin intermediul primului buton de trimitere. Celelalte două servesc la salvare și deconectare. Validarea nu este necesară în aceste situații.
