Nuovo(ish) in HTML5

autocomplete attributo è stato introdotto come una sorta di HTML in Microsoft Internet Explorer, ed è stato adottato da un certo numero di altri browser. Quindi c’è stato un ampio supporto per questo per molto tempo, anche se il suo comportamento esatto non è stato standardizzato. Con HTML5, l’attributoautocomplete è una parte ufficiale della specifica.,

completamento automatico vs. list &<datalist>

L’attributo autocomplete chiede al browser di tentare il completamento automatico, sulla base della cronologia degli utenti . Questo è utile per i dettagli personali come nome e indirizzo e — mail-cose che l’utente è probabile che abbia tipi in campi di input simili su altri siti web. La funzionalitàautocomplete non è in grado di fornire al browser un elenco di opzioni di completamento automatico specifiche del sito., Per il comportamento di completamento automatico con suggerimenti specifici del sito, utilizzare l’attributolist con l’elemento<datalist>.

Deliberatamente “rotto”

Tutti i principali browser ignorano il valoreautocomplete="off" per alcuni tipi di campi di input. Internet Explorer e Edge lo ignorano per tutti i campipassword. Firefox lo ignora per qualsiasi campo in un modulo di accesso. Chrome lo ignora ogni volta che l’utente ha scelto di lasciare che il browser ricordi i dati del modulo. Safari lo ignora per i campi nome utente, email e password., Ignorando ilautocomplete="off" valore è fatto per migliorare l’usabilità, e gve all’utente un maggiore controllo sul comportamento di completamento automatico. Come progettista UX, dovresti seguire il loro esempio e usareautocomplete="off" con parsimonia. Ci sono pochissimi casi d’uso in forme normali in cui ha davvero senso disabilitare autocomplete. In alcune app complesse, ha senso evitare input accidentali, ma con la maggior parte dei moduli standard non c’è davvero alcuna ragione per questo.,

Completamento automatico e nome

I browser utilizzano l’attributoname per capire che tipo di informazioni richiede un campo di input. Quindi usa valori standard e significativi per name., Se ti stai chiedendo per un indirizzo, utilizzare nomi come:

  • address-1
  • address-2
  • city
  • state o province
  • zip o postal-code

non uso intelligente o stranamente nomi specifici, come che rende più difficile per il browser di fornire suggerimenti di completamento automatico, e può anche causare il browser cercando di riempire di valori errati in ingressi sbagliati., (Avete mai avuto il vostro browser riempire il vostro numero di telefono nel campo codice postale? E ‘ stata colpa di una cattiva denominazione.)

Valori dell’attributo di completamento automatico

Nome valore Note
off Disattiva il completamento automatico.
on Attiva il completamento automatico.,

Tutti gli Attributi dell’Elemento di input

nome dell’Attributo Valori Note
passo consente di Specificare l’intervallo tra i valori validi in un numero di ingresso.
obbligatorio Specifica che il campo di input è obbligatorio; non consente l’invio del modulo e avvisa l’utente se il campo richiesto è vuoto.
segnaposto Specifica il testo segnaposto in un input basato su testo.,
pattern Specifica un’espressione regolare rispetto alla quale convalidare il valore dell’input.
multiple Consente all’utente di inserire più valori in un caricamento di file o input e-mail.
min Specifica un valore minimo per i campi di immissione del numero e della data.
max Specifica un valore massimo per i campi di input numero e data.,
list Specifica l’id di un elemento<datalist> che fornisce un elenco di suggerimenti di completamento automatico per il campo di input.
altezza Specifica l’altezza di un input di immagine.
formtarget Specifica il contesto di navigazione in cui aprire la risposta dal server dopo l’invio del modulo. Per l’uso solo su tipi di input di “submit” o “image”.,
formmethod Specifica il metodo HTTP (GET o POST) da utilizzare quando i dati del modulo vengono inviati al server. Solo per l’uso su tipi di input di “submit” o “image”.
formenctype Specifica come i dati del modulo devono essere inviati al server. Solo per l’uso sui tipi di input “submit” e “image”.
formaction Specifica l’URL per l’invio del modulo. Può essere utilizzato solo per type = “submit” e type = “image”.
modulo Specifica un modulo a cui appartiene il campo di input.,
autofocus Specifica che il campo di input deve essere messo a fuoco immediatamente al caricamento della pagina.
accesskey Definisce una scorciatoia da tastiera per l’elemento.
completamento automatico off
on 		Specifica se il browser deve tentare di completare automaticamente l’input in base agli input dell’utente in campi simili.
border È stato usato per specificare un bordo su un input. Disapprovare. Usa invece CSS.,
checked Specifica se una casella di controllo o un pulsante di opzione deve essere selezionata per impostazione predefinita.
disabilitato Disabilita il campo di input.
maxlength Specifica il numero massimo di caratteri che possono essere immessi in un input di tipo testuale.
linguaggio È stato usato per indicare il linguaggio di scripting utilizzato per gli eventi attivati dall’input.
nome Specifica il nome di un elemento di input., Il nome e il valore di ciascun elemento di input sono inclusi nella richiesta HTTP quando viene inviato il modulo.
size Specifica la larghezza dell’input in caratteri.
src Definisce l’URL di origine per un input di immagine.
tipo button
checkbox
file
hidden
image
password
radio
reset
submit
text		 Definisce il tipo di ingresso.
valore Definisce un valore iniziale o una selezione predefinita per un campo di input.,
Adam is a technical writer who specializes in developer documentation and tutorials.