Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Créer un Formulaire avec des Champs et des Étiquettes | Formulaires HTML et Saisie Utilisateur
HTML Ultime

bookDéfi : Créer un Formulaire avec des Champs et des Étiquettes

Objectif

Améliorer l'expérience utilisateur du site web en créant un formulaire interactif nécessitant des champs pour le nom, l'email et le mot de passe, chacun accompagné de son label associé.

Tâche

Ajouter un formulaire simple et convivial à la page. Respecter les exigences suivantes :

  1. Champ Nom
    • Utiliser un champ de saisie de texte.
    • Définir l'espace réservé à John.
    • Activer la mise au point automatique (autofocus) sur ce champ.
  2. Champ Email
    • Utiliser un champ de saisie de type email.
    • Définir l'espace réservé à example@gmail.com.
    • Rendre ce champ obligatoire.
  3. Champ Mot de passe
    • Utiliser un champ de saisie de type mot de passe.
    • Rendre ce champ obligatoire.
index.html

index.html

index.css

index.css

copy
  1. autofocus : place automatiquement le focus sur le champ de saisie lors du chargement de la page.
  2. required : rend le champ de saisie obligatoire, empêchant la soumission du formulaire s'il est laissé vide.
  3. placeholder : affiche un indice ou un exemple de texte dans le champ de saisie.
  4. for et id : associe une étiquette à un champ de saisie pour améliorer l'accessibilité.
  5. type : définit le type de données attendu dans le champ de saisie (par exemple, text, email, password).
index.html

index.html

index.css

index.css

copy
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 6

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

bookDéfi : Créer un Formulaire avec des Champs et des Étiquettes

Glissez pour afficher le menu

Objectif

Améliorer l'expérience utilisateur du site web en créant un formulaire interactif nécessitant des champs pour le nom, l'email et le mot de passe, chacun accompagné de son label associé.

Tâche

Ajouter un formulaire simple et convivial à la page. Respecter les exigences suivantes :

  1. Champ Nom
    • Utiliser un champ de saisie de texte.
    • Définir l'espace réservé à John.
    • Activer la mise au point automatique (autofocus) sur ce champ.
  2. Champ Email
    • Utiliser un champ de saisie de type email.
    • Définir l'espace réservé à example@gmail.com.
    • Rendre ce champ obligatoire.
  3. Champ Mot de passe
    • Utiliser un champ de saisie de type mot de passe.
    • Rendre ce champ obligatoire.
index.html

index.html

index.css

index.css

copy
  1. autofocus : place automatiquement le focus sur le champ de saisie lors du chargement de la page.
  2. required : rend le champ de saisie obligatoire, empêchant la soumission du formulaire s'il est laissé vide.
  3. placeholder : affiche un indice ou un exemple de texte dans le champ de saisie.
  4. for et id : associe une étiquette à un champ de saisie pour améliorer l'accessibilité.
  5. type : définit le type de données attendu dans le champ de saisie (par exemple, text, email, password).
index.html

index.html

index.css

index.css

copy
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 6
some-alt