Cours HTML / Choisir les types de champs : e-mail, nombre, date et choix
Le type d'un input indique au navigateur quel type de valeur ou de sélection le champ représente. Les emails, quantités numériques, dates, cases à cocher et boutons radio ont des comportements différents. Choisissez le type en fonction des données et des décisions que les utilisateurs doivent prendre, et non simplement de son apparence visuelle.
Associez le type à la valeur
<form method="get">
<p><label for="email">Adresse e-mail</label>
<input id="email" name="email" type="email"></p>
<p><label for="quantity">Quantité</label>
<input id="quantity" name="quantity" type="number" min="1"></p>
<p><label for="visit-date">Date de visite</label>
<input id="visit-date" name="date" type="date"></p>
<button type="submit">Vérifier</button>
</form>Enregistrez l'exemple dans un fichier HTML et essayez chaque champ. email peut fournir une validation de format d'adresse de base et une interface de saisie appropriée sur certains appareils. number peut imposer un minimum numérique ; le contrôle visible pour date dépend du navigateur et du système d'exploitation. Le serveur doit toujours vérifier qu'une date soumise est valide pour l'objectif de l'application.
Une quantité est un nombre avec lequel vous pouvez calculer, mais un code postal peut avoir des zéros en tête et un numéro de téléphone peut inclure un indicatif de pays ou une ponctuation. Utilisez text ou tel pour de telles valeurs plutôt que number. Demandez si la valeur est une quantité numérique, et non simplement si elle contient des chiffres.
Cases à cocher ou boutons radio ?
Choisissez une case à cocher pour une décision indépendante oui/non ou plusieurs sélections indépendantes. Choisissez des boutons radio avec le même name lorsqu'une seule option d'un groupe peut être sélectionnée. Comparez la nomination des groupes avec l'exemple fieldset et legend dans Expliquez les formulaires avec fieldset, legend et saisie automatique.
<fieldset>
<legend>Mises à jour</legend>
<label><input type="checkbox" name="news" value="yes"> Recevoir les actualités</label>
</fieldset>
<fieldset>
<legend>Moyen de contact préféré</legend>
<label><input type="radio" name="contact" value="email"> Adresse e-mail</label>
<label><input type="radio" name="contact" value="phone"> Téléphone</label>
</fieldset>Les entrées radio partagent name="contact", donc sélectionner l'une efface l'autre. value est la valeur soumise, qui n'a pas besoin de correspondre à l'étiquette visible. Mettez ces groupes à l'intérieur d'un form avec un bouton de soumission pour les tester : une case à cocher news non cochée ne contribue à aucune entrée, tandis que la sélection de Adresse e-mail envoie contact=email. Si votre application doit distinguer un « Non » explicite d'aucune réponse, concevez ce choix et son traitement côté serveur de manière délibérée.
Comparer l'interface avec les valeurs soumises
| type | Objectif | Prudence |
|---|---|---|
| Une chaîne au format email | Ne vérifie pas l'existence d'une boîte aux lettres | |
number |
Une quantité numérique | La plage, le pas et la possibilité d'être vide sont séparés |
| date | Une date | L'interface varie selon la locale ; la valeur utilise aaaa-mm-jj |
checkbox |
Un choix indépendant | Un contrôle non coché ne contribue à aucune entrée |
| radio | Un choix parmi un groupe portant le même nom | Un fieldset partagé ne remplace pas un nom partagé |
Enregistrez l'exemple complet sous visit.html et utilisez l'adresse de test nom@example.com. Laisser le groupe de radios requis sans réponse bloque la soumission, tandis que le choix optionnel Actualités modifie la liste de données.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice sur les types de champs</title>
</head>
<body>
<h1>S’entraîner avec une demande de visite</h1>
<form id="visit-form" method="get">
<p><label for="visit-email">Adresse e-mail</label>
<input id="visit-email" name="email" type="email" required></p>
<p><label for="visit-day">Date de visite</label>
<input id="visit-day" name="date" type="date" required></p>
<p><label for="visit-quantity">Quantité</label>
<input id="visit-quantity" name="quantity" type="number" min="1" step="1" value="1"></p>
<fieldset>
<legend>Moyen de contact</legend>
<label><input type="radio" name="contact" value="email" required> Adresse e-mail</label>
<label><input type="radio" name="contact" value="phone"> Téléphone</label>
</fieldset>
<p><label><input type="checkbox" name="news" value="yes"> Actualités</label></p>
<button type="submit">Examiner les valeurs saisies</button>
</form>
</body>
</html>Choisissez une date et inspectez document.getElementById("visit-day").value dans la console. Sélectionner le 20 mai 2030 produit une valeur sous la forme 2030-05-20, indépendamment de l'affichage du calendrier localisé. Cochez puis décochez Actualités et comparez la liste des entrées avec la commande ci-dessous.
Array.from(new FormData(document.getElementById("visit-form")).entries())Format de la valeur d’un champ date sur MDN
Vérifiez plus que le type
Chaque champ a toujours besoin d'un label compréhensible et, lorsque sa valeur doit être soumise, d'un name. Un champ de type="email" peut être laissé vide, sauf si vous exigez également une valeur ; le format et l'obligation sont des règles séparées. Vous pouvez ajouter required à un groupe de boutons radio lorsque le choix d'une réponse est vraiment obligatoire. Testez ce que le navigateur soumet et validez les valeurs importantes sur le serveur. La référence de l’élément input sur MDN liste les types et contraintes pris en charge. Type et obligation, longueur et plage sont séparés ; testez leurs cas limites dans Validation de formulaire avec obligation, limites de longueur et de plage.
