Appliquer un style à des formulaires

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

Ressources

• Apprendre à utiliser le langage CSS
• Méthodes de mise en page CSS
• Concevoir des indicateurs d'objectif
• Rétablissement du style par défaut d'un <button>.