Champ texte
Champ de saisie sur une ligne, par ex. pour une adresse e-mail.
Liste déroulante
Menu déroulant avec les mêmes dimensions qu'un champ texte — flèche personnalisée plutôt que le style par défaut du navigateur.
Zone de texte
Champ multiligne pour des saisies plus longues, par ex. un message.
Case à cocher
Option binaire, toujours avec une étiquette visible et cliquable à côté.
Bonnes pratiques
Associer le label via for/id
Chaque champ a besoin d'un <label for="..."> avec l'id correspondant — un clic sur le label place le focus dans le champ, et les lecteurs d'écran annoncent l'étiquette correctement.
Le placeholder ne remplace pas un label
Un placeholder disparaît dès la saisie et n'est pas reconnu comme étiquette par de nombreux lecteurs d'écran — il complète le label, mais ne le remplace jamais.
Styliser le select comme un champ texte
La flèche par défaut d'un <select> casse souvent la hauteur uniforme. Avec appearance-none et une icône de flèche personnalisée, on obtient la même hauteur et le même style qu'un <input>.
État de focus visible
Chaque champ a besoin d'un anneau de focus bien visible pour les utilisateurs au clavier — ici via la couleur de marque Lochmara, pas seulement un léger changement de bordure.