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 possibile di persone, utilizza gli elementi creati per job: <input>, <textarea>, <select> e <button>. Questa è la base di riferimento per un modulo utilizzabile.

Gli stili del browser predefiniti non vanno bene. Cambiamolo.

Assicurati che i controlli del modulo siano leggibili per tutti

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

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

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

Aiutare gli utenti a navigare nel modulo

Come passaggio successivo modifica il layout del modulo e aumenta la spaziatura degli elementi. per aiutare gli utenti a capire quali elementi sono associati.

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

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

Assicurati che i controlli del modulo siano simili a quelli del modulo

Semplifica la compilazione del modulo utilizzando stili chiari per i controlli del modulo. Ad esempio, applica lo stile agli elementi <input> con un bordo continuo. 

input,
textarea {
  border: 1px solid;
}

Aiutare gli utenti a inviare il modulo

Valuta la possibilità di utilizzare un background per <button> affinché corrisponda allo stile del tuo sito, e sostituire o rimuovere gli stili predefiniti di border.

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 tuo brand. 

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

Verifica le tue conoscenze

Verifica le tue conoscenze sulle forme di stile

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

Per assicurarti che la taglia sia in linea con le preferenze dell'utente.
🎉
Per garantire che la dimensione risponda all'elemento precedente.
Riprova.
Per garantire che le dimensioni rispondano alla modalità Buio.
Riprova.
Per garantire che le dimensioni rispondano alle query supporti.
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