Dall'archivio script > HTML5

Gestire l'autocompletamento dei form con HTML5

di Matteo CasatiMatteo Casati,

I browser aiutano l'utente nel processo di inserimento dati in un form ricordando e suggerendo i valori precedentemente immessi.
Ad esempio, acquistando un prodotto o un servizio, vengono richiesti i dati di spedizione e il browser consente di ridurre il tempo necessario per l'inserimento proponendo automaticamente i dati anagrafici e l'indirizzo usati in precedenza, anche presso altri fornitori.
Ogni browser usa un proprio criterio per determinare se riutilizzare un dato salvato ma l'approccio più comune consiste nel verificare la corrispondenza dell'attributo name dei campi.
Generalmente la funzione di autocompletamento è un vantaggio per l'utente e non fa alcuna differenza sostanziale per l'applicazione ma ci possono essere dei casi in cui si voglia forzare il visitatore a inserire ex novo i dati richiesti; in questi casi è possibile indicare al browser di disattivare i suggerimenti impostando per l'attributo autocomplete del form il valore off come mostrato nell'esempio seguente:

<!doctype html>
<html>
  <head>
    <title>HTML5Italia.com</title>
  </head>
  <body>
    <form autocomplete="off" method="post" action="#">
      <input type="text" name="name">
      <input type="text" name="address">
      <input type="email" name="email">
      <input type="submit" value="Invia">
    </form>
  </body>
</html>

L'attributo autocomplete ammette due valori: off (come mostrato nell'esempio precedente) e on (valore di default).

È possibile modificare il comportamento di un singolo campo (anziché dell'intero form) applicando l'attributo direttamente al controllo di tipo input come mostrato nell'esempio seguente:

<!doctype html>
<html>
  <head>
    <title>HTML5Italia.com</title>
  </head>
  <body>
    <form autocomplete="off" method="post" action="#">
      <input type="text" name="name">
      <input type="text" name="address">
      <input type="email" name="email" autocomplete="on">
      <input type="submit" value="Invia">
    </form>
  </body>
</html>

In questo caso l'autocompletamento è disattivato per tutti i controlli (in quanto impostato a livello di form a "off") tranne che per il campo email (che sovrascrive esplicitamente con "on" il valore impostato dal form).

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi