Approfondimento sugli attributi del modulo

Gli attributi degli elementi HTML possono migliorare i controlli <form> e del modulo.

Aiuta gli utenti a compilare i controlli dei moduli

Per semplificare la compilazione dei moduli da parte degli utenti, utilizza un attributo type appropriato per gli elementi <input>.

I browser mostrano un'interfaccia utente appropriata per type, ad esempio un selettore della data per una <input> di tipo date. I browser sui dispositivi mobili mostrano una tastiera sullo schermo adattata, ad esempio il tastierino di un numero di telefono per type="tel".

Alcuni tipi di <input> modificano anche le regole di convalida di un elemento quando viene inviato il relativo modulo. <input type="url">, ad esempio, è valido solo se non è vuoto e il valore è un URL.

Assicurati che gli utenti inseriscano dati

Esistono diversi attributi per fornire una tastiera sullo schermo appropriata sui dispositivi touch. La prima opzione consiste nell'utilizzare l'attributo type, come indicato sopra.

Un'altra opzione è l'attributo inputmode supportato su Android e iOS. A differenza dell'attributo type, l'attributo inputmode modifica solo la tastiera sullo schermo fornita, non il comportamento dell'elemento stesso. L'utilizzo di inputmode è una buona soluzione se vuoi mantenere l'interfaccia utente predefinita e le regole di convalida predefinite di un <input>, ma vuoi comunque una tastiera sullo schermo ottimizzata.

Puoi modificare il tasto Enter sulle tastiere sullo schermo tramite l'attributo enterkeyhint. Ad esempio, enterkeyhint="next" o enterkeyhint="done" modifica l'etichetta del pulsante in un'icona appropriata. In questo modo sarà più chiaro per gli utenti che cosa succede quando inviano il modulo corrente.

Assicurati che gli utenti possano inviare un modulo

Supponiamo che tu compili un <form> e faccia clic sul pulsante Invia, ma non succede nulla. Il problema potrebbe essere che il pulsante è stato disattivato con l'attributo disabled. È prassi comune disattivare il pulsante Invia fino a quando il modulo non è valido.

In teoria questo sembra sensato, ma non dovresti disattivare un pulsante Invia mentre attendi di ricevere un input utente valido e completo. Evidenzia invece i dati non validi al momento dell'inserimento ed evidenzia i campi problematici per l'utente quando invia il modulo.

Tuttavia, ti consigliamo di disattivare il pulsante Invia dopo che il modulo è stato inviato correttamente, ma non è ancora stato elaborato. Scopri di più sui pulsanti disattivati.

Aiuta gli utenti mostrando i dati inseriti in precedenza

Immagina di avere un modulo di pagamento con più passaggi. Come puoi assicurarti che i valori inseriti in precedenza siano ancora presenti quando l'utente torna al passaggio precedente? Utilizza l'attributo value per mostrare i valori già completati.

<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">

Esistono diversi modi per recuperare il valore di un controllo modulo in JavaScript. Puoi utilizzare la proprietà value o accedere al valore con getAttribute('value'). C'è una grande differenza: la proprietà value restituisce sempre il valore corrente e, utilizzando getAttribute(), restituisce sempre il valore iniziale.

Prova. Modifica il testo del campo del nome e controlla la console. Osserva come la proprietà value restituisce il testo attualmente visibile, mentre getAttribute('value') restituisce sempre il valore iniziale.

Scopri di più sulla differenza tra attributi DOM e proprietà DOM.

Per gli elementi <input> di tipo checkbox o radio utilizza l'attributo checked. Aggiungila se l'utente ha selezionato un'opzione e rimuovila in caso contrario.

Assicurati che gli utenti comprendano il formato previsto

Il valore dell'attributo placeholder è un suggerimento sul tipo di informazioni previsto.

<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin">

Gli utenti potrebbero confondere gli utenti, dal momento che potrebbe sembrare illogico il motivo per cui un controllo modulo sembra essere già precompilato. Inoltre, l'aggiunta di un segnaposto può rendere difficile vedere quali campi del modulo devono ancora essere compilati. Inoltre, lo stile predefinito del testo segnaposto può essere difficile da leggere.

In generale, fai attenzione quando utilizzi l'attributo placeholder e non usare mai l'attributo placeholder per spiegare un controllo modulo. Usa invece l'elemento <label>. Scopri di più sul perché dovresti prendere in considerazione la possibilità di evitare l'attributo placeholder.

Un modo migliore per dare agli utenti un suggerimento sul tipo di informazioni previste è usare un elemento HTML aggiuntivo sotto il controllo modulo per aggiungere una spiegazione o un esempio.

Assicurati che i controlli del modulo siano pronti per la convalida

Sono disponibili vari attributi HTML per attivare la convalida integrata. Utilizza l'attributo required per impedire l'invio di campi vuoti. È possibile forzare l'applicazione di ulteriori convalide con l'attributo type. Ad esempio, il valore di un valore <input> obbligatorio di type="url" deve essere un URL.

Per assicurarti che un utente inserisca un numero minimo di caratteri, utilizza l'attributo minlength. Per non consentire qualsiasi valore con più di un numero massimo di caratteri, utilizza l'attributo maxlength. Per i tipi di input numerici come <input type="number">, utilizza invece gli attributi min e max.

Scopri di più sulla convalida: Aiuta gli utenti a inserire i dati corretti nei moduli.

Verifica le tue conoscenze

Verifica la tua conoscenza degli attributi del modulo

Risorse

• <input> attributi HTML
• Attributi HTML globali