Aider les utilisateurs à remplir 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 créés pour la tâche: <input>
, <textarea>
, <select>
et <button>
. Il s'agit de la base de référence pour un formulaire utilisable.
Les styles de navigateur par défaut ne sont pas beaux ! Changeons de compte.
Assurez-vous que les éléments de contrôle des formulaires sont lisibles par tous
Dans la plupart des navigateurs, la taille de police par défaut des commandes de formulaire est trop petite. Pour que les commandes du 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 vont ensemble.
La propriété CSS margin
augmente l'espace entre les éléments, tandis que 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
S'assurer que les commandes de formulaire ressemblent à des commandes de formulaire
Facilitez le remplissage de votre formulaire en utilisant des styles bien compris pour les commandes de votre formulaire.
Par exemple, appliquez une bordure pleine aux éléments <input>
.
input,
textarea {
border: 1px solid;
}
Aider les utilisateurs à envoyer votre formulaire
Pensez à utiliser un background
pour que votre <button>
corresponde au style de votre site, et remplacez ou supprimez 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
Tester vos connaissances sur les styles de formulaires
Pourquoi devriez-vous utiliser des unités relatives pour font-size
?
Comment pouvez-vous augmenter l'espacement entre les commandes de formulaire ?
padding
spacer
margin
boundary