Page 1202 - Informatica dalla A a Z

Ad esempio un campo email sarà ritenuto valido solo se il testo inserito dall’utente sarà

effettivamente un indirizzo email formattato correttamente. In caso contrario al submit
del form sarà suggerito all’utente di correggere il testo inserito.
Oltre ai controlli di default ricavati dal tipo di campo input, è possibile specificare l’attributo
“pattern” secondo regole di compilazione personalizzate. Ad esempio
CAP: <input type=“number” name=“cap” pattern=“[0-9]{5}”>
Dove l’espressione regolare [0-9]{5} rappresenta un numero composto da cinque cifre.

Qualora il valore inserito nel campo non rispettasse tale regola, apparirebbe una notifica.
Oppure questa in cui un’espressione verifica che la password inserita contenga almeno una
lettera maiuscola, una lettera minuscola e un numero:
(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$
Per inibire tali controlli è sufficiente associare al tag <form> l’attributo novalidate.
Molti campi di ricerca, e non solo, suggeriscono all’utente come completare la digitazione
proponendo una lista di opzioni plausibili, grazie all’attributo autocomplete e al tag <data-
list>. Oltre ai valori on e off che controllano il comportamento, è possibile specificare ulte-

riormente il tipo di input previsto, per dare ai browser la possibilità di guidare meglio
l’utente.
Una possibilità alternativa è quella di specificare una lista di voci che il browser potrà uti-
lizzare come sorgente diretta per i suggerimenti proposti, utilizzando il tag <datalist>:
<datalist id=“colori”>
<option value=“giallo”>Giallo</option>
<option value=“rosso” >Rosso</option>

<option value=“verde”>Verde</option>
...
</datalist>
<input type=“text” name=“colore” list=“colori”>
Per velocizzare l’input dell’utente, può essere utile fare in modo che al caricamento della
pagina, il focus sia già su un determinato campo di input. Per controllare questo compor-
tamento è sufficiente specificare l’attributo autofocus nel campo cui si vuole dare questa
priorità.

<input type= “search” name= “s” autofocus><input type= “submit”>
L’attributo form permette di inserire in un qualsiasi punto del documento, un controllo da
associare al modulo, anche se il tag non si trova fisicamente nidificato all’interno del rela-
tivo tag <form>.
<form id="modulo">
<input type="text" name="a">

<input type="text" name="b">
<input type="text" name="c">
</form>
Oltre ai campi dedicati all’inserimento di dati, sono previsti anche alcuni tag specifici per
fornire un feedback.

1198