Récapitulatif - Formulaires n°2
Fait partie de la section Fondamentaux du Journey HTML de Coddy. Leçon 47 sur 60.
Défi
FacileCréons un simple formulaire d’inscription, tout comme celui de l’image ci-dessous !

Voici ce qu’il faut inclure :
- Une balise
<form>pour tout regrouper. - 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 avoirid="username",name="username",type="text"et l’attribut placeholder"Enter your username". - Un champ E-mail avec une étiquette et un champ de saisie d’e-mail. L’étiquette doit afficher
"Email:"et utiliserfor="email". Le champ de saisie doit avoirid="email",name="email",type="email", et l’attribut placeholder"Enter your email". - Un champ Mot de passe avec une étiquette et un champ de saisie de mot de passe. L’étiquette doit afficher
"Password:"et utiliserfor="userpassword". Le champ de saisie doit avoirid="userpassword",name="userpassword",type="password"et l’attribut placeholder"Enter your password". - 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 avoirid="student",name="usertype",value="student"et une étiquette affichant"Student". Le bouton radio"Teacher"doit avoirid="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. - 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 avoirid="sports",name="interests",value="sports"et une étiquette affichant"Sports". La case"Music"doit avoirid="music",name="interests",value="music"et une étiquette affichant"Music". La case"Technology"doit avoirid="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. - 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 avoirtype="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,nameetvalue.
Essayez vous-même
<!DOCTYPE html>
<html>
<body>
<!-- Écrivez votre code ici -->
</body>
</html>Toutes les leçons de Fondamentaux
1Les bases du HTML
Qu'est-ce que le HTML ?Structure de base du HTMLBalises et élémentsImbrication et fermeture des balisesCommentaires en HTML7Page de profil personnel
Présentation du projetSection d'en-tête2Texte et mise en forme
TitresParagraphesSauts de ligneTexte en gras et italiqueGras et italique (suite)Récapitulatif - Mise en forme8Formulaires et champs de saisie, partie 1
Bases des formulairesChamps de texteAttributs des champsChamp de mot de passeLibellés pour les champsRécapitulatif - Formulaire de base11Page d'inscription à un événement
Aperçu du projetSection d'en-tête3Travailler avec les listes
Liste non ordonnéeListe ordonnéeListes imbriquéesRécapitulatif - Les listes6Mise en page
DivisionsSpans en ligneBalises sémantiquesSections et articlesRécapitulatif - Mise en page9Formulaires et entrées, partie 2
Boutons radioCases à cocherListes déroulantesBoutonsBoutons dans les formulairesRécapitulatif - Formulaires n°1Récapitulatif - Formulaires n°2Entraînez-vous par vous-même : Playground Web