Aider les utilisateurs à se servir de votre formulaire dans leur navigateur préféré
Pour que votre formulaire soit accessible au plus grand nombre de personnes possible, utilisez les éléments conçus pour le
job: <input>
, <textarea>
, <select>
et <button>
. Il s'agit de la référence d'une forme utilisable.
Les styles de navigateur par défaut ne sont pas parfaits. Changeons de compte.
S'assurer que les commandes de formulaire sont lisibles pour tous
Dans la plupart des navigateurs, la taille de police par défaut des contrôles de formulaire est trop petite. Pour que les commandes de formulaire soient lisibles, modifiez la taille de la police avec CSS:
Augmentez font-size
et line-height
pour améliorer la lisibilité.
.form-element {
font-size: 1.3rem;
line-height: 1.2;
}
Aider les utilisateurs à parcourir votre formulaire
L'étape suivante consiste à modifier la mise en page de votre formulaire et à augmenter l'espacement des éléments du formulaire, pour aider les utilisateurs à comprendre quels éléments s’unissent.
La propriété CSS margin
augmente l'espace entre les éléments,
et la propriété padding
augmente l'espace autour du contenu de l'élément.
Pour la mise en page générale, utilisez Flexbox ou Grid. En savoir plus sur les méthodes de mise en page CSS
Assurez-vous que les commandes de formulaire ressemblent à celles des formulaires.
Aidez les utilisateurs à remplir votre formulaire facilement en utilisant des styles bien compris pour les commandes de votre formulaire.
Par exemple, appliquez un style aux éléments <input>
avec une bordure pleine.
input,
textarea {
border: 1px solid;
}
Aider les utilisateurs à envoyer votre formulaire
Pensez à utiliser un background
pour votre <button>
afin qu'il corresponde au style de votre site,
et remplacer ou supprimer les styles border
par défaut.
Aider les utilisateurs à comprendre l'état actuel
Les navigateurs appliquent un style par défaut pour :focus
.
Vous pouvez remplacer les styles de :focus
pour qu'ils correspondent à la couleur de votre marque.
button:focus {
outline: 4px solid green;
}
Testez vos connaissances
Testez vos connaissances sur les formulaires de style
Pourquoi utiliser des unités relatives pour font-size
?
Comment pouvez-vous augmenter l'espacement entre les commandes de formulaire ?
padding
margin
spacer
boundary