Contrôles de formulaire : types input, select, textarea
Utilisez des champs texte, e-mail, nombre, date, case à cocher, bouton radio, plage, fichier et couleur, ainsi que les éléments select et textarea.
Contrôles de formulaire : types input, select, textarea est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Toute la palette des types de champs
HTML5 a introduit de nombreux types de champs spécialisés au-delà du texte. Chacun indique au navigateur le type de données attendu, ce qui permet une validation native, des claviers adaptés sur mobile et des contrôles d’interface natifs de la plateforme.
Champs texte, de recherche et d’URL
type="text" est la solution de repli pour le texte brut. type="search" suggère un clavier optimisé pour la recherche et affiche souvent un bouton d’effacement. type="url" valide le format d’une URL et affiche un clavier adapté aux URL sur mobile.
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search...">
<input type="url" placeholder="https://example.com">E-mail et téléphone
type="email" valide le format d’une adresse e-mail et affiche un clavier optimisé pour les e-mails, avec une touche @. type="tel" affiche un clavier numérique téléphonique (il ne valide pas le format, car les formats de numéro varient selon les pays).
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">Types nombre, plage et date
type="number" avec min/max/step pour les données numériques. type="range" pour les curseurs. type="date", type="time", type="datetime-local" pour les données temporelles avec des sélecteurs natifs.
<input type="number" min="0" max="100" step="5" value="50">
<input type="range" min="0" max="100" value="60">
<input type="date" min="2025-01-01">
<input type="time">Cases à cocher et boutons radio
Les cases à cocher sont des bascules indépendantes. Les boutons radio d’un même groupe (avec le même attribut name) ne permettent qu’une seule sélection. Chacun doit être associé à une étiquette.
<fieldset>
<legend>Notification preferences</legend>
<label><input type="checkbox" name="email_notif" value="1"> Email</label>
<label><input type="checkbox" name="sms_notif" value="1"> SMS</label>
</fieldset>
<fieldset>
<legend>Plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>Couleur, fichier et champ masqué
type="color" affiche un sélecteur de couleurs natif. type="file" ouvre une boîte de dialogue de sélection de fichier ; utilisez l’attribut accept pour limiter les types de fichier. type="hidden" envoie des données sans contrôle d’interface.
<input type="color" name="theme_color" value="#3182ce">
<input type="file" accept="image/png, image/jpeg">
<input type="hidden" name="csrf_token" value="abc123">Menus déroulants select
L’élément <select> crée un menu déroulant. Utilisez multiple pour permettre plusieurs sélections, ce qui offre rarement une bonne expérience utilisateur. Regroupez les options avec <optgroup> dans les longues listes.
<select name="country">
<option value="">Select a country...</option>
<optgroup label="Europe">
<option value="de">Germany</option>
<option value="fr">France</option>
</optgroup>
<optgroup label="Americas">
<option value="us">United States</option>
</optgroup>
</select>Zone de texte
<textarea> crée un champ de texte multiligne. Utilisez rows et cols pour définir la taille initiale, ou le CSS pour mieux la contrôler. La balise fermante est obligatoire et tout contenu placé entre les balises devient la valeur par défaut.
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" maxlength="500"
placeholder="Write something about yourself..."></textarea>Datalist — Options d’autocomplétion
<datalist> fournit une liste de suggestions pour un champ sans restreindre la saisie libre. Associez le champ à datalist à l’aide des attributs list et id.
<input type="text" list="languages" name="language" placeholder="Type a language">
<datalist id="languages">
<option value="JavaScript">
<option value="TypeScript">
<option value="Python">
<option value="Rust">
</datalist>Les attributs value et name
name est la clé envoyée lors de la soumission du formulaire. value définit la valeur initiale. Pour les cases à cocher et les boutons radio, value est la valeur envoyée lorsque le contrôle est sélectionné. Pour les champs texte, value correspond au contenu prérempli.
Dimensionnement des champs et texte indicatif
placeholder affiche un texte indicatif lorsque le champ est vide. Il disparaît lorsque le champ reçoit le focus et ne remplace pas une étiquette visible. size définit la largeur visible en caractères ; préférez le CSS pour le dimensionnement.
Vérification rapide
Quel type de champ affiche un clavier numérique sur mobile et vérifie que la valeur saisie est un nombre valide ?
Récapitulatif : contrôles de formulaire
Utilisez des types de champs sémantiques : email pour les adresses e-mail, number pour les nombres et date pour les dates. Utilisez select pour les choix fixes, datalist pour une autocomplétion suggestive et textarea pour le texte multiligne. Incluez toujours des attributs name pour la soumission et des attributs value lorsque cela est pertinent.
Questions Fréquemment Posées
La leçon « Contrôles de formulaire : types input, select, textarea » est-elle gratuite ?
Oui — le texte complet de « Contrôles de formulaire : types input, select, textarea » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Contrôles de formulaire : types input, select, textarea » ?
Utilisez des champs texte, e-mail, nombre, date, case à cocher, bouton radio, plage, fichier et couleur, ainsi que les éléments select et textarea. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Contrôles de formulaire : types input, select, textarea » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Contrôles de formulaire : types input, select, textarea
- ARIA et accessibilité : label, role, aria-*
- HTML5 sémantique : éléments sémantiques ou soupe de div
- Attributs de validation des formulaires