Utilisation Efficace des Champs de Formulaire et des Étiquettes
Comme nous l'avons vu précédemment, l'élément le plus puissant d'un formulaire est l'input. Cet élément attend des données de l'utilisateur. Concentrons-nous sur celui-ci.
Types d'input
Champ de texte
Conçu pour la saisie de données textuelles courtes, telles que les noms d'utilisateur, adresses e-mail ou messages brefs.
<input type="text" />
Champ de mot de passe
Utilisé pour la saisie de mots de passe, où les caractères sont masqués pour des raisons de sécurité. Garantit la confidentialité en cachant les caractères saisis.
<input type="password" />
Champ d’e-mail
Utilisé pour collecter les adresses e-mail des utilisateurs. Effectue une validation côté client afin de garantir que la valeur saisie respecte le format d’une adresse e-mail.
<input type="email" />
Champ de saisie pour téléphone
Utilisé pour la collecte de numéros de téléphone auprès des utilisateurs. Permet la saisie de numéros dans divers formats, y compris les numéros internationaux.
<input type="tel" />
Champ de saisie numérique
Utilisé pour la collecte de données numériques auprès des utilisateurs. Affiche un clavier numérique sur les appareils mobiles pour faciliter la saisie.
<input type="number" />
Case à cocher
Permet aux utilisateurs de sélectionner une ou plusieurs options dans une liste de choix. Adapté aux situations où plusieurs sélections sont autorisées, comme la sélection de plusieurs éléments dans une liste ou l'acceptation de conditions générales.
<input type="checkbox" />
Bouton radio
Permet aux utilisateurs de sélectionner une option parmi une liste de choix mutuellement exclusifs. Adapté aux situations où une seule option doit être sélectionnée, comme la sélection du genre ou le choix d'une méthode de paiement.
<input type="radio" />
Champ de fichier
Permet aux utilisateurs de téléverser des fichiers depuis leur appareil, de choisir depuis leur système de fichiers local et de les soumettre avec les données du formulaire. Cette fonctionnalité est particulièrement utile pour joindre des documents ou des images.
<input type="file" />
Champ de date, champ d'heure et champ DateTime
Permet aux utilisateurs de saisir des dates, des heures ou les deux. Offre des interfaces conviviales pour sélectionner des dates et des heures. Utile pour recueillir des dates de naissance, des horaires de rendez-vous ou des plannings d'événements.
<input type="date" />
<input type="time" />
<input type="datetime-local" />
Exemple : Saisir une valeur dans les champs pour obtenir différentes suggestions. Aucune donnée ne sera collectée.
index.html
Il est possible que vous ayez remarqué que remplir le formulaire n'est pas très pratique lorsque l'on ne comprend pas ce qui est demandé dans chaque champ. C'est pourquoi les libellés sont là pour nous aider.
Étiquettes
Les étiquettes (<label>
) sont essentielles pour associer des textes descriptifs aux éléments de saisie de formulaire, améliorant ainsi l’accessibilité et la convivialité. Il est crucial que l’attribut for
de la balise <label>
corresponde à l’attribut id
de l’élément input
associé.
Exemple :
<label for="username">Username:</label>
<input type="text" id="username" />
Dans l’exemple ci-dessus :
- Lorsque vous cliquez sur l’étiquette
Username:
, le champ de saisie correspondant reçoit automatiquement le focus ; - L’élément
label
et l’élémentinput
sont reliés grâce aux attributsfor
etid
respectivement ; - Les attributs
for
etid
ont la même valeur (username
).
Faciliter la saisie dans le formulaire en ajoutant des étiquettes aux champs de saisie de l’exemple précédent.
Exemple :
index.html
Tutoriel vidéo
1. Quel attribut de la balise <label>
est utilisé pour l'associer à un élément <input>
spécifique dans un formulaire ?
2. Quel attribut manque à l’élément input pour qu’il soit associé à l’élément label ?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 3.13
Utilisation Efficace des Champs de Formulaire et des Étiquettes
Glissez pour afficher le menu
Comme nous l'avons vu précédemment, l'élément le plus puissant d'un formulaire est l'input. Cet élément attend des données de l'utilisateur. Concentrons-nous sur celui-ci.
Types d'input
Champ de texte
Conçu pour la saisie de données textuelles courtes, telles que les noms d'utilisateur, adresses e-mail ou messages brefs.
<input type="text" />
Champ de mot de passe
Utilisé pour la saisie de mots de passe, où les caractères sont masqués pour des raisons de sécurité. Garantit la confidentialité en cachant les caractères saisis.
<input type="password" />
Champ d’e-mail
Utilisé pour collecter les adresses e-mail des utilisateurs. Effectue une validation côté client afin de garantir que la valeur saisie respecte le format d’une adresse e-mail.
<input type="email" />
Champ de saisie pour téléphone
Utilisé pour la collecte de numéros de téléphone auprès des utilisateurs. Permet la saisie de numéros dans divers formats, y compris les numéros internationaux.
<input type="tel" />
Champ de saisie numérique
Utilisé pour la collecte de données numériques auprès des utilisateurs. Affiche un clavier numérique sur les appareils mobiles pour faciliter la saisie.
<input type="number" />
Case à cocher
Permet aux utilisateurs de sélectionner une ou plusieurs options dans une liste de choix. Adapté aux situations où plusieurs sélections sont autorisées, comme la sélection de plusieurs éléments dans une liste ou l'acceptation de conditions générales.
<input type="checkbox" />
Bouton radio
Permet aux utilisateurs de sélectionner une option parmi une liste de choix mutuellement exclusifs. Adapté aux situations où une seule option doit être sélectionnée, comme la sélection du genre ou le choix d'une méthode de paiement.
<input type="radio" />
Champ de fichier
Permet aux utilisateurs de téléverser des fichiers depuis leur appareil, de choisir depuis leur système de fichiers local et de les soumettre avec les données du formulaire. Cette fonctionnalité est particulièrement utile pour joindre des documents ou des images.
<input type="file" />
Champ de date, champ d'heure et champ DateTime
Permet aux utilisateurs de saisir des dates, des heures ou les deux. Offre des interfaces conviviales pour sélectionner des dates et des heures. Utile pour recueillir des dates de naissance, des horaires de rendez-vous ou des plannings d'événements.
<input type="date" />
<input type="time" />
<input type="datetime-local" />
Exemple : Saisir une valeur dans les champs pour obtenir différentes suggestions. Aucune donnée ne sera collectée.
index.html
Il est possible que vous ayez remarqué que remplir le formulaire n'est pas très pratique lorsque l'on ne comprend pas ce qui est demandé dans chaque champ. C'est pourquoi les libellés sont là pour nous aider.
Étiquettes
Les étiquettes (<label>
) sont essentielles pour associer des textes descriptifs aux éléments de saisie de formulaire, améliorant ainsi l’accessibilité et la convivialité. Il est crucial que l’attribut for
de la balise <label>
corresponde à l’attribut id
de l’élément input
associé.
Exemple :
<label for="username">Username:</label>
<input type="text" id="username" />
Dans l’exemple ci-dessus :
- Lorsque vous cliquez sur l’étiquette
Username:
, le champ de saisie correspondant reçoit automatiquement le focus ; - L’élément
label
et l’élémentinput
sont reliés grâce aux attributsfor
etid
respectivement ; - Les attributs
for
etid
ont la même valeur (username
).
Faciliter la saisie dans le formulaire en ajoutant des étiquettes aux champs de saisie de l’exemple précédent.
Exemple :
index.html
Tutoriel vidéo
1. Quel attribut de la balise <label>
est utilisé pour l'associer à un élément <input>
spécifique dans un formulaire ?
2. Quel attribut manque à l’élément input pour qu’il soit associé à l’élément label ?
Merci pour vos commentaires !