Les champs textes permettent **d'écrire du texte, directement avec le clavier** une fois que le champ est sélectionné : ```html ``` De base, un champ texte ressemble à ceci : !!! well ::: playground ::: !!! > Mais sans rien pour décrire le contenu du champ, on ne sait pas trop quoi y renseigner ### Ajouter un label Les labels permettent d’**ajouter un “titre” au champ** en dessous de lui, comme ceci : ```html Email: ``` > Tout comme les attributs `alt` des images, les labels seront aussi utilisés pour **améliorer l’accessibilité de votre site** aux personnes malvoyantes ! Voilà le même champs, avec un label cette fois : !!! well ::: playground ::: !!! C’est beaucoup plus compréhensible, **mais on peut faire encore mieux…** ### Ajouter un placeholder Un placeholder est un texte qui est affiché **lorsque le champ texte est vide**, avant que l'utilisateur n'écrive quelque chose à l'intérieur. On utilise en général un placeholder pour **donner plus d'indications aux utilisateurs** sur ce que doit contenir l'élément du formulaire : ```html Email: ``` Et voilà le rendu : !!! well ::: playground ::: !!! ### Les types “spéciaux” Tous les exemples précédents utilisent le champs texte le plus courant `type="text"` mais **il existe beaucoup d’autres types** qui peuvent modifier légèrement l’apparance ou le comportement du champ. Exemple avec un champs de type “nombre” : ```html ``` !!! well ::: playground ::: !!! Les types les plus courant sont : - email - password (pour cacher les caractères) - tel (pour les numéros de téléphones) - file Certains type de champs ne change pas l’apparence, ni le comportement, **mais changent simplement le clavier** (lorsque l’on est sur un smartphone), pour rendre certaines touches plus accessible (le `@` par exemple). > Vous pourrez retrouver **l’intégralité des types** [dans la documentation de Mozilla](https://developer.mozilla.org/fr/docs/Web/HTML/Element/input#les_différents_types_de_champs_input)