Menu
Coddy logo textTech

Récapitulatif - Formulaires n°2

Fait partie de la section Fondamentaux du Journey HTML de Coddy. Leçon 47 sur 60.

challenge icon

Défi

Facile

Créons un simple formulaire d’inscription, tout comme celui de l’image ci-dessous !

Voici ce qu’il faut inclure :

  1. Une balise <form> pour tout regrouper.
  2. Un champ Nom d’utilisateur avec une étiquette et un champ de saisie de texte. L’étiquette doit afficher "Username:" et utiliser for="username". Le champ de saisie doit avoir id="username", name="username", type="text" et l’attribut placeholder "Enter your username".
  3. Un champ E-mail avec une étiquette et un champ de saisie d’e-mail. L’étiquette doit afficher "Email:" et utiliser for="email". Le champ de saisie doit avoir id="email", name="email", type="email", et l’attribut placeholder "Enter your email".
  4. Un champ Mot de passe avec une étiquette et un champ de saisie de mot de passe. L’étiquette doit afficher "Password:" et utiliser for="userpassword". Le champ de saisie doit avoir id="userpassword", name="userpassword", type="password" et l’attribut placeholder "Enter your password".
  5. Un groupe de boutons radio permettant aux utilisateurs de sélectionner leur type : "Student" ou "Teacher". Ajoutez un paragraphe ou un titre affichant "User Type:" au-dessus des boutons radio. Le bouton radio "Student" doit avoir id="student", name="usertype", value="student" et une étiquette affichant "Student". Le bouton radio "Teacher" doit avoir id="teacher", name="usertype", value="teacher" et une étiquette affichant "Teacher". N’oubliez pas : les deux boutons radio doivent avoir le même attribut name ("usertype") afin qu’un seul puisse être sélectionné à la fois.
  6. Un groupe de cases à cocher permettant aux utilisateurs de choisir leurs centres d’intérêt : "Sports", "Music" et "Technology". Ajoutez un paragraphe ou un titre affichant "Interests:" au-dessus des cases à cocher. La case "Sports" doit avoir id="sports", name="interests", value="sports" et une étiquette affichant "Sports". La case "Music" doit avoir id="music", name="interests", value="music" et une étiquette affichant "Music". La case "Technology" doit avoir id="technology", name="interests", value="technology" et une étiquette affichant "Technology". N’oubliez pas : toutes les cases à cocher doivent avoir le même attribut name ("interests") puisqu’elles appartiennent au même groupe.
  7. Un bouton d’inscription et un bouton d’effacement à la fin du formulaire. Le bouton d’inscription doit avoir type="submit" et le bouton d’effacement doit avoir type="reset". Le bouton d’inscription doit afficher le texte « Sign Up » et le bouton d’effacement doit afficher le texte « Clear ».

Veillez à inclure des étiquettes et des titres appropriés pour une expérience conviviale !

N’oubliez pas que les champs de saisie doivent inclure ces attributs importants : type, id, name et value.

Essayez vous-même

<!DOCTYPE html>
<html>
    <body>
        <!-- Écrivez votre code ici -->
    </body>
</html>

Toutes les leçons de Fondamentaux

Entraînez-vous par vous-même : Playground Web