Stili dei moduli

Aiuta gli utenti a utilizzare il modulo con il loro browser preferito

Per assicurarti che il modulo sia accessibile al maggior numero di persone possibile, utilizza gli elementi creati per il job: <input>, <textarea>, <select> e <button>. Questa è la base di riferimento per un modulo utilizzabile.

Gli stili del browser predefiniti non hanno un aspetto ottimale. Cambiamolo.

Nota: il miglioramento progressivo è una strategia che fornisce una base di funzionalità e contenuti essenziali per il maggior numero di utenti possibile. Garantisce la migliore esperienza possibile agli utenti che utilizzano browser moderni. Si parte dai contenuti, si usa l'HTML semantico, si aggiunge un codice CSS a prova di futuro e l'ultimo passaggio è quello di inserire codice JavaScript efficace.

Assicurati che i controlli dei moduli siano leggibili per tutti

Le dimensioni predefinite dei caratteri per i controlli modulo nella maggior parte dei browser sono troppo piccole. Per assicurarti che i controlli del modulo siano leggibili, modifica le dimensioni dei caratteri con CSS:

Aumenta font-size e line-height per migliorare la leggibilità.

.form-element {
  font-size: 1.3rem;
  line-height: 1.2;
}

Nota : per font-size utilizza unità relative come em (relativo alla dimensione di base dell'elemento principale) o rem (relativo alla dimensione di base del documento) per assicurarti che la dimensione risponda alla preferenza dell'utente. Gli utenti possono modificare l'font-size di base e tutti gli elementi con un font-size relativo verranno regolati automaticamente. Per line-height utilizza un valore senza unità, come 1.5, per mantenere l'altezza della riga relativa alle dimensioni del carattere. Scopri di più su pixel e unità relative in CSS.

Aiutare gli utenti a navigare nel modulo

Come passaggio successivo, modifica il layout del modulo e aumenta la spaziatura degli elementi del modulo, per aiutare gli utenti a capire quali elementi appartengono a uno stesso modulo.

La proprietà CSS margin aumenta lo spazio tra gli elementi e la proprietà padding aumenta lo spazio intorno ai contenuti dell'elemento.

Per il layout generale, utilizza Flexbox o Grid. Scopri di più sui metodi di layout CSS.

Assicurati che i controlli dei moduli abbiano l'aspetto di quelli dei moduli

Consenti alle persone di compilare facilmente il modulo utilizzando stili ben comprensibili per i controlli del modulo. Ad esempio, applica uno stile agli elementi <input> con un bordo continuo.

Nota: il colore predefinito del bordo <input> è troppo chiaro in molti browser. La mancanza di contrasto può rendere l'elemento difficile da vedere, soprattutto sui dispositivi mobili. Apri questa demo in Chrome su Android per vedere gli stili predefiniti.

input,
textarea {
  border: 1px solid;
}

Aiutare gli utenti a inviare il modulo

Valuta la possibilità di utilizzare un background per <button> in modo che corrisponda allo stile del tuo sito e sostituisci o rimuovi gli stili border predefiniti.

Nota: nei browser moderni, puoi definire uno stile <button> come qualsiasi altro elemento, quindi devi sempre usare un valore semantico <button> o <input type="submit">. L'utilizzo dell'elemento creato per il job offre molti vantaggi integrati in termini di usabilità e accessibilità, che non è possibile ottenere utilizzando un elemento generico come <div>. Scoprirai le funzionalità integrate in altri moduli. Scopri di più sul ripristino dello stile predefinito di un <button>.

Aiuta gli utenti a comprendere lo stato attuale

I browser applicano uno stile predefinito per :focus. Puoi sostituire gli stili di :focus in modo che il colore corrisponda al colore del tuo brand.

button:focus {
    outline: 4px solid green;
}

Nota: rimuovi outline su :focus solo se aggiungi anche altri stili di messa a fuoco appropriati, per assicurarti che gli stili predefiniti e di messa a fuoco siano distinguibili. Scopri di più sulla progettazione degli indicatori di messa a fuoco.

Verifica le tue conoscenze

Verifica le tue conoscenze sull'applicazione di stili ai moduli

Perché dovresti utilizzare le unità relative per font-size?

Per assicurarti che la taglia risponda alle preferenze dell'utente.

🎉

Per assicurarti che la dimensione risponda all'elemento precedente.

Riprova.

Per assicurarti che la dimensione risponda alla modalità Buio.

Riprova.

Per assicurarti che la dimensione risponda alle query multimediali.

Riprova.

Come si aumenta la spaziatura tra i controlli del modulo?

Utilizzo della proprietà CSS padding.

Riprova.

Utilizzo della proprietà CSS spacer.

Riprova.

Utilizzo della proprietà CSS margin.

🎉

Utilizzo della proprietà CSS boundary.

Riprova.

Risorse

• Scopri CSS
• Metodi di layout CSS
• Progettare gli indicatori di messa a fuoco
• Ripristino dello stile predefinito di un <button>.