Formulaires : recueillir les saisies des utilisateurs
Créez des formulaires simples avec des champs de texte, des boutons et plus encore
Formulaires : recueillir les saisies des utilisateurs est une leçon HTML for Kids gratuite sur CoddyKit. Ceci est la leçon 2 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 HTML for Kids, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML for Kids comprend 4 leçons au total.
Formulaires : recueillir les saisies des utilisateurs
Bienvenue dans la prochaine leçon ! Aujourd’hui, nous allons apprendre à créer des formulaires en HTML. Les formulaires permettent aux utilisateurs de saisir des données, comme leur nom ou leur adresse e-mail, sur votre page web.
Que sont les formulaires ?
Les formulaires servent à recueillir des informations auprès des utilisateurs. Par exemple, lorsque vous créez un compte, vous remplissez un formulaire avec des champs tels que votre nom et votre adresse e-mail.
Les formulaires en HTML sont créés à l’aide de la balise <form>.
Créer un formulaire simple
Un formulaire est créé à l’aide de la balise <form>. À l’intérieur de cette balise, vous ajoutez des champs de saisie, des boutons, etc.
Exemple :
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<button type="submit">Submit</button>
</form>
Types de champs de saisie
Les formulaires HTML prennent en charge différents types de champs de saisie. En voici quelques-uns parmi les plus courants :
text: pour saisir un texte courtemail: pour les adresses e-mailpassword: pour les mots de passenumber: pour les nombres
Exemple :
<form>
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
<br />
<label for="age">Age:</label>
<input type="number" id="age" name="age" />
</form>
Ajouter des boutons radio et des cases à cocher
Vous pouvez utiliser des boutons radio pour les options à choix unique et des cases à cocher pour les options à choix multiple.
Exemple :
<form>
<p>Favorite Color:</p>
<input type="radio" id="red" name="color" value="red" />
<label for="red">Red</label>
<br />
<input type="radio" id="blue" name="color" value="blue" />
<label for="blue">Blue</label>
<br />
<p>Hobbies:</p>
<input type="checkbox" id="reading" name="hobby" value="reading" />
<label for="reading">Reading</label>
<br />
<input type="checkbox" id="sports" name="hobby" value="sports" />
<label for="sports">Sports</label>
</form>
Ajouter des menus déroulants
Vous pouvez utiliser la balise <select> pour créer des menus déroulants dans lesquels les utilisateurs choisissent une option parmi une liste.
Exemple :
<form>
<label for="country">Select your country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="uk">United Kingdom</option>
<option value="canada">Canada</option>
</select>
</form>
Boutons de formulaire
Les boutons permettent aux utilisateurs d’envoyer ou de réinitialiser le formulaire. La balise <button> est couramment utilisée.
Exemple :
<form>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
Mettre en forme votre formulaire
Vous pouvez mettre en forme votre formulaire avec CSS pour le rendre plus attrayant. Par exemple, vous pouvez ajuster la taille des champs ou modifier leurs couleurs.
Exemple :
<style>
form {
width: 300px;
margin: 20px auto;
}
input, select, button {
width: 100%;
padding: 10px;
margin: 5px 0;
}
</style>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
<button type="submit">Submit</button>
</form>
Bravo !
Félicitations ! Vous avez appris à créer des formulaires, à utiliser différents types de champs de saisie et à les mettre en forme. Les formulaires sont essentiels pour recueillir les données des utilisateurs et rendre vos pages web interactives. Dans la prochaine leçon, nous explorerons l’utilisation de contenus multimédias, comme les vidéos et l’audio, pour rendre vos pages plus dynamiques. Préparez-vous à laisser libre cours à votre créativité !
Questions Fréquemment Posées
La leçon « Formulaires : recueillir les saisies des utilisateurs » est-elle gratuite ?
Oui — le texte complet de « Formulaires : recueillir les saisies des utilisateurs » 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 HTML for Kids, passe à CoddyKit PRO. Le cours HTML for Kids comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Formulaires : recueillir les saisies des utilisateurs » ?
Créez des formulaires simples avec des champs de texte, des boutons et plus encore Tu pratiques HTML for Kids 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 HTML for Kids ?
Aucune expérience préalable n'est requise. HTML for Kids 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 2 sur 4.
Combien de temps prend la leçon « Formulaires : recueillir les saisies des utilisateurs » ?
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 HTML for Kids ?
Oui. Chaque leçon HTML for Kids 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
- Tableaux : organiser les données
- Formulaires : recueillir les saisies des utilisateurs
- Attributs HTML
- Multimédia : ajouter des vidéos et du son