HTML — Types de champs de saisie

L’attribut type d’un input précise les données attendues, le clavier proposé et les contraintes natives que le navigateur peut appliquer.

L’attribut type d’un input indique au navigateur le genre de données attendu. Un type bien choisi peut adapter le clavier sur mobile, proposer un sélecteur de date, limiter un nombre ou remplacer un champ texte par une case à cocher. Les libellés, les noms et la validation vus dans la leçon sur les formulaires HTML restent nécessaires ; cette leçon se concentre sur les types de champs.

Commencer par text, email, password et search

Le type par défaut est text. Utilisez email, url, tel et search lorsque ces types correspondent au sens de la valeur : ils peuvent proposer un clavier adapté et une première vérification du format. password masque la valeur à l’écran, mais ne la chiffre pas pendant son transfert ; HTTPS reste indispensable. Les valeurs autocomplete aident le navigateur à remplir les informations personnelles courantes sans se fier uniquement au libellé visible.

<form>
  <label for="full-name">Nom complet</label>
  <input id="full-name" name="name" type="text" autocomplete="name">

  <label for="work-email">Adresse e-mail professionnelle</label>
  <input id="work-email" name="email" type="email" autocomplete="email" required>

  <label for="new-password">Mot de passe</label>
  <input id="new-password" name="password" type="password" autocomplete="new-password" minlength="12">

  <label for="lesson-search">Rechercher des leçons</label>
  <input id="lesson-search" name="q" type="search">
</form>