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.
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;
}
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.
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.
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;
}
Verifica le tue conoscenze
Verifica le tue conoscenze sull'applicazione di stili ai moduli
Perché dovresti utilizzare le unità relative per font-size
?
Come si aumenta la spaziatura tra i controlli del modulo?
padding
.spacer
.margin
.boundary
.