HTML
LEÇON 5
Objectif du Cours
Ce cours a pour objectif de vous apprendre à créer des formulaires en HTML. Vous découvrirez les différentes balises et attributs nécessaires pour construire des formulaires fonctionnels et accessibles. De plus, vous apprendrez à utiliser le CSS pour améliorer l'apparence de vos formulaires et à manipuler les données soumises grâce à JavaScript. À la fin du cours, vous serez capable de concevoir des formulaires efficaces et attrayants pour diverses applications web.
Introduction
Ce cours a pour objectif de vous apprendre à créer des formulaires en HTML. Vous découvrirez les différentes balises et attributs nécessaires pour construire des formulaires fonctionnels et accessibles. De plus, vous apprendrez à utiliser le CSS pour améliorer l'apparence de vos formulaires et à manipuler les données soumises grâce à JavaScript. À la fin du cours, vous serez capable de concevoir des formulaires efficaces et attrayants pour diverses applications web.
Structure du Formulaire
Le formulaire est encadré par la balise < form > qui définit le début et la fin du formulaire. Les éléments du formulaire sont contenus à l'intérieur de cette balise.
Éléments du Formulaire
1. Champs de Texte (< input type="text" >) : Ces champs permettent aux utilisateurs de saisir du texte. Ils sont définis avec l'attribut type égal à "text". Par exemple :
2. Champs de Nombre (< input type="number" >) : Ces champs permettent aux utilisateurs de saisir des nombres. L'attribut type est défini à "number". Exemple :
3. Champs d'E-mail (< input type="email" >) : Ces champs sont destinés à la saisie d'adresses e-mail. L'attribut type est défini à "email". Exemple :
4. Champs de Téléphone (< input type="tel" >) : Ces champs sont utilisés pour les numéros de téléphone. L'attribut type est défini à "tel". Exemple :
Autres Types de Champs et Attributs
Voici une liste d'autres types de champs et d'attributs couramment utilisés dans les formulaires HTML :
Types de Champs :
password: Pour les mots de passe.url: Pour les URL.file: Pour téléverser des fichiers.radio: Pour les options mutuellement exclusives.checkbox: Pour les options multiples.date: Pour les dates.time: Pour les heures.color: Pour les sélecteurs de couleur.
Attributs Importants :
required: Indique que le champ doit être rempli avant de soumettre le formulaire.disabled: Désactive un élément de formulaire.placeholder: Affiche un texte de rappel dans un champ de saisie.readonly: Rend un champ de texte en lecture seule.multiple: Permet de sélectionner plusieurs options dans un menu déroulant ou avec des cases à cocher.minetmax: Définit les valeurs minimale et maximale pour les champs numériques.
Champs de Sélection
Menu Déroulant (< select >) : Les menus déroulants permettent aux utilisateurs de choisir parmi plusieurs options. Ils sont définis avec la balise < select > et contiennent des balises < option > pour chaque choix. Exemple :
La propriété border-collapse: collapse assure que les bordures se fusionnent pour un aspect plus propre.
Les zones de texte permettent aux utilisateurs de saisir du texte sur plusieurs lignes. Exemple :
La propriété border-collapse: collapse assure que les bordures se fusionnent pour un aspect plus propre.
Attributs Additionnels
Voici quelques attributs supplémentaires qui peuvent être utilisés pour personnaliser les champs de formulaire :
- Attributs pour < select > :
- size : Définit le nombre de lignes visibles dans le menu déroulant.
- multiple : Permet de sélectionner plusieurs options en même temps.
- Attributs pour < textarea > :
- rows : Définit le nombre de lignes de texte visibles dans la zone de texte.
- cols : Définit le nombre de colonnes de texte visibles dans la zone de texte.
Types de Champs de Formulaire Supplémentaire
- Champ de Recherche (< input type="search" >) : Utilisé pour les champs de recherche avec des fonctionnalités spéciales comme la saisie semi-automatique.
- Champ de Range (< input type="range" >) : Permet aux utilisateurs de sélectionner une valeur numérique à partir d'une plage spécifiée.
- Attribut pattern : Permet de définir une expression régulière pour valider le contenu d'un champ de texte.
- Attribut autocomplete :Indique au navigateur s'il doit activer la fonction d'auto-complétion pour un champ de formulaire.
- Attribut autofocus :Place automatiquement le curseur de texte dans un champ de formulaire lorsqu'une page est chargée.
- Attribut form :Permet de spécifier à quel formulaire appartient un élément de formulaire, même s'il n'est pas directement contenu dans la balise < form >.
En combinant ces éléments et attributs, les formulaires HTML permettent de collecter des informations de manière structurée et conviviale pour l'utilisateur.
Cette leçon est terminée. Vous pouvez la trouver au format PDF ci-dessous. Merci.
LECON 5 (PDF)
Trouver des Exercices et des Tutorielles ICI
About BKOI SCHOOL
Qu'est-ce que BKOISCHOOL ?
Nous créons des expériences d'apprentissage simplifiées et interactives. L'apprentissage du développement web devrait être facile à comprendre et disponible pour tout le monde, partout ! BKOI SCHOOL est une école pour les développeurs web, couvrant tous les aspects du développement web :
BKOI SCHOOL a été créé en 2024 et tire son nom de la capitale du MALI BAMAKO (BKO).