Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Entrée et Label | Formulaires
HTML Ultime
course content

Contenu du cours

HTML Ultime

HTML Ultime

1. Développement Web
2. Balises et Attributs
3. Structure du Document
4. Médias et Tableaux
5. Formulaires

book
Défi : Entrée et Label

Objectif

Améliorez l'expérience utilisateur du site web en créant un formulaire interactif qui nécessite des entrées pour le nom, l'email et le mot de passe, avec des étiquettes associées.

Tâche

Incorporez un formulaire convivial dans votre site web, améliorant l'engagement et l'interaction des utilisateurs. Votre tâche est de :

  • Pour l'entrée du nom : créer une entrée de texte qui collecte les noms des utilisateurs. Utilisez les attributs corrects pour assurer une expérience fluide.
    1. Définir le type approprié pour l'entrée de texte ;
    2. Définir le placeholder à John ;
    3. Assurez-vous que l'entrée est focalisée par défaut.
  • Pour l'entrée de l'email : établir une entrée d'email qui collecte les adresses email des utilisateurs. Assurez l'exactitude des données en utilisant les attributs appropriés.
    1. Définir le type correct pour l'entrée d'email ;
    2. Définir le placeholder à example@gmail.com ;
    3. Marquer le champ comme requis.
  • Pour l'entrée du mot de passe : créer une entrée de mot de passe sécurisée qui protège les données des utilisateurs. Utilisez les attributs appropriés pour améliorer la protection des données.
    1. Définir le type correct pour l'entrée du mot de passe ;
    2. Rendre le champ requis.
html

index.html

css

index.css

copy
  1. autofocus: focalise automatiquement le champ de saisie lorsque la page se charge.
  2. required: marque le champ de saisie comme obligatoire, empêchant la soumission du formulaire s'il est laissé vide.
  3. placeholder: fournit un indice ou un exemple de texte pour le champ de saisie.
  4. for et id: associe une étiquette à un champ de saisie pour améliorer l'accessibilité.
  5. type: spécifie le type de données attendu dans le champ de saisie (par exemple, texte, email, mot de passe).
html

index.html

css

index.css

copy
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 6
We're sorry to hear that something went wrong. What happened?
some-alt