Quels champs de formulaire puis-je utiliser ?
Pour offrir la meilleure expérience utilisateur possible, assurez-vous d'utiliser l'élément et l'élément type
les plus appropriés pour les données saisies par l'utilisateur.
Aider les utilisateurs à saisir du texte
Pour fournir aux utilisateurs un champ de formulaire permettant d'insérer du texte, utilisez l'élément <input>
.
Il est idéal pour les mots uniques et les textes courts.
Pour un texte plus long, utilisez l'élément <textarea>
.
Cela permet d'utiliser plusieurs lignes de texte et facilite la visualisation du texte saisi par l'utilisateur, car l'élément est à faire défiler et redimensionnable.
Assurez-vous que les utilisateurs saisissent les données au bon format
Voulez-vous aider les utilisateurs à saisir un numéro de téléphone ?
Remplacez l'attribut type
par type="tel"
pour <input>
.
Les utilisateurs d'appareils mobiles bénéficient d'un clavier à l'écran adapté, ce qui leur permet de saisir le numéro de téléphone plus rapidement et plus facilement.
Pour une adresse e-mail, utilisez type="email"
.
Un clavier à l'écran adapté s'affiche à nouveau.
Utilisez l'attribut required
pour rendre le champ du formulaire obligatoire.
Lorsque le formulaire est envoyé, le navigateur vérifie que la valeur de la saisie est valide: dans ce cas, qu'il s'agit d'une adresse e-mail correctement formatée.
En savoir plus sur les différents types d'entrées Ils fournissent également des fonctionnalités de validation intégrées.
Aider les utilisateurs à saisir des dates
Quand souhaitez-vous commencer votre prochain voyage ?
Pour aider les utilisateurs à saisir des dates, utilisez type="date"
.
Certains navigateurs affichent le format sous la forme d'un espace réservé tel que yyyy-mm-dd
, qui indique comment saisir la date.
Tous les navigateurs modernes fournissent des interfaces personnalisées pour sélectionner des dates sous la forme d'un sélecteur de date.
Aider les utilisateurs à sélectionner une option
Pour vous assurer que les utilisateurs peuvent sélectionner ou désélectionner une option, utilisez type="checkbox"
.
Voulez-vous proposer plusieurs options ?
Selon votre cas d'utilisation, plusieurs options s'offrent à vous.
Tout d'abord, examinons les solutions possibles si les utilisateurs ne doivent pouvoir choisir qu'une seule option.
Vous pouvez utiliser plusieurs éléments <input>
avec type="radio"
et la même valeur name
. Les utilisateurs voient toutes les options à la fois, mais ne peuvent en choisir qu'une seule.
Vous pouvez également utiliser l'élément <select>
.
Les utilisateurs peuvent faire défiler une liste d'options disponibles et en choisir une.
Pour certains cas d'utilisation, tels que le choix d'une plage de nombres, <input>
de type range
peut être une bonne option.
Avez-vous besoin de permettre aux utilisateurs de sélectionner plusieurs options ?
Utilisez un élément <select>
avec l'attribut multiple
ou plusieurs éléments <input>
de type checkbox
.
Vous pouvez également utiliser un <input>
avec l'élément <datalist>
.
Vous obtenez ainsi une combinaison d'un champ de texte et d'une liste d'éléments <option>
.
Assurez-vous que les utilisateurs peuvent saisir différents types de données
Il existe d'autres types d'entrées pour des cas d'utilisation spécifiques.
Il existe un <input>
de type color
pour fournir aux utilisateurs un sélecteur de couleur dans les navigateurs compatibles. Il existe également d'autres types. Pour vous assurer que les utilisateurs peuvent saisir leur mot de passe, utilisez <input>
avec type="password"
. Chaque caractère saisi est masqué par un astérisque ("*") ou un point ("•") pour que le mot de passe ne puisse pas être lu.
Voulez-vous inclure un jeton de sécurité unique dans les données du formulaire ?
Utilisez <input>
avec type="hidden"
.
La valeur d'un <input>
de type hidden
ne peut pas être vue ni modifiée par les utilisateurs.
Pour autoriser les utilisateurs à importer et à envoyer des fichiers, utilisez <input>
avec type="file"
.
Vous pouvez également définir des éléments personnalisés si vous avez un cas d'utilisation particulier, pour lequel aucun élément ou type intégré n'est adapté.
Aider les utilisateurs à remplir votre formulaire
Il existe de nombreux types et éléments de formulaire, mais lequel choisir ?
Dans certains cas d'utilisation, il est facile de choisir l'élément et le type appropriés, comme <input type="date">
. Pour d'autres, cela dépend.
Par exemple, vous pouvez utiliser plusieurs éléments <input>
avec type="checkbox"
ou un élément <select>
.
Découvrez comment choisir entre les listes déroulantes et les listes déroulantes.
En général, veillez à tester votre formulaire auprès d'utilisateurs réels pour trouver le meilleur élément et le meilleur type de formulaire.
Vérifier vos connaissances
Tester vos connaissances sur les champs de formulaire
Est-il possible d'importer plusieurs fichiers avec un contrôle de formulaire ?
<input type="files">
.<input type="file" multiple>
.<input type="multiple-files">
.Quelle est la différence entre type="text"
et type="password"
?
type="password"
.type="password"
, chaque caractère saisi est masqué par un astérisque (*
) ou un point (•
).type="password"
.