Historique des conversations
Chargement...
Chapitre 7 : Les formulaires HTML
Chapitre 7 : Les formulaires HTML
Structure d’un formulaire
Un formulaire HTML permet aux utilisateurs de saisir des données. Il commence par la balise <form> et contient divers champs.
<form action="/envoyer" method="post">
<input type="text" name="nom" placeholder="Votre nom">
<input type="submit" value="Envoyer">
</form>Champs de formulaire courants
<input type="text"> Champ texte simple
<input type="email"> Adresse e-mail
<input type="password"> Mot de passe
<input type="number"> Valeur numérique
<input type="checkbox"> Case à cocher
<input type="radio"> Bouton radio
<input type="date"> Date
<input type="submit"> Bouton d’envoiÉtiquettes et organisation
La balise <label> est utilisée pour associer un texte à un champ, ce qui améliore l'accessibilité.
<form>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
</form>Listes déroulantes et zones de texte
<select name="pays">
<option value="fr">France</option>
<option value="cd">Congo</option>
</select>
<textarea name="message" rows="4" cols="50"></textarea>Résumé
<form>: balise de formulaire<input>: champ de saisie<label>: étiquette descriptive<select>: liste déroulante<textarea>: zone de texte
Évaluation des acquis
Correction immédiate
Quiz du chapitre 7
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Champ texte
Atelier #1Crée un champ texte pour saisir un prénom, avec un placeholder.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<input type="text" placeholder="Votre prénom">
#2 — Mot de passe
Atelier #2Crée un champ pour saisir un mot de passe (caractères masqués).
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<input type="password" name="pwd">
#3 — Case à cocher
Atelier #3Crée une case à cocher 'Accepter les CGU' cochée par défaut.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<label>
<input type="checkbox" checked> Accepter les CGU
</label>
#4 — Boutons radio
Atelier #4Crée deux choix exclusifs : 'Oui' et 'Non'.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<label><input type="radio" name="choix" value="oui"> Oui</label>
<label><input type="radio" name="choix" value="non"> Non</label>
#5 — Bouton d'envoi
Atelier #5Ajoute un bouton pour soumettre le formulaire.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<button type="submit">Envoyer</button>
<!-- ou -->
<input type="submit" value="Envoyer">