Formulaires : input, label, button
Créez des formulaires HTML accessibles avec des champs associés à des étiquettes, différents types de champs, des zones de texte, des listes de sélection et des boutons d’envoi.
Formulaires : input, label, button est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.
Pourquoi utiliser des formulaires HTML ?
Les formulaires sont le principal moyen pour les utilisateurs d’envoyer des données à un serveur : connexion, recherche, commande ou commentaires. Les navigateurs fournissent une grande quantité de comportements intégrés — validation, saisie au clavier, claviers mobiles — dont vous bénéficiez gratuitement en utilisant les éléments de formulaire natifs.
L’élément <form>
L’élément <form> englobe tous les contrôles associés. L’attribut action définit l’URL qui reçoit les données, et method définit GET ou POST. Dans les applications monopages, vous empêchez souvent l’envoi par défaut et le gérez avec JavaScript.
<form action="/submit" method="POST">
<!-- inputs go here -->
</form>Saisies de texte et d’adresses e-mail
L’élément <input> est le principal outil des formulaires. L’attribut type modifie son comportement. Utilisez type="text" pour le texte libre et type="email" pour les adresses e-mail (le format est validé et le clavier mobile approprié est affiché).
<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email" placeholder="you@example.com">Mots de passe, nombres et autres types
Autres types de saisie utiles : password (masque les caractères), number (valide les valeurs numériques et affiche des flèches de réglage), date (affiche un sélecteur de date), range (curseur), checkbox (bascule booléenne) et radio (choix unique parmi plusieurs).
<input type="password" name="pass">
<input type="number" name="age" min="0" max="120">
<input type="date" name="birthday">
<input type="range" min="0" max="100" value="50">L’élément <label> — essentiel pour l’accessibilité
Chaque champ de saisie doit être associé à un <label>. Le label indique aux utilisateurs et aux lecteurs d’écran à quoi sert le champ. Cliquer sur le label place le curseur dans le champ. Utilisez l’attribut for correspondant à l’id du champ.
<label for="username">Username</label>
<input type="text" id="username" name="username">Zone de texte et liste de sélection
Utilisez <textarea> pour le texte multiligne (par exemple, les commentaires). Utilisez <select> avec des éléments enfants <option> pour les choix dans une liste déroulante. Incluez toujours une option vide par défaut avec une invite comme « Choisissez une catégorie ».
<textarea name="message" rows="4" placeholder="Write your message..."></textarea>
<select name="level">
<option value="">Select level...</option>
<option value="a1">A1 Beginner</option>
<option value="b1">B1 Intermediate</option>
</select>Cases à cocher et boutons radio
Regroupez les cases à cocher associées avec un <fieldset> et une <legend>. Les boutons radio qui partagent le même nom n’autorisent qu’une seule sélection. Chacun doit avoir son propre libellé.
<fieldset>
<legend>Preferred languages</legend>
<label><input type="checkbox" name="lang" value="js"> JavaScript</label>
<label><input type="checkbox" name="lang" value="ts"> TypeScript</label>
</fieldset>Boutons : soumission, réinitialisation et bouton
<button type="submit"> envoie le formulaire. type="reset" efface tous les champs. type="button" ne fait rien par défaut et s’utilise avec des écouteurs d’événements JavaScript. Définissez toujours le type — la valeur par défaut est submit.
<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
<button type="button" id="preview">Preview</button>Regrouper les champs avec <fieldset>
<fieldset> regroupe visuellement et sémantiquement les contrôles associés. La <legend> obligatoire fournit une légende. Les lecteurs d’écran annoncent la légende avant chaque contrôle du groupe, ce qui fournit un contexte.
L’attribut de nom — Ce qui est envoyé
Lorsqu’un formulaire est envoyé, les navigateurs transmettent la paire name=value pour chaque contrôle. Seuls les contrôles dotés d’un attribut de nom sont inclus. Pour les cases à cocher, seules celles qui sont cochées sont envoyées.
<input type="text" name="firstName" value="Alice">
<!-- Submits: firstName=Alice -->Remplissage automatique et saisie prédictive
Définissez des valeurs pour l’attribut autocomplete, comme email, given-name, new-password ou current-password, afin d’aider les gestionnaires de mots de passe et le remplissage automatique du navigateur à remplir correctement les formulaires.
<input type="email" name="email" autocomplete="email">
<input type="password" name="pass" autocomplete="current-password">Vérification rapide
Quel est le rôle de l’attribut for sur un élément <label> ?
Récapitulatif : formulaires HTML accessibles
Chaque champ de saisie a besoin d’un libellé. Choisissez le type de champ adapté aux données. Regroupez les contrôles associés avec un fieldset. Utilisez le type de bouton submit pour envoyer le formulaire. Exploitez les fonctionnalités natives des formulaires — validation, navigation au clavier et remplissage automatique — avant d’ajouter JavaScript.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 41
- Leçons
- 163
Questions Fréquemment Posées
La leçon « Formulaires : input, label, button » est-elle gratuite ?
Oui — le texte complet de « Formulaires : input, label, button » 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 « Formulaires : input, label, button » ?
Créez des formulaires HTML accessibles avec des champs associés à des étiquettes, différents types de champs, des zones de texte, des listes de sélection et des boutons d’envoi. 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 4 sur 4.
Combien de temps prend la leçon « Formulaires : input, label, button » ?
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
- Structure d’un document : DOCTYPE, html, head, body
- Balises sémantiques : header, nav, main, article, footer
- Texte, images, liens et listes
- Formulaires : input, label, button