Pour offrir la meilleure expérience utilisateur possible, veillez à utiliser l'élément et l'élément type qui conviennent le mieux aux données saisies par l'utilisateur.
Aider les utilisateurs à saisir du texte
Utilisez l'élément <input> pour fournir un champ de formulaire. Un <input> est le meilleur choix pour les mots, les expressions et les entrées courtes. Pour les textes plus longs, utilisez l'élément <textarea>. Cela permet d'afficher plusieurs lignes de texte et facilite la lecture du texte saisi par l'utilisateur, car l'élément est défilable et redimensionnable.
S'assurer que les utilisateurs saisissent les données au bon format
Souhaitez-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.
Pour une adresse e-mail, utilisez type="email".
Un clavier à l'écran adapté s'affiche.
Utilisez l'attribut required pour rendre le champ de formulaire obligatoire.
Lorsque le formulaire est envoyé, le navigateur vérifie que l'entrée a une valeur et qu'elle est valide (dans ce cas, qu'il s'agit d'une adresse e-mail bien 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 forme d'espace réservé, tel que yyyy-mm-dd, pour montrer comment saisir la date.
Tous les navigateurs modernes proposent 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 possible, utilisez type="checkbox".
Souhaitez-vous proposer plusieurs options ?
Selon votre cas d'utilisation, il existe différentes alternatives.
Commencez par examiner 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 en même temps, 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, comme 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> en combinaison avec l'élément <datalist>.
Vous obtenez ainsi une combinaison d'un champ de texte et d'une liste d'éléments <option>.
S'assurer que les utilisateurs peuvent remplir 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 couleurs dans les navigateurs compatibles, ainsi que divers 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".
Les utilisateurs ne peuvent pas voir ni modifier la valeur d'un <input> de type hidden.
Pour permettre aux utilisateurs d'importer et d'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 spécial pour lequel aucun élément ni type intégré ne convient.
Aider les utilisateurs à remplir votre formulaire
Il existe de nombreux éléments et types de formulaires, 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 de sélection.
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 que vous avez bien compris
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".