<input>
Créer un champ de saisie, et il en existe 20 types différents
<input> — Le champ de saisie
La balise <input> crée un champ de saisie interactif. Son attribut type détermine son comportement : texte, email, téléphone, nombre, date, case a cocher, bouton radio, fichier, champ cache, bouton de soumission, et bien d'autres.
Quand l'utiliser
Tu veux collecter une adresse email (type="email"), un numéro de téléphone (type="tel"), une date (type="date"), un nombre (type="number"), un choix binaire (type="checkbox"), un choix exclusif (type="radio") ou un fichier (type="file").
Ce que tu gagnes
Accessibilité : chaque type active le clavier virtuel adapté sur mobile (email, tel, number). La validation native guide l'utilisateur sans JavaScript supplémentaire.
Exemple de code
<label for="name">Full name:</label>
<input type="text" id="name" name="name" required autocomplete="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required autocomplete="email">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" autocomplete="tel">
<label for="dob">Date of birth:</label>
<input type="date" id="dob" name="dob">
<label>
<input type="checkbox" name="newsletter" value="yes">
Subscribe to newsletter
</label>Pour aller plus loin
- Le laissez-passer A38 — partie 1 — les bases des formulaires accessibles
- WHATWG —
<input> - W3C — HTML spec
- MDN —
<input>