Contenu du cours
HTML Ultime
HTML Ultime
2. Balises et Attributs HTML
Compréhension des Balises HTMLTravail Avec les Attributs HTMLCompréhension des Balises Paires et Simples en HTMLBalisage et Mise en Forme du Texte en HTMLDéfi : Créer le Paragraphe de Votre Première Page WebDéfi : Créer une Page Web de Présentation PersonnelleDéfi : Concevoir une Page Web de Présentation de FilmsUtilisation des Liens et des Boutons en HTMLDéfi : Créer des Liens vers des Sites Web PopulairesValidation de Votre Code HTML Selon les Meilleures Pratiques
3. Structure d'un Document HTML
4. Travail avec les Médias et les Tableaux
Ajout d’Images en HTMLDéfi : Travailler Avec des ImagesTravail avec des Images Cliquables, des Légendes et l’OptimisationCompréhension des Graphiques Vectoriels et MatricielsIntégration de l'Audio et de la Vidéo pour un Contenu Multimédia EnrichiDéfi : Intégrer de l'audio et de la vidéo en HTMLCréation et Structuration de Tableaux en HTMLDéfi : Concevoir un Tableau HTML Fonctionnel
5. Formulaires HTML et Saisie Utilisateur
Introduction aux Formulaires HTMLFondamentaux de la Création de Formulaires en HTMLUtilisation des labels pour une meilleure accessibilité des formulairesAmélioration des Formulaires avec des Attributs d'EntréeExploration des Différents Types de Champs de Saisie en HTMLDéfi : Créer un Formulaire avec des Champs et des ÉtiquettesUtilisation de l’élément Textarea pour la Saisie MultiligneUtilisation de l’élément Select pour les Menus DéroulantsUtilisation de l’Élément Datalist pour des Suggestions de Saisie PrédéfiniesRegroupement des éléments de formulaire pour une meilleure structure
Dé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
Intégrer un formulaire convivial à votre site web afin d'accroître l'engagement et l'interaction des utilisateurs. Votre tâche consiste à :
- Pour le champ nom : créer un champ texte permettant de recueillir les noms des utilisateurs. Utiliser les attributs appropriés pour garantir une expérience fluide.
- Définir le
type
adéquat pour le champ texte ; - Définir le
placeholder
surJohn
; - S'assurer que le champ est focalisé par défaut.
- Définir le
- Pour le champ email : mettre en place un champ email pour recueillir les adresses électroniques des utilisateurs. Garantir la précision des données en utilisant les attributs appropriés.
- Définir le
type
correct pour le champ email ; - Définir le
placeholder
surexample@gmail.com
; - Marquer le champ comme requis.
- Définir le
- Pour le champ mot de passe : créer un champ mot de passe sécurisé afin de protéger les données des utilisateurs. Utiliser les attributs appropriés pour renforcer la sécurité des données.
- Définir le
type
correct pour le champ mot de passe ; - Rendre le champ obligatoire.
- Définir le
index.html
index.css
autofocus
: place automatiquement le focus sur le champ de saisie lors du chargement de la page.required
: rend le champ de saisie obligatoire, empêchant la soumission du formulaire s'il est vide.placeholder
: affiche un indice ou un exemple de texte dans le champ de saisie.for
etid
: associe une étiquette à un champ de saisie pour une meilleure accessibilité.type
: définit le type de données attendu dans le champ de saisie (par exemple, texte, email, mot de passe).
index.html
index.css
Tout était clair ?
Merci pour vos commentaires !
Section 5. Chapitre 6