Appliquer un style à des formulaires

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

Ressources

• Découvrir CSS
• Méthodes de mise en page CSS
• Concevoir des indicateurs d'objectif
• Rétablir le style par défaut d'un élément <button>