L'équipe des outils pour les développeurs Chrome développe de nouvelles fonctionnalités pour vous aider à détecter les problèmes de formulaire et à déboguer la saisie automatique.
Dans Chrome Canary, nous testons de nouvelles fonctionnalités dans les outils de développement qui visent à aider les développeurs à comprendre comment fonctionne la saisie automatique des formulaires et pourquoi elle échoue parfois:
- Comment la saisie automatique du navigateur met-elle en correspondance les valeurs stockées avec les champs de formulaire ?
- Quels sont les critères utilisés par la saisie automatique pour remplir un champ de formulaire ?
- Quels champs n'ont pas été remplis par la saisie automatique ?
- Pourquoi un champ de formulaire n'est-il pas rempli par la saisie automatique ?
Cet article décrit les nouvelles fonctionnalités des outils pour les développeurs Chrome, et explique comment les tester et envoyer des commentaires.
Qu'est-ce que la saisie automatique ?
Chrome aide les utilisateurs à gérer leur adresse, leurs informations de paiement et de connexion en stockant des ensembles de données de manière sécurisée et en leur proposant de remplir les champs de formulaire sans que l'utilisateur ait à saisir de texte. C'est ce qu'on appelle la saisie automatique.
Chrome vous propose d'enregistrer les données de saisie automatique lorsque vous envoyez un formulaire. Sur mobile :
Par la suite, Chrome propose de remplir automatiquement les formulaires avec les données qui ont été enregistrées.
Sur mobile :
Sur un ordinateur :
Vous pouvez gérer vos données de saisie automatique dans les paramètres de Chrome.
Sur mobile :
Sur un ordinateur :
Vous avez peut-être également vu des suggestions de Chrome pour des champs de saisie sans rapport avec l'adresse, la carte de crédit ou les données de connexion. En plus de proposer la saisie automatique pour des ensembles de données structurées telles que les adresses et les détails de paiement, Chrome aide les utilisateurs à éviter de saisir à nouveau les données de champs de formulaire uniques qui ne peuvent pas être gérés par la saisie automatique. Lorsqu'un formulaire comporte un champ avec un attribut "name" que Chrome a déjà rencontré, Chrome peut suggérer des valeurs afin que vous n'ayez pas besoin de saisir à nouveau les données.
Prenons un exemple simple :
Les outils pour les développeurs Chrome montrent que le champ du formulaire ne comporte pas d'attributs pertinents pour le navigateur. Il s'agit simplement d'un attribut name de n300.
Le champ ne correspond à aucune valeur d'un ensemble de données structurées qui le rendrait approprié pour la saisie automatique Chrome, mais Chrome peut toujours aider l'utilisateur s'il rencontre un champ portant ce nom à l'avenir.
Tester les nouvelles fonctionnalités de saisie automatique des outils pour les développeurs Chrome
Chrome teste de nouvelles fonctionnalités du panneau Issues (Problèmes) des outils de développement afin de faciliter le débogage des problèmes de saisie automatique.
Vous pouvez essayer ces nouvelles fonctionnalités dans Chrome Canary. Accédez à Paramètres 
> Tests > 
Mise en surbrillance d'un nœud ou d'un attribut non conforme dans l'arborescence DOM du panneau "Elements" dans les outils de développement, puis actualisez les outils de développement lorsque vous y êtes invité.
Vous pouvez également exécuter Chrome Canary à partir de la ligne de commande avec l'indicateur AutofillEnableDevtoolsIssues:
- Windows:
shell start chrome --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues - Mac:
shell open -a "Google Chrome Canary" --args --restart --flag-switches-begin --enable-features=AutofillEnableDevtoolsIssues
Pour détecter d'éventuels problèmes, ouvrez le panneau Issues (Problèmes) des outils de développement sur une page qui contient un formulaire. form-problems.glitch.me est un bon point de départ.
Comme vous pouvez le voir, ce formulaire est compliqué ! Il y a:
- Champs de saisie sans attribut
idouname. - Éléments avec des ID en double.
<label>avec un attributforqui ne correspond à aucun ID d'élément.- Champ avec un attribut
autocompletevide.
Pour en savoir plus, pointez sur un élément en surbrillance dans l'arborescence DOM, puis cliquez sur Afficher le problème.
Cliquez sur Non-respect du nœud pour afficher les ressources concernées par chaque problème. Ce formulaire comporte huit étiquettes avec un attribut for qui ne correspond pas au id d'un champ de formulaire.
Utiliser les outils de développement pour améliorer l'accessibilité des formulaires
Les outils de développement peuvent également mettre en évidence les problèmes d'accessibilité de la saisie automatique, tels qu'un champ de formulaire qui ne comporte ni attribut aria-labelledby, ni <label> associé.
Dans cet exemple, un élément <input> est associé à un libellé correspondant. Cela signifie que les dispositifs d'assistance
peuvent annoncer l'objectif de l'élément. Toutefois, dans l'exemple suivant, aucun libellé ni attribut aria-labelledby correspondant n'a été trouvé.
Envoyer des commentaires sur les nouvelles fonctionnalités de saisie automatique dans les outils de développement
Utilisez les options suivantes pour discuter des nouvelles fonctionnalités et modifications dans l'article, ou de toute autre question liée aux outils de développement:
- Envoyez-nous une suggestion ou des commentaires via le bug parapluie sur crbug.com.
- Signalez un problème à partir des outils de développement: Plus d'options > Aide > Signaler un problème dans les outils de développement.
- Envoyez un tweet à @ChromeDevTools.
En savoir plus
- Learn Forms: cours sur les formulaires HTML pour vous aider à améliorer votre expertise en tant que développeur Web. Idéal pour les personnes qui débutent avec les formulaires et la saisie automatique.
- web.dev/tags/forms: conseils, bonnes pratiques et ateliers de programmation pour les formulaires de paiement, de connexion et d'adresse.