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
?
Come si aumenta la spaziatura tra i controlli del modulo?
spacer
.boundary
.padding
.margin
.