Attributo HTML Autocomplete
Attributo HTML autocomplete: valori on e off, token di compilazione automatica come email e new-password, con note su sicurezza e accessibilità.
L'attributo autocomplete controlla se il browser può compilare automaticamente un campo del modulo per l'utente. Quando è abilitato e l'utente inizia a digitare, il browser suggerisce i valori salvati da invii precedenti (nomi, email, indirizzi e così via) in modo che il campo possa essere completato con un tocco o un clic.
Questa pagina tratta i due valori di base (on e off), i token di compilazione automatica con nome che indicano al browser esattamente che tipo di dato contiene un campo, quando disabilitare l'autocomplete e i compromessi in termini di sicurezza e accessibilità.
Nota: l'attributo autocomplete funziona con i tipi di <input> come text, search, tel, url, password, email, range e color.
Sintassi
Sintassi dell'attributo HTML Autocomplete
<input autocomplete="on|off">È anche possibile usare un token con nome al posto di on/off per descrivere lo scopo esatto del campo:
<input type="email" name="email" autocomplete="email">
<input type="password" name="password" autocomplete="new-password">| Si applica a | Elementi <form> e <input>. |
|---|
Esempio dell'attributo HTML autocomplete:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
</style>
</head>
<body>
<form action="/form/submit" method="get" autocomplete="on">
<div>
<label for="name">Enter Your Name:</label>
<input type="text" name="name" id="name" />
</div>
<div>
<label for="phone">Enter Your Phone Number:</label>
<input type="number" id="phone" name="phone-number" />
<br />
</div>
<input type="submit" value="Send" />
</form>
</body>
</html>Esempio del tag HTML <form> con l'attributo autocomplete impostato su on:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
display: block;
margin-bottom: 10px;
padding: 10px;
}
</style>
</head>
<body>
<form action="/form/submit" autocomplete="on">
<input type="text" name="name" placeholder="Enter your Name" autofocus />
<input type="text" name="surname" placeholder="Enter your Surname" />
<input type="number" name="age" placeholder="Enter your Age" />
<input type="submit" value="Send" />
</form>
</body>
</html>Utilizzo dei token di compilazione automatica con nome
Anziché usare semplicemente on o off, è possibile assegnare a ogni campo un token che descriva che tipo di valore contiene. Il browser proporrà quindi i dati salvati corretti (l'email dell'utente, il suo indirizzo di spedizione, una nuova password che può generare e così via). I token con nome rendono la compilazione automatica molto più precisa rispetto a un generico on.
L'esempio seguente combina un modulo di indirizzo con una sezione di accesso. Si noti autocomplete="email" per il campo email e autocomplete="new-password" per la password di registrazione, che segnala al browser di suggerire una password appena generata anziché una esistente.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
label { display: block; margin-top: 10px; }
input { padding: 8px; width: 240px; }
</style>
</head>
<body>
<form action="/form/submit" method="post" autocomplete="on">
<label for="fullname">Full name</label>
<input type="text" id="fullname" name="fullname" autocomplete="name" />
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email" />
<label for="street">Street address</label>
<input type="text" id="street" name="street" autocomplete="address-line1" />
<label for="city">City</label>
<input type="text" id="city" name="city" autocomplete="address-level2" />
<label for="zip">Postal code</label>
<input type="text" id="zip" name="zip" autocomplete="postal-code" />
<label for="password">Create a password</label>
<input type="password" id="password" name="password" autocomplete="new-password" />
<input type="submit" value="Sign up" />
</form>
</body>
</html>Token di compilazione automatica più comuni
Lo standard HTML definisce più di 50 token di compilazione automatica. La tabella seguente elenca quelli utilizzati più spesso. Per l'elenco completo e autorevole, consultare la specifica WHATWG autofill.
| Token | Scopo del campo |
|---|---|
name | Nome completo |
given-name | Nome di battesimo |
family-name | Cognome |
nickname | Soprannome o nome utente visualizzato |
username | Nome di accesso all'account |
email | Indirizzo email |
tel | Numero di telefono completo |
street-address | Indirizzo stradale completo (su più righe) |
address-line1 | Prima riga dell'indirizzo stradale |
address-line2 | Seconda riga (appartamento, interno) |
address-level2 | Città o comune |
address-level1 | Stato, provincia o regione |
postal-code | Codice postale o CAP |
country | Codice paese (es. IT) |
country-name | Nome del paese |
cc-name | Nome stampato sulla carta di pagamento |
cc-number | Numero della carta di pagamento |
cc-exp | Data di scadenza della carta |
cc-csc | Codice di sicurezza della carta (CVC/CVV) |
current-password | Password esistente (per l'accesso) |
new-password | Nuova password (per la registrazione o il cambio) |
one-time-code | Codice di verifica monouso (OTP) |
bday | Data di nascita completa |
Quando (e perché) disabilitare l'autocomplete
Nella maggior parte dei casi è consigliabile lasciare abilitato l'autocomplete, poiché riduce la digitazione e gli errori. Esistono tuttavia alcuni motivi legittimi per disabilitarlo:
- Codici monouso e sensibili. I campi per password monouso, risposte CAPTCHA o altri valori che non dovrebbero mai essere memorizzati sono buoni candidati. Per un campo OTP, è preferibile usare
autocomplete="one-time-code"anzichéoff, in modo che i dispositivi mobili possano comunque suggerire il codice da un SMS senza memorizzarlo in modo permanente. - Interfaccia di completamento personalizzata. Se l'applicazione fornisce il proprio menu a discesa di suggerimenti (ad esempio una ricerca di città o prodotti basata su
<datalist>o un widget JavaScript), la compilazione automatica nativa del browser può interferire, quindi è possibile disabilitarla. - Dispositivi condivisi o kiosk, privacy. Su terminali pubblici potrebbe non essere desiderabile che il browser conservi o precompili i dati personali per l'utente successivo.
Attenzione: autocomplete="off" è solo un suggerimento. Per i campi password, Chrome e Safari spesso lo ignorano affinché i loro gestori di password integrati continuino a funzionare, il che è considerato una funzionalità di sicurezza. Per impedire al browser di suggerire una password salvata esistente, usare autocomplete="new-password" sul campo pertinente anziché off.
Nota sulla sicurezza: disabilitare l'autocomplete non rende un modulo più sicuro. I dati salvati rimangono nel gestore di password del browser, e costringere gli utenti a digitare password lunghe a mano incoraggia l'uso di password deboli e riutilizzate. Il metodo più sicuro consiste nell'etichettare i campi con i token corretti (current-password, new-password, one-time-code) in modo che i gestori di password e il browser gestiscano i dati in modo appropriato.
Accessibilità e UX
I token di compilazione automatica con nome sono una funzionalità di accessibilità, non solo una comodità:
- Soddisfano il Criterio di successo WCAG 2.1 1.3.5 "Identify Input Purpose", che richiede che lo scopo dei campi del modulo comuni sia identificabile a livello programmatico.
- Consentono ai gestori di password di inserire le credenziali in modo affidabile e ai browser mobili di mostrare la tastiera su schermo corretta.
- Disabilitare l'autocomplete può costituire una barriera per gli utenti con disabilità cognitive, motorie o di memoria, che si affidano ai valori salvati per compilare i moduli. Disabilitarlo solo quando vi è un motivo reale.
Correlato: autofocus sposta il cursore su un campo al caricamento, e il capitolo <input> tratta i tipi di campo con cui questi token si abbinano.