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 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 il est possible de faire défiler l'élément et de le redimensionner.
Assurez-vous que les utilisateurs saisissent les 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é, leur permettant 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 qu'il s'agit, dans ce cas, d'une adresse e-mail au format approprié.
En savoir plus sur les différents types d'entrées Ces outils offrent également des fonctionnalités de validation intégrées.
Aider les utilisateurs à renseigner les dates
Quand voulez-vous commencer votre prochain trajet ?
Pour aider les utilisateurs à renseigner les dates, utilisez type="date".
Certains navigateurs affichent le format sous la forme d'un espace réservé, tel que yyyy-mm-dd, pour montrer comment saisir la date.
Tous les navigateurs récents proposent des interfaces personnalisées pour la sélection des dates sous la forme d'un sélecteur de date.
Aider les utilisateurs à sélectionner une option
Pour que les utilisateurs puissent sélectionner ou désélectionner une option possible, utilisez type="checkbox".
Voulez-vous proposer plusieurs options ?
Il existe plusieurs alternatives selon 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.
Vous pouvez également utiliser l'élément <select>.
Les utilisateurs peuvent faire défiler la liste des options disponibles et en choisir une.
Pour certains cas d'utilisation, tels que le choix d'une plage de nombres, un <input> de type range peut être une bonne option.
Avez-vous besoin de donner 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> 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 couleur dans les navigateurs compatibles, ainsi que 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".
Les utilisateurs ne peuvent ni voir, ni modifier la valeur d'une <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 particulier où aucun élément ni type intégré ne convient.
Aider les utilisateurs à remplir votre formulaire
Il existe de nombreux types et éléments de formulaire, mais lequel devriez-vous choisir ?
Pour certains cas d'utilisation, il est simple de choisir l'élément et le type appropriés, tels que <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>.
En savoir plus sur le choix entre des listes déroulantes et des listes déroulantes
En général, assurez-vous de tester votre formulaire auprès d'utilisateurs réels pour trouver le meilleur élément et le meilleur type de formulaire.
Testez vos connaissances
Tester vos connaissances sur les champs de formulaire
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", chaque caractère saisi est masqué par un astérisque (*) ou un point (•).type="password".