Tout ce qui permet de taper, choisir ou téléverser : la famille la plus dense, celle où le bon vocabulaire fait gagner le plus de temps.
Champ texte (input)
Rectangle où l'utilisateur tape une ligne de texte : nom, email, téléphone, mot de passe.
Quand l'utiliser : toute saisie courte sur une ligne ; précisez le type attendu pour le bon clavier mobile et la validation.
Quand l'éviter : plusieurs lignes → zone de texte ; liste connue → menu déroulant.
Zone de texte (textarea)
Comme un champ texte, mais sur plusieurs lignes, hauteur ajustable, souvent agrandissable avec une poignée. (Voir le champ Message de l'illustration ci-dessus.)
Quand l'utiliser : message, description, bio : toute saisie qui peut dépasser une ligne.
Quand l'éviter : texte court, ou texte riche (gras, listes) : il faut un éditeur dédié.
Étiquette et message d'aide (label & help text)
L'étiquette décrit le champ. Le message d'aide est la phrase grise qui précise un format ou un exemple, rouge en cas d'erreur. (Voir les libellés ci-dessus.)
Quand les utiliser : presque toujours : sans étiquette, on devine ; sans message d'aide, on échoue.
Quand les éviter : champs évidents (une barre de recherche connue).
Menu déroulant (select / dropdown)
Champ fermé qui s'ouvre au clic sur une liste d'options préétablies.
Quand l'utiliser : choix dans une liste connue de moins de 15 options (pays, devise, statut).
Quand l'éviter : 2-3 options → boutons radio ; 15+ → champ avec recherche.
Champ avec recherche (combobox / autocomplete)
Comme un menu déroulant, mais on peut taper pour filtrer la liste, réduite en temps réel.
Quand l'utiliser : 15+ options ou données dynamiques (clients) ; indispensable si la liste est longue.
Quand l'éviter : moins de 10 options : le menu simple suffit.
Case à cocher, bouton radio, interrupteur
Case à cocher (checkbox)
Petit carré indépendant des autres : on en coche plusieurs ou aucun.
Choix multiples (« Quels jours ? ») ou acceptation unique (« J'accepte les CGU »).
Bouton radio (radio)
Petit rond qui fonctionne en groupe : un seul sélectionnable à la fois.
Choix unique parmi 2 à 5 options visibles (« Mensuel » ou « Annuel »).
Interrupteur (switch)
Bouton à deux états qui s'inverse au clic : effet immédiat, pas de bouton Enregistrer.
Activer/désactiver une fonctionnalité dans des paramètres.
Sélecteur de date (date picker)
Champ qui ouvre un mini-calendrier au clic : navigation par mois, clic sur un jour.
Quand l'utiliser : toute saisie de date, pour éviter les erreurs de format (jj/mm vs mm/jj).
Quand l'éviter : date très éloignée (naissance) : menus jour/mois/année plus rapides.
Curseur (slider)
Barre horizontale à poignée qu'on glisse entre un minimum et un maximum.
Quand l'utiliser : réglage continu où la valeur exacte importe peu (volume, budget), bien adapté au mobile.
Quand l'éviter : valeur exacte critique (virement) : un champ numérique est plus précis.
Téléversement de fichier (file upload)
Zone où l'utilisateur glisse-dépose un fichier, ou clique pour ouvrir le sélecteur ; après envoi, nom et taille s'affichent.
Quand l'utiliser : toute pièce jointe (justificatif, photo) ; précisez formats acceptés et taille max.
Quand l'éviter : besoin du texte plutôt que du fichier : une zone de texte suffit.