Récapitulatif - Formulaires n°2
Fait partie de la section Fundamentals du Journey HTML de Coddy — leçon 47 sur 60.
Défi
FacileConstruisons un formulaire d'inscription simple, tout comme celui de l'image ci-dessous !
Voici ce qu'il faut inclure :
- Une balise
<form>pour tout regrouper. - Un champ Username avec une étiquette (label) et une entrée de texte. L'étiquette doit afficher
"Username:"et utiliser for="username". L'entrée doit avoirid="username",name="username",type="text", et l'attribut placeholder"Enter your username". - Un champ Email avec une étiquette et une entrée d'email. L'étiquette doit afficher
"Email:"et utiliserfor="email". L'entrée doit avoirid="email",name="email",type="email", et l'attribut placeholder"Enter your email". - Un champ Password avec une étiquette et une entrée de mot de passe. L'étiquette doit afficher
"Password:"et utiliserfor="userpassword". L'entrée doit avoirid="userpassword",name="userpassword",type="password", et l'attribut placeholder"Enter your password". - Un groupe de boutons radio pour permettre aux utilisateurs de sélectionner leur type :
"Student"ou"Teacher". Ajoutez un paragraphe ou un titre qui affiche"User Type:"au-dessus des boutons radio. Le bouton radio"Student"doit avoirid="student",name="usertype",value="student", et une étiquette qui affiche"Student". Le bouton radio"Teacher"doit avoirid="teacher",name="usertype",value="teacher", et une étiquette qui affiche"Teacher". Rappelez-vous : 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 pour permettre aux utilisateurs de choisir leurs intérêts :
"Sports","Music", et"Technology". Ajoutez un paragraphe ou un titre qui affiche"Interests:"au-dessus des cases à cocher. La case à cocher"Sports"doit avoirid="sports",name="interests",value="sports", et une étiquette qui affiche"Sports". La case à cocher"Music"doit avoirid="music",name="interests",value="music", et une étiquette qui affiche"Music". La case à cocher"Technology"doit avoirid="technology",name="interests",value="technology", et une étiquette qui affiche"Technology". Rappelez-vous : toutes les cases à cocher doivent avoir le même attribut name ("interests") puisqu'elles font partie du même groupe. - Un bouton Sign Up et un bouton Clear à la fin du formulaire. Le bouton Sign Up doit avoir
type="submit"et le bouton Clear doit avoirtype="reset". Le bouton Sign Up doit afficher le texte "Sign Up" et le bouton Clear doit afficher le texte “Clear”.
Assurez-vous d'inclure des étiquettes et des titres appropriés pour une expérience utilisateur conviviale !
N'oubliez pas que les entrées doivent inclure ces attributs importants :
type,id,name, etvalue.
Essayez vous-même
<!DOCTYPE html>
<html>
<body>
<!-- Écrivez votre code ici -->
</body>
</html>Toutes les leçons de Fundamentals
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ête
Photo de profilSection À propos de moiLiens sociaux2Texte 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êteSection des détails de l'événementFormulaire d'inscriptionSection de pied de page3Travailler 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°2