La funzione di completamento automatico è diventata una caratteristica molto apprezzata su Internet. Se si digita qualcosa in un campo di un modulo, i browser - se la funzione è attivata e supportata dal browser - offrono una lista di suggerimenti di parole
Simili applicazioni possono essere implementate facilmente. Per farlo, è sufficiente assegnare all'elemento input l'attributo autocomplete.
<input type="text" autocomplete="on" />
Impostando il valore on, il completamento automatico per il campo viene attivato. Da quel momento in poi, il browser memorizzerà i valori inseriti nel campo e li offrirà successivamente tramite un menu a discesa. In questo modo è possibile compilare i moduli molto più rapidamente.
Tuttavia, questo comportamento potrebbe non essere desiderato per tutti i campi. In tali casi, è possibile disattivare esplicitamente il completamento automatico. Per farlo, è sufficiente assegnare all'attributo autocomplete il valore off.
<input type="text" autocomplete="off" />
In alternativa è possibile aggiungere l'attributo autocomplete anche all'elemento form. A seconda che venga utilizzato il valore on o off, la funzione di completamento automatico per l'intero modulo verrà attivata o disattivata.
<form autocomplete="on"> .. </form>
Tuttavia, se vengono fornite indicazioni contrastanti all'interno del modulo, queste avranno la precedenza.
<form autocomplete="on"> Nome: <input type="text" name="cognome" autocomplete="off" /><br /> Cognome: <input type="text" name="nome" /><br /> CAP: <input type="text" name="cap" /><br /> Città: <input type="text" name="città" /> </form>
In questo esempio, il completamento automatico verrebbe applicato a tutti i campi del modulo, poiché nel primo elemento form è stato impostato il valore di autocomplete su on. L'eccezione in questo caso è solo il campo cognome, in quanto in questo campo il completamento automatico è stato disattivato esplicitamente.
Per far funzionare il completamento automatico, questa funzionalità deve essere supportata dal browser specifico e non deve essere disabilitata. Inoltre, verranno mostrati nella lista dei suggerimenti solo i valori precedentemente inseriti.
Per poter influenzare veramente i valori nella lista dei suggerimenti, è stato introdotto l'elemento datalist in HTML5. Questo elemento non produce un output visibile nel browser. Attraverso gli elementi figli option è possibile definire i valori per le liste di suggerimenti. Di seguito un esempio:
<div> Lingua: <br /> <input type="text" autocomplete="on" list="lingua" /> </div> <datalist id="lingua"> <option value="HTML5"></option> <option value="XHTML"></option> <option value="PHP"></option> <option value="JavaScript"></option> </datalist>
Attraverso l'attributo list dell'elemento input viene stabilita una connessione logica tra il campo di input e l'elemento datalist. Per fare ciò, è necessario utilizzare gli stessi valori per list e per l'attributo id dell'elemento datalist.
Impostare il Focus
È possibile assegnare automaticamente il focus a un campo del modulo quando la pagina viene caricata. Una funzionalità del genere è nota, ad esempio, dalla homepage di Google. Quando si accede a quella pagina, è possibile digitare immediatamente il termine di ricerca, senza dover posizionare manualmente il cursore nel campo di ricerca/input.
In HTML5 è presente l'attributo autofocus per questi casi. Questo attributo fa sì che il campo del modulo dotato di esso ottenga automaticamente il focus al caricamento della pagina.
Di seguito un esempio:
<form> <input name="campoRicerca" autofocus="autofocus" /> <input type="submit" value="Cerca" /> </form>
I browser che non conoscono l'attributo autofocus lo ignorano semplicemente. Questo non comporta conseguenze negative. (Tuttavia, in tal caso il campo non verrà messo a fuoco).
Verifica delle Input
Fino ad ora, con HTML di base, non era possibile verificare le input dei moduli. Ad esempio, se si volesse controllare se un utente ha effettivamente inserito un indirizzo email in un campo del modulo, solitamente si faceva ricorso a JavaScript o PHP. In HTML5, tali "acrobazie" non sono più necessarie. Poiché HTML ora include un'API di validazione. E questa è piuttosto efficace. Con molto poco sforzo è possibile verificare le input dei moduli.
HTML5 contiene alcune regole che definiscono come i campi devono essere validati. Ad esempio, i campi di input del tipo email vengono validati per assicurarsi che sia stato inserito un indirizzo email sintatticamente corretto.
• url - Verifica l'URL
• email - Verifica l'indirizzo email
• range - Verifica il numero in virgola mobile
• number - Verifica il numero in virgola mobile
Per indicare un campo come obbligatorio, viene assegnato l'attributo required ad esso.
<input id="vname" name="vname" type="text" required="required" />
Un campo contrassegnato in questo modo deve essere compilato, quindi non può essere vuoto.
Ma attenzione: affinché i campi vengano convalidati, devono essere soddisfatte determinate condizioni.
• All'elemento deve essere assegnato l'attributo name.
• L'elemento deve trovarsi all'interno di un elemento form, quindi deve essere presente in un modulo HTML. In alternativa, la connessione al modulo può anche essere stabilita tramite l'attributo form.
• L'elemento non deve avere gli attributi readonly o disabled.
Quindi, un'applicazione corretta sarebbe la seguente:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
In questo caso, il browser verificherà se il campo è stato compilato. Se il campo è vuoto e si cerca comunque di inviare il modulo, il browser dovrebbe visualizzare un messaggio di errore.
Nel corso di questa serie è stato già più volte menzionato che i tipi di campo del modulo email, range, number, tel e url vengono utilizzati. Questi campi non vengono solo controllati per la presenza di un valore, ma anche per la correttezza del valore inserito.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Ad esempio, nei campi di tipo email viene controllato se il valore inserito è effettivamente un indirizzo email corretto dal punto di vista sintattico. Se non è così, il browser visualizzerà un messaggio di errore.
La visualizzazione del messaggio di errore è responsabilità dei browser.
Non convalidare automaticamente i campi
Non sempre è desiderabile una convalida automatica delle voci inserite. Se si desidera impedire la convalida dell'intero modulo, si attribuisce all'elemento di apertura form l'attributo novalidate.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
In alternativa, è possibile aggiungere l'attributo formnovalidate a un pulsante di invio. È interessante ad esempio quando si offre contemporaneamente un pulsante per inviare il modulo e un pulsante per salvare temporaneamente il modulo.
<form action="form.cgi" method="post">
<input id="email" name="email" type="email" />
<input type="submit" name="submit" value="Invia" />
<input type="submit"
formnovalidate="formnovalidate" value="Salva" />
<input type="submit"
formnovalidate="formnovalidate" value="Disconnetti" />
</form>
In questo caso, il modulo verrà convalidato solo tramite il primo pulsante di invio. Gli altri due serviranno per salvare e disconnettere. In questi casi non è necessaria alcuna convalida.
