Quels champs de formulaire puis-je utiliser ?
Pour offrir la meilleure expérience utilisateur possible,
veillez à 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 leur permettant d'insérer du texte, utilisez l'élément <input>.
Il s'agit du meilleur choix pour les mots simples et les textes courts.
Pour un texte plus long, utilisez l'élément <textarea>.
Cela permet d'utiliser
plusieurs lignes de texte,
et permet à l'utilisateur de voir plus facilement le texte qu'il a saisi, car l'élément est déroulant et redimensionnable.
S'assurer que les utilisateurs saisissent des données au bon format
Voulez-vous aider les utilisateurs à renseigner un numéro de téléphone ?
Remplacez l'attribut type par type="tel" pour <input>.
Les utilisateurs d'appareils mobiles
disposent 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".
Là encore, un clavier à l'écran adapté est affiché.
Utilisez l'attribut required pour rendre le champ de formulaire obligatoire.
Une fois le formulaire envoyé, le navigateur vérifie que la valeur saisie est valide et que celle-ci est valide.
qu'il s'agit d'une adresse
e-mail au bon format.
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 à renseigner des dates
Quand souhaitez-vous commencer votre prochain trajet ?
Pour aider les utilisateurs à indiquer des dates, utilisez type="date".
Certains navigateurs affichent le format sous la forme d'un espace réservé comme yyyy-mm-dd,
montrant comment
saisir la date.
Tous les navigateurs récents proposent des interfaces personnalisées pour sélectionner les dates à l'aide d'un sélecteur.
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".
Voulez-vous proposer plusieurs options ?
Différentes alternatives s'offrent à vous en fonction de votre cas d'utilisation.
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 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 la liste des options disponibles et en choisir une.
Dans certains cas d'utilisation, comme le choix d'une plage de nombres,
<input> de type range peut être une bonne option.
Avez-vous besoin d'offrir la possibilité 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 la 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 couleur dans les navigateurs compatibles.
et il en existe d'autres. 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 s’assurer que le mot de
passe ne peut 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 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 particulier, lorsqu'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 devez-vous choisir ?
Pour 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 un élément type="checkbox" ou <select>.
Découvrez comment choisir entre les zones de liste et les listes déroulantes.
En général, assurez-vous de Testez votre formulaire auprès d'utilisateurs réels pour trouver les meilleurs éléments et types de formulaire.
Testez vos connaissances
Tester vos connaissances sur les champs des formulaires
Est-il possible d'importer plusieurs fichiers à l'aide d'une commande 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", tous les caractères saisis sont masqués par un astérisque (*) ou un point (•).type="password".