Présentation détaillée des attributs de formulaire

Les attributs d'éléments HTML peuvent améliorer votre <form> et les commandes de votre formulaire.

Aider les utilisateurs à remplir les commandes du formulaire

Pour permettre aux utilisateurs de remplir plus facilement les formulaires, utilisez un attribut type approprié pour vos éléments <input>.

Les navigateurs affichent une interface utilisateur adaptée à type, comme un sélecteur de date pour un <input> de type date. Sur les appareils mobiles, les navigateurs affichent un clavier à l'écran adapté, comme un clavier numérique pour type="tel".

Certains types <input> modifient également les règles de validation d'un élément lors de l'envoi de son formulaire. Par exemple, <input type="url"> n'est valide que s'il n'est pas vide et que la valeur est une URL.

S'assurer que les utilisateurs saisissent des données

Plusieurs attributs permettent d'afficher un clavier à l'écran approprié sur les appareils tactiles. La première consiste à utiliser l'attribut type, comme indiqué ci-dessus.

Une autre option est l'attribut inputmode compatible avec Android et iOS. Contrairement à l'attribut type, l'attribut inputmode ne modifie que le clavier à l'écran fourni, et non le comportement de l'élément lui-même. L'utilisation de inputmode est une bonne option si vous souhaitez conserver l'interface utilisateur par défaut et les règles de validation par défaut d'un <input>, tout en conservant un clavier à l'écran optimisé.

Vous pouvez modifier la touche Enter sur les claviers à l'écran avec l'attribut enterkeyhint. Par exemple, enterkeyhint="next" ou enterkeyhint="done" remplace le libellé du bouton par une icône appropriée. Cela permet d'indiquer plus clairement aux utilisateurs ce qui se passe lorsqu'ils envoient le formulaire actuel.

S'assurer que les utilisateurs peuvent envoyer un formulaire

Supposons que vous remplissiez un champ <form> et que vous cliquiez sur le bouton Envoyer, mais rien ne se passe. Le problème peut être dû au fait que le bouton a été désactivé avec l'attribut disabled. Il est courant de désactiver le bouton Envoyer jusqu'à ce que le formulaire soit valide.

En théorie, cela semble logique, mais vous ne devez pas désactiver un bouton Submit (Envoyer) en attendant une entrée utilisateur complète et valide. Mettez plutôt en évidence les données non valides lors de la saisie et mettez en évidence les champs problématiques pour l'utilisateur lorsqu'il envoie le formulaire.

Toutefois, vous pouvez désactiver le bouton Envoyer une fois que le formulaire a bien été envoyé, mais n'a pas encore été traité. En savoir plus sur les boutons désactivés

Aidez les utilisateurs en affichant les données qu'ils ont déjà saisies

Imaginons que vous ayez un formulaire de paiement comportant plusieurs étapes. Comment pouvez-vous vous assurer que les valeurs saisies précédemment sont toujours là lorsque l'utilisateur revient à une étape précédente ? Utilisez l'attribut value pour afficher les valeurs déjà renseignées.

<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">

Il existe plusieurs façons de récupérer la valeur d'une commande de formulaire en JavaScript. Vous pouvez utiliser la propriété value ou accéder à la valeur avec getAttribute('value'). Il existe une grande différence : la propriété value renvoie toujours la valeur actuelle, et l'utilisation de getAttribute() renvoie toujours la valeur initiale.

Essayer Modifiez le texte du champ de nom et observez la console. Notez que la propriété value renvoie le texte actuellement visible, tandis que getAttribute('value') renvoie toujours la valeur initiale.

En savoir plus sur la différence entre les attributs DOM et les propriétés DOM

Pour les éléments <input> de type checkbox ou radio, utilisez l'attribut checked. Ajoutez-la si l'utilisateur a sélectionné une option, et supprimez-la dans le cas contraire.

S'assurer que les utilisateurs comprennent le format attendu

La valeur de l'attribut placeholder donne une indication sur le type d'informations attendu.

<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin">

Cela peut perturber les utilisateurs, car il peut sembler illogique de comprendre pourquoi une commande de formulaire semble déjà être préremplie. En outre, l'ajout d'un espace réservé peut rendre difficile l'identification des champs de formulaire qui doivent encore être remplis. De plus, le style par défaut du texte des espaces réservés peut être difficile à lire.

En règle générale, soyez prudent lorsque vous utilisez l'attribut placeholder et ne devez jamais utiliser l'attribut placeholder pour expliquer une commande de formulaire. Utilisez plutôt l'élément <label>. Découvrez pourquoi éviter d'utiliser l'attribut placeholder.

Un meilleur moyen de donner aux utilisateurs un indice sur le type d'informations attendues consiste à utiliser un élément HTML supplémentaire sous la commande de formulaire pour ajouter une explication ou un exemple.

Vérifier que les contrôles de formulaire sont prêts pour la validation

Plusieurs attributs HTML permettent d'activer la validation intégrée. Utilisez l'attribut required pour éviter d'envoyer des champs vides. Des validations supplémentaires peuvent être appliquées avec l'attribut type. Par exemple, la valeur d'un <input> obligatoire de type="url" doit être une URL.

Pour vous assurer qu'un utilisateur saisit un nombre minimal de caractères, utilisez l'attribut minlength. Pour interdire les valeurs comportant plus de caractères que le nombre maximal de caractères, utilisez l'attribut maxlength. Pour les types d'entrées numériques tels que <input type="number">, utilisez plutôt les attributs min et max.

Pour en savoir plus sur la validation, consultez Aider les utilisateurs à saisir les bonnes données dans les formulaires.

Testez vos connaissances

Tester vos connaissances sur les attributs de formulaire

Ressources

• Attributs HTML <input>
• Attributs HTML globaux