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.

Remarque : L'amélioration progressive est une stratégie qui fournit une base de données et de fonctionnalités essentielles au plus grand nombre d'utilisateurs possible. Elle garantit la meilleure expérience possible aux utilisateurs de navigateurs récents. Vous commencerez par le contenu, vous utiliserez le HTML sémantique, puis ajouterez un CSS pérenne et ajouterez du code JavaScript robuste en dernier lieu.

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;
}

Remarque : Pour font-size, utilisez des unités relatives telles que em (par rapport à la taille de base du parent de l'élément) ou rem (par rapport à la taille de base du document) afin de vous assurer que la taille répond aux préférences de l'utilisateur. Les utilisateurs peuvent modifier le font-size de base, et tous les éléments associés à une font-size relative seront automatiquement ajustés. Pour line-height, utilisez une valeur sans unité telle que 1.5 afin de conserver la hauteur de la ligne par rapport à la taille de la police. En savoir plus sur les pixels et les unités relatives dans CSS

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.

Remarque : La couleur de bordure <input> par défaut est trop claire dans de nombreux navigateurs. L'absence de contraste peut rendre l'élément difficile à voir, en particulier sur les mobiles. Ouvrez cette démonstration dans Chrome sur Android pour voir les styles par défaut.

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.

Remarque : Dans les navigateurs récents, vous pouvez appliquer un style à un <button> comme n'importe quel autre élément. Vous devez donc toujours utiliser une <button> sémantique, ou <input type="submit">. L'utilisation de l'élément conçu pour le job offre de nombreux avantages intégrés en termes de facilité d'utilisation et d'accessibilité, dont vous n'obtiendrez pas l'accès avec un élément générique tel qu'un <div>. Vous découvrirez les fonctionnalités intégrées dans d'autres modules. Découvrez comment rétablir le style par défaut d'un <button>.

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;
}

Remarque : Ne supprimez le outline de :focus que si vous ajoutez également d'autres styles de focus appropriés, afin de vous assurer que les styles par défaut et de focus se distinguent. En savoir plus sur la conception d'indicateurs de focalisation

Testez vos connaissances

Testez vos connaissances sur les formulaires de style

Pourquoi utiliser des unités relatives pour font-size ?

Pour s'assurer que la taille répond aux préférences de l'utilisateur.

🎉

Pour s'assurer que la taille correspond à l'élément précédent.

Essayez encore.

Pour s'assurer que la taille s'adapte au mode sombre.

Essayez encore.

Pour s'assurer que la taille répond aux requêtes média.

Essayez encore.

Comment pouvez-vous augmenter l'espacement entre les commandes de formulaire ?

Utilisation de la propriété CSS padding

Essayez encore.

Utilisation de la propriété CSS spacer

Essayez encore.

Utilisation de la propriété CSS margin

🎉

Utilisation de la propriété CSS boundary

Essayez encore.

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>