La plupart des sites et des applications incluent un formulaire Web. Sites de blagues, comme Site Web<form>.
L'élément HTML <form> identifie un point de repère de document contenant
des commandes interactives pour
envoyer des informations. Dans un <form>, vous trouverez toutes les fonctionnalités interactives (et non interactives)
les commandes de formulaire qui le composent.
HTML est un outil puissant. Cette section se concentre sur la puissance du langage HTML et explique ce qu'il permet de faire sans ajouter JavaScript. L'utilisation de données de formulaire côté client pour mettre à jour l'interface utilisateur implique généralement CSS ou JavaScript, qui n'est pas abordé ici. Il existe un cours complet Learn Forms. Nous ne dupliquerons pas cette section ici, mais nous présenterons plusieurs commandes de formulaire et les attributs HTML qui leur sont associés.
Les formulaires vous permettent de permettre aux utilisateurs d'interagir avec votre site Web ou votre application, de valider les informations saisies et d'envoyer
les données à un serveur. Les attributs HTML permettent d'obliger l'utilisateur à sélectionner des commandes de formulaire ou à saisir une valeur. HTML
peuvent définir des critères spécifiques auxquels la valeur doit correspondre pour être valide. Lorsque l'utilisateur essaie d'envoyer le formulaire,
toutes les valeurs de contrôle de formulaire passent par la validation de contrainte côté client et peuvent empêcher l'envoi.
jusqu'à ce que les données
répondent aux critères requis ; le tout sans JavaScript. Vous pouvez également désactiver cette fonctionnalité en définissant l'novalidate
sur <form> ou, plus souvent, formnovalidate sur un bouton, ce qui permet d'enregistrer les données du formulaire pour les remplir ultérieurement,
empêche la validation.
Envoi de formulaires
Les formulaires sont envoyés lorsque l'utilisateur active un bouton "Envoyer" imbriqué dans le formulaire. Lorsque vous utilisez <input> pour les boutons,
'valeur' est le libellé du bouton et s'affiche dans celui-ci. Lorsque vous utilisez <button>, le libellé est le texte placé entre les balises d'ouverture
et en fermant les balises <button>. Un bouton "Envoyer" peut être écrit de deux manières:
<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
Pour obtenir un formulaire très simple, vous avez besoin d'un élément <form>, contenant quelques entrées de formulaire, et d'un bouton "Submit" (Envoyer). Cependant, il y a
plus à envoyer un formulaire que cela.
Les attributs de l'élément <form> définissent la méthode HTTP par
l'adresse à laquelle le formulaire est envoyé et l'URL qui traite son envoi. Oui, les formulaires peuvent être envoyés, traités
une nouvelle page peut être chargée sans JavaScript. L'élément <form> est extrêmement performant.
action et method de l'élément <form>.
Les valeurs d'attribut définissent l'URL qui traite les données du formulaire et la méthode HTTP utilisée pour les envoyer.
Par défaut, les données du formulaire sont envoyées à la page actuelle. Sinon, définissez l'attribut action sur l'URL vers laquelle les données doivent être envoyées.
Les données envoyées sont constituées de paires nom/valeur des différentes commandes de formulaire du formulaire. Par défaut, cela inclut tous les champs
les commandes imbriquées dans le formulaire qui ont un name. Toutefois, avec l'attribut form, il est possible d'inclure des contrôles de formulaire.
en dehors de <form> et pour omettre les commandes de formulaire imbriquées dans <form>. Compatible avec les commandes de formulaire et <fieldset>,
La valeur de l'attribut form correspond à la valeur id du contrôle auquel il est associé, et pas nécessairement du format auquel il
est imbriqué. Cela signifie que les commandes de formulaire n'ont pas besoin d'être physiquement imbriquées dans un <form>.
L'attribut method définit le protocole HTTP de la requête: généralement GET ou POST. Avec GET, les données du formulaire sont envoyées sous forme de
Chaîne de paramètre de paires name=value, ajoutée à l'URL de action.
Avec POST, les données sont ajoutées au corps de la requête HTTP. Lors de l'envoi de données sécurisées, telles que des mots de passe ou des informations de carte de crédit
utilisez toujours POST.
Il existe également une méthode DIALOG. Si un <form method="dialog"> se trouve dans un <dialog>, l'envoi du formulaire fermera la boîte de dialogue.
un événement d'envoi a lieu, bien que les données ne soient ni effacées, ni envoyées. Là encore, sans JavaScript. Ce point est abordé dans
la section des boîtes de dialogue. Comme le formulaire n'est pas envoyé,
Incluez à la fois formmethod="dialog" et formnovalidate sur le bouton "Envoyer".
Les boutons de formulaire peuvent comporter d'autres attributs que ceux décrits au début de cette section. Si le bouton inclut un formaction,
Attribut formenctype, formmethod, formnovalidate ou formtarget, les valeurs définies sur le bouton qui active le formulaire
ont la priorité sur les action, enctype, method et target
définie le <form>. La validation des contraintes se produit avant l'envoi du formulaire, mais seulement en l'absence de
formnovalidate sur le bouton "Envoyer" activé ni novalidate sur le <form>.
Pour savoir quel bouton a été utilisé pour envoyer un formulaire, indiquez
bouton name. Les boutons sans nom ou valeur ne sont pas envoyés avec les données du formulaire lors de l'envoi du formulaire.
Après l'envoi du formulaire
Lorsque l'utilisateur envoie un formulaire en ligne rempli, le nom et les valeurs des commandes de formulaire concernées sont indiqués. Le nom correspond à la valeur de l'attribut name. Les valeurs proviennent du contenu de l'attribut value ou de la valeur saisie ou sélectionnée par l'utilisateur. La valeur d'une <textarea> est son texte interne.
La valeur d'un <select> est la value du <option> sélectionné ou, si <option> n'inclut pas d'attribut value, la valeur correspond au texte interne de l'option sélectionnée.
<form method="GET">
<label for="student">Pick a student:</label>
<select name="student" id="student">
<option value="hoover">Hoover Sukhdeep</option>
<option>Blendan Smooth</option>
<option value="toasty">Toasty McToastface</option>
</select>
<input type="submit" value="Submit Form">
</form>
Sélection de "Hoover Sukhdeep" (ou ne rien faire, étant donné que le navigateur affiche la première valeur d'option par défaut) puis cliquez sur le bouton "Submit" (Envoyer) pour actualiser cette page. L'URL sera alors:
https://web.dev/learn/html/forms?student=hoover
Comme la deuxième option ne comporte pas d'attribut value, le texte interne est envoyé en tant que valeur. Sélection de "Lissage Blendan"
et cliquez sur le bouton "Submit" (Envoyer) pour actualiser cette page. L'URL sera alors:
https://web.dev/learn/html/forms?student=Blendan+Smooth
Lors de l'envoi d'un formulaire, les informations envoyées incluent le nom et la valeur de toutes les commandes de formulaire nommées associées à un name
à l'exception des cases à cocher non sélectionnées et des cases d'option non sélectionnées, ainsi que le nom et la valeur des boutons autres que celui qui
envoyé le formulaire. Pour toutes les autres commandes de formulaire, si la commande de formulaire a un nom, mais qu'aucune valeur n'a été saisie ni définie par défaut, la
L'élément name de la commande de formulaire est envoyé avec une valeur vide.
Il existe 22 types d'entrées. Nous ne pouvons donc pas tous les présenter.
Sachez simplement que l'ajout d'une valeur est facultatif, et souvent déconseillé, lorsque vous souhaitez que l'utilisateur entre des informations.
Pour les éléments <input> dont l'utilisateur ne peut pas modifier la valeur, vous devez toujours inclure une valeur, y compris en entrée
éléments de type hidden, radio, checkbox, submit, button ou reset.
L'utilisation de name uniques pour les contrôles de formulaire simplifie le traitement des données côté serveur. Nous vous recommandons d'utiliser des cases à cocher et
des exceptions à cette règle.
Cases d'option
Si vous avez déjà remarqué que lorsque vous sélectionnez une case d'option au sein d'un groupe, vous ne pouvez en sélectionner qu'une seule dans
une fois, cela est dû à l'attribut name. Un seul effet pouvant être sélectionné est créé en attribuant à chaque case d'option
dans un groupe, avec le même name.
Un name doit être unique au groupe: si vous utilisez accidentellement le même name pour deux groupes distincts, sélectionnez une case d'option
du deuxième groupe désélectionne toute sélection effectuée dans le premier groupe avec le même name.
Le name et le value de la case d'option sélectionnée sont envoyés avec le formulaire. Assurez-vous que chaque case d'option
un value pertinent (et généralement unique) ; Les valeurs des cases d'option non sélectionnées ne sont pas envoyées.
Vous pouvez regrouper autant de groupes d'options que vous le souhaitez sur une même page. Chacun d'eux peut fonctionner indépendamment
unique au groupe name.
Si vous souhaitez charger la page avec l'une des cases d'option sélectionnées dans un groupe du même nom, incluez l'attribut checked.
Cette case d'option correspond à la pseudo-classe CSS :default,
même si l'utilisateur sélectionne
une autre radio. La case d'option actuellement sélectionnée correspond à l':checked
ou une pseudo-classe.
Si l'utilisateur doit sélectionner une case d'option parmi un groupe de cases d'option, ajoutez l'attribut required à au moins une case
des commandes. L'inclusion de required sur une case d'option d'un groupe rend une sélection obligatoire pour l'envoi de formulaire, mais elle
ne doit pas nécessairement être la case d'option
avec l'attribut qui est sélectionné pour être valide. Indiquez également clairement dans le <legend>.
que la commande de formulaire est obligatoire. L'étiquetage des groupes de cases d'option avec chaque bouton individuel est décrit
plus tard.
Cases à cocher
Toutes les cases d'un groupe peuvent avoir le même name. Seules les cases sélectionnées disposent d'un élément name et d'un value
envoyé avec le formulaire. Si vous avez sélectionné plusieurs cases à cocher portant le même nom, le même nom sera envoyé avec
avec des valeurs différentes. Si plusieurs commandes de formulaire portent le même nom, même si elles ne sont pas toutes des cases à cocher,
elles seront toutes envoyées, séparées par des esperluettes.
Si vous n'incluez pas de value dans une case à cocher, la valeur des cases à cocher sélectionnées est définie par défaut sur on, ce qui n'est probablement pas le cas
utiles. Si vous avez trois cases nommées chk et qu'elles sont toutes cochées, l'envoi du formulaire ne sera pas déchiffrable:
https://web.dev/learn/html/forms?chk=on&chk=on&chk=on
Pour rendre une case à cocher obligatoire, ajoutez l'attribut required. Informez toujours l'utilisateur lorsqu'une case doit être cochée ou
toute commande de formulaire est requise. Si vous ajoutez required à une case à cocher, celle-ci est uniquement obligatoire. il n'a aucune incidence sur les autres
cases à cocher portant le même nom.
Étiquettes et ensembles de champs
Pour que les utilisateurs sachent comment remplir un formulaire, celui-ci doit être accessible. Chaque commande de formulaire doit comporter un libellé.
Vous souhaitez également étiqueter des groupes de commandes de formulaire. Alors que les zones de saisie, de sélection et de texte sont associées au libellé <label>,
les groupes de commandes de formulaire sont libellés par le contenu de la <legend> de
l'<fieldset> qui les regroupe.
Dans les exemples précédents, vous avez peut-être remarqué que chaque commande de formulaire, à l'exception du bouton d'envoi, comportait une <label>. Étiquettes
fournissent des commandes de formulaire avec des noms accessibles. Les boutons tirent leur nom accessible de leur contenu ou de leur valeur. Toutes les autres
les commandes de formulaire nécessitent un <label> associé. Si aucun libellé n'est associé, le navigateur affichera quand même les commandes de votre formulaire,
mais les utilisateurs ne sauront pas
quelles informations sont attendues.
Pour associer explicitement une commande de formulaire à un <label>, incluez l'attribut for sur <label>: la valeur correspond au
id du contrôle de formulaire auquel il est associé.
<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">
L'association de libellés aux commandes de formulaire présente plusieurs avantages. Les libellés rendent les commandes de formulaire accessibles aux utilisateurs de lecteurs d'écran en en lui attribuant un nom accessible. Les libellés sont également des "zones d'appel". ils rendent le site plus utilisable pour les utilisateurs ayant les problèmes de dextérité en augmentant la zone. Si vous utilisez une souris, cliquez n'importe où sur le libellé "Votre nom". Faire ce qui permet de cibler l'entrée.
Pour fournir des étiquettes implicites, incluez la commande de formulaire entre les balises d'ouverture et de fermeture <label>. Cela est tout aussi
accessible à la fois du point de vue d'un lecteur d'écran et d'un pointeur, mais ne fournit pas l'accroche de style comme le
libellé.
<label>Your name
<input type="text" name="name">
</label>
Les libellés étant des "zones de succès", n'incluez pas d'éléments interactifs dans un libellé explicite ni d'autres composants interactifs. autre que la commande de formulaire étiquetée dans un libellé implicite. Par exemple, si vous incluez un lien dans un libellé alors que le navigateur pour afficher le code HTML, les utilisateurs ne seront pas surpris s'ils cliquent sur le libellé pour accéder à une commande de formulaire, mais sont redirigés vers une nouvelle page.
En règle générale, <label> est placé avant la commande de formulaire, sauf dans le cas des cases d'option et des cases à cocher. Ce n'est pas obligatoire.
C'est juste le modèle UX courant. La série "Apprendre les formulaires" contient des informations sur la conception de formulaires.
Pour les groupes de cases d'option et de cases à cocher, le libellé fournit le nom accessible de la commande de formulaire à laquelle il est associé.
mais le groupe de commandes et leurs libellés
ont également besoin d'un libellé. Pour étiqueter le groupe, regroupez tous les éléments dans un
<fieldset>, où <legend> fournit le libellé du groupe.
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<label>
<input type="radio" value="blendan" name="machine"> Blendan Smooth
</label>
</li>
<li>
<label>
<input type="radio" value="hoover" name="machine"> Hoover Sukhdeep
</label>
</li>
<li>
<label>
<input type="radio" value="toasty" name="machine"> Toasty McToastface
</label>
</li>
</ul>
</fieldset>
Dans cet exemple, les <label> implicites associent chaque case d'option à une case d'option, et <legend> fournit le libellé du groupe de cases d'option.
L'imbrication d'un <fieldset> dans un autre <fieldset> est une pratique courante. Par exemple, si un formulaire est une enquête comportant de nombreuses questions
divisé en groupes de questions associées, "l'élève préféré" <fieldset> peut être imbriqué dans un autre élément <fieldset> libellé comme
"Vos favoris":
<fieldset>
<legend>Your favorites:</legend>
<ul start="6">
<li>
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<!-- the rest of the code here -->
Ces éléments les apparences par défaut ont conduit à une sous-utilisation, mais <legend> et <fieldset> peuvent être stylisés avec CSS.
En plus de tous les attributs globaux, <fieldset> accepte également les attributs name, disabled et form.
Lorsque vous désactivez un ensemble de champs, toutes les commandes de formulaire imbriquées sont désactivées. Ni les attributs name, ni form n'ont
est très utilisée sur <fieldset>. name peut être utilisé pour accéder au jeu de champs avec JavaScript, mais au jeu de champs lui-même
n'est pas incluse dans les données envoyées (les commandes de formulaire nommées imbriquées sont incluses).
Types de saisie et clavier dynamique
Comme indiqué précédemment, il existe 22 types d'entrées différents.
Dans certains cas, lorsqu'un utilisateur se sert d'un appareil doté d'un clavier dynamique qui ne s'affiche qu'en cas de besoin (un téléphone, par exemple), l'entrée
le type utilisé détermine le type de clavier affiché. Le clavier par défaut affiché peut être optimisé en fonction du type de saisie requis.
Par exemple, le type tel affiche un clavier optimisé pour la saisie de numéros de téléphone. email inclut @ et . ; et
le clavier dynamique pour url contient le signe deux-points et la barre oblique. Malheureusement, l'iPhone n'inclut toujours pas : dans
le clavier dynamique par défaut pour les types de saisie url.
Claviers pour <input type="tel"> sur iPhone et sur deux téléphones Android différents:
Claviers pour <input type="email"> sur iPhone et deux téléphones Android différents:
Accéder au micro et à la caméra
Le type d'entrée de fichier <input type="file"> permet d'importer des fichiers via des formulaires. Les fichiers peuvent être de n'importe quel type, définis et limités
par l'attribut accept. La liste des types de fichiers acceptables peut être une liste
d'extensions de fichiers séparées par des virgules, un type global,
ou une combinaison de types
et d'extensions globaux. Par exemple, accept="video/*, .gif" accepte tous les fichiers vidéo et les GIF animés.
Utiliser "audio/*" Pour les fichiers audio, "video/*" pour les fichiers vidéo et "image/*" pour les fichiers image.
L'attribut capture énuméré, défini dans le
la spécification de capture multimédia, qui peut être utilisée si un nouveau média
doit être créé à l'aide de l'appareil photo ou du micro de l'utilisateur. Vous pouvez définir la valeur sur user pour les périphériques d'entrée destinés à l'utilisateur
ou environment pour la caméra arrière ou le micro du téléphone. En règle générale, l'utilisation de capture, sans valeur, fonctionne parce que l'utilisateur
va choisir le périphérique d'entrée
qu'il souhaite utiliser.
<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">
Validation intégrée
Là encore, sans inclure de code JavaScript, le code HTML peut empêcher l'envoi de formulaires dont les valeurs ne sont pas valides.
Certains sélecteurs CSS peuvent faire correspondre les commandes de formulaire en fonction de la présence d'attributs HTML, y compris :required.
et :optional si la valeur booléenne required
est définie ou non ; :default si checked
est codée en dur ; et :enabled ou :disabled,
selon que l'élément est interactif ou non et que disabled
est présent. La pseudo-classe :read-write correspond aux éléments dont
contenteditable défini et
de commandes de formulaire modifiables par défaut, telles que les types d'entrée number, password et text (mais pas des cases à cocher,
cases d'option ou le type hidden, entre autres). Si un élément normalement accessible en écriture possède le readonly
défini, il correspondra à :read-only.
Lorsque l'utilisateur saisit des informations dans les commandes de formulaire, les sélecteurs d'interface utilisateur CSS, y compris :valid,
:invalid, :in-range et
:out-of-range s'active et se désactive en fonction de l'état. Lorsque l'utilisateur
quitte une commande de formulaire, soit l'élément :user-invalid qui n'est pas encore entièrement compatible, soit
La pseudo-classe :user-valid va correspondre.
Vous pouvez utiliser CSS pour indiquer si des commandes de formulaire sont requises et valides lorsque l'utilisateur interagit avec celui-ci. Vous pouvez même utiliser un CSS pour empêcher les utilisateurs de cliquer sur le bouton "Envoyer" tant que le formulaire n'est pas valide:
form:invalid [type="submit"] {
opacity: 50%;
pointer-events: none;
}
Cet extrait CSS est un anti-modèle. Bien que votre interface utilisateur puisse sembler intuitive et claire, de nombreux utilisateurs tentent d'envoyer un formulaire à activer les messages d'erreur. Faire apparaître un bouton d'envoi désactivé de cette façon ne permet pas de valider la contrainte, un fonctionnalité sur laquelle de nombreux utilisateurs s'appuient.
Le CSS appliqué est mis à jour en continu en fonction de l'état actuel de l'UI. Par exemple, lorsque vous incluez des types d'entrée
des contraintes, telles que email, number, url et les types de date, si la valeur n'est pas nulle (non vide) et que la valeur actuelle
la valeur n'est pas une adresse e-mail, un nombre, une URL, une date ou une heure valides, la pseudo-classe CSS :invalid sera une correspondance. Cette constante
La mise à jour diffère de la validation intégrée de la contrainte HTML, qui se produit uniquement lorsque l'utilisateur tente d'envoyer le formulaire.
La validation intégrée des contraintes ne concerne que les contraintes définies avec des attributs HTML. Bien que vous puissiez styliser
un élément en fonction
sur les pseudo-classes :required et :valid/:invalid, le navigateur produisait des messages d'erreur issus d'erreurs basées sur
les attributs required, pattern, min, max et même type, arrivent lors de l'envoi du formulaire.
Lorsque nous essayons d'envoyer le formulaire sans sélectionner l'élève favori requis, la validation des contraintes empêche l'envoi du formulaire.
en raison d'une erreur validityState.valueMissing.
Si l'une des propriétés validityState renvoie true, l'envoi est bloqué et le navigateur affiche un message d'erreur.
dans la première commande de formulaire incorrecte. Lorsque l'utilisateur active l'envoi d'un formulaire
et que des valeurs ne sont pas valides,
la première commande de formulaire non valide affiche un message d'erreur et est sélectionnée. Si aucune valeur n'est définie pour un contrôle requis, si une
La valeur numérique est hors limite, ou si une valeur n'est pas du type requis par l'attribut type, le formulaire ne sera pas validé.
ne sera pas envoyé et un message d'erreur s'affichera.
Si la valeur de number, de date ou d'heure est inférieure à la valeur minimale de min définie ou supérieure à la valeur max maximale définie, la valeur de contrôle sera :out-of-range (et :invalid).
l'utilisateur est informé du valididityState.rangeUnderflow,
validityState.rangeOverflow lorsqu'ils
essayez d'envoyer le formulaire. Si la valeur n'est pas en phase avec la
step, définie de manière explicite ou définie par défaut sur 1, la commande sera :out-of-range (et :invalid) et il y aura un
Erreur validityState.stepMismatch. L'erreur apparaît sous forme d'info-bulle et fournit par défaut des informations utiles sur la façon de la corriger.
Il existe des attributs similaires pour la longueur des valeurs: minlength
et maxlength alerteront l'utilisateur en cas d'erreur.
avec le bouton validityState.tooLong ou
validityState.tooShort lors de l'envoi.
maxlength empêche également l'utilisateur de saisir trop de caractères.
L'utilisation de l'attribut maxlength peut nuire à l'expérience utilisateur. Il est généralement préférable de permettre à l'utilisateur
dépasse le nombre maximal de caractères autorisé en fournissant un compteur, qui peut se présenter sous la forme d'un
<output>, qui n'est pas envoyé avec le formulaire,
permettant de modifier le texte jusqu'à ce que la sortie indique que la longueur maximale autorisée n'a pas été dépassée. maxlength
peuvent être incluses dans votre code HTML. comme tout ce dont nous avons parlé, il fonctionne sans JavaScript. Puis, lors du chargement, la valeur
L'attribut maxlength peut être utilisé pour créer ce compteur de caractères en JavaScript.
Certains types d'entrées semblent avoir des contraintes par défaut, mais ce n'est pas le cas. Par exemple, le type d'entrée tel fournit une valeur numérique
clavier de téléphone sur les appareils dotés de claviers dynamiques, mais ne limite pas les valeurs valides. Pour cela, et pour d'autres,
il y a l'attribut pattern. Vous pouvez spécifier une expression régulière à laquelle la valeur doit correspondre pour être considérée comme valide.
Si la valeur correspond à une chaîne vide et qu'elle n'est pas obligatoire, cela ne génère pas de message d'erreur validityState.patternMismatch
. Si ce champ est obligatoire et qu'il est vide, le message d'erreur par défaut pour validityState.valueMissing sera présenté à l'utilisateur au lieu de
la patternMismatch.
Pour les e-mails, validityState.typeMismatch est probablement aussi
à pardonner
pour vos besoins. Nous vous conseillons d'inclure pattern
afin que les adresses e-mail intranet sans TLD ne soient pas acceptées.
L'attribut motif permet de fournir une expression régulière à laquelle la valeur doit correspondre. Lorsqu'une correspondance de structure est requise,
s'assurer que l'utilisateur sache très
clairement ce qui est attendu.
Tout cela peut être fait sans une seule ligne de JavaScript, mais comme il s'agit d'une API HTML, vous pouvez utiliser JavaScript pour inclure des messages personnalisés lors de la validation des contraintes. Vous pouvez également utiliser JavaScript pour mettre à jour le nombre de caractères restants, afficher une barre de progression pour le niveau de sécurité du mot de passe, ou toute autre méthode permettant d'améliorer de manière dynamique l'achèvement.
Exemple
Cet exemple présente un formulaire dans une <dialog> avec une <form> imbriquée avec trois commandes de formulaire et deux boutons d'envoi, avec
des étiquettes et
des instructions claires.
Le premier bouton "Envoyer" ferme la boîte de dialogue. Utilisez formmethod="dialog" pour remplacer la méthode par défaut du formulaire et fermez la
<dialog> sans envoyer ni effacer les données. Vous devez également inclure le formnovalidate, sinon le navigateur
en vérifiant que tous les champs obligatoires ont une valeur. L'utilisateur peut vouloir fermer la boîte de dialogue et le formulaire sans
la saisie de données ; permet d'éviter ce problème. Inclure aria-label="close", car "X" est un indice visuel
connu, mais il est
et non un libellé descriptif.
Les commandes de formulaire ont toutes des étiquettes implicites. Vous n'avez donc pas besoin d'inclure les attributs id ou for. Les éléments d'entrée
comportent l'attribut obligatoire, qui les rend obligatoires. L'élément step saisi dans le nombre est défini explicitement pour montrer comment step est défini.
inclus. Comme step est défini par défaut sur 1, cet attribut peut être omis.
<select> a une valeur par défaut, ce qui rend l'attribut required inutile. Au lieu d'inclure l'attribut value
Pour chaque option, la valeur par défaut est le texte interne.
Le bouton d'envoi situé à la fin définit la méthode des formulaires sur POST. Lorsque vous cliquez dessus, la validité de chaque valeur est vérifiée. Si tous
sont valides, les données du formulaire sont envoyées, la boîte de dialogue se ferme et la page peut rediriger vers thankyou.php.
qui est l'URL d'action. Si des valeurs sont manquantes, ou si la valeur numérique présente une non-concordance des pas ou est hors plage, une
s'affiche, le formulaire n'est pas envoyé et la boîte de dialogue ne se ferme pas.
Les messages d'erreur par défaut peuvent être personnalisés avec le validityState.setCustomValidity('message here')
. Notez que si vous définissez un message personnalisé, celui-ci doit être explicitement défini sur la chaîne vide lorsque tout
est valide ou le formulaire ne sera pas envoyé.
Autres points à prendre en compte
Une section entière est dédiée à aider les utilisateurs à saisir les données appropriées dans les formulaires. Pour de bon expérience utilisateur, il est important d'empêcher les utilisateurs de commettre des erreurs en incluant des instructions et en fournissant des conseils si nécessaire. Bien que cette section explique comment le code HTML seul peut fournir une validation côté client, la validation doit être à la fois côté client et côté serveur. La validation peut être effectuée de manière discrète lorsque vous remplissez le formulaire, par exemple en ajoutant une lorsque la valeur est correcte. Toutefois, n'affichez pas de message d'erreur avant que le contrôle du formulaire ne soit terminé. Si l'utilisateur fait une erreur, informez l’utilisateur où il s’agit et de ce qu’il s’est trompé.
Lors de la conception de formulaires, il est important de tenir compte du fait que tout le monde ne vous ressemble pas. Quelqu'un peuvent avoir une seule lettre comme nom de famille (ou n'avoir aucun nom de famille), ne pas avoir de code postal, avoir une adresse postale en trois lignes, n'ont peut-être pas d'adresse postale. Il est possible qu'ils consultent une version traduite de votre formulaire.
Les commandes de formulaire, leurs libellés et les messages d'erreur doivent être visibles à l'écran, exacts et significatifs, de manière programmatique.
déterminable et associée de manière programmatique à l'élément ou au groupe du formulaire approprié. autocomplete
peut et doit être utilisé pour accélérer le remplissage des formulaires et améliorer l'accessibilité.
HTML fournit tous les outils permettant de rendre les commandes de formulaire de base accessibles. Plus un élément de formulaire ou un processus est interactif, plus il faut accorder plus d'attention à l'accessibilité en ce qui concerne la gestion des priorités, la définition et la mise à jour des noms ARIA, des rôles, et des valeurs, si nécessaire, et les annonces ARIA en direct si nécessaire. Mais, comme nous l'avons appris ici, avec HTML uniquement, vous pouvez obtenir jusqu'à votre objectif d'accessibilité et de validité sans avoir recours à ARIA ou JavaScript.
Testez vos connaissances
Testez vos connaissances sur les formulaires.
Comment intégrer des cases d'option au même groupe ?
name.id.Quel élément HTML permet d'indiquer à l'utilisateur à quoi sert ce champ de formulaire ?
<h1><title><label>