L'équipe des outils pour les développeurs Chrome développe de nouvelles fonctionnalités pour vous aider à détecter les problèmes liés aux formulaires et à déboguer la saisie automatique.
Dans Chrome Canary, nous testons de nouvelles fonctionnalités dans DevTools qui visent à aider les développeurs à comprendre le fonctionnement de la saisie automatique des formulaires et pourquoi elle échoue parfois:
- Comment la saisie semi-automatique du navigateur met-elle en correspondance les valeurs stockées avec les champs de formulaire ?
- Quels critères la saisie automatique utilise-t-elle pour renseigner un champ de formulaire ?
- Quels champs n'ont pas été remplis par le remplissage automatique ?
- Pourquoi un champ de formulaire n'est-il pas renseigné par le remplissage automatique ?
Cet article présente les nouvelles fonctionnalités des outils pour les développeurs Chrome, et explique comment les tester et nous envoyer vos 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 de manière sécurisée des ensembles de données et en proposant de remplir les champs de formulaire sans que l'utilisateur ait à saisir de texte. C'est ce que l'on appelle la saisie semi-automatique.
Chrome vous propose d'enregistrer les données de saisie automatique lorsque vous envoyez un formulaire. Sur mobile :
Chrome propose ensuite de remplir automatiquement les formulaires avec les données 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 Chrome proposer des suggestions pour des champs de saisie qui ne sont pas liés à une adresse, une carte de crédit ou des données de connexion. En plus de proposer la saisie automatique pour les ensembles de données structurées telles que l'adresse et les informations de paiement, Chrome aide les utilisateurs à ne pas avoir à saisir à nouveau les données pour les 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 de nom que Chrome a déjà rencontré, Chrome peut suggérer des valeurs pour que vous n'ayez pas à saisir à nouveau les données.
Prenons un exemple simple :
Les outils de développement Chrome indiquent que le champ de formulaire ici ne comporte pas d'attributs pertinents pour le navigateur. Il s'agit plutôt d'un attribut name de n300.
Le champ ne correspond pas à une valeur d'un ensemble de données structurées qui le rendrait approprié pour la saisie automatique de 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 dans Chrome DevTools
Chrome teste de nouvelles fonctionnalités pour le panneau Problèmes des outils pour les développeurs afin d'aider à déboguer les bugs de saisie semi-automatique.
Vous pouvez tester ces nouvelles fonctionnalités dans Chrome Canary. Accédez à 
Settings > Experiments > 
(Paramètres > Tests > ) Highlights a violating node or attribute in the Elements panel DOM tree (Met en surbrillance un nœud ou un attribut non conforme dans l'arborescence DOM du panneau "Éléments") dans DevTools, puis actualisez DevTools 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 rechercher des problèmes, ouvrez le panneau Problèmes des outils pour les développeurs sur une page contenant un formulaire. form-problems.glitch.me est un bon point de départ.
Comme vous pouvez le voir, ce formulaire est un désordre ! Il existe:
- Champs de saisie sans attribut
idouname. - Éléments avec des ID en double
<label>avec un attributforqui ne correspond pas à un ID d'élément.- Champ avec un attribut
autocompletevide.
Pointez sur un élément mis en surbrillance dans l'arborescence DOM, puis cliquez sur Afficher le problème pour en savoir plus.
Cliquez sur Nœud non conforme pour afficher les ressources concernées par chaque problème. Ce formulaire comporte huit libellés avec un attribut for qui ne correspond pas à l'id d'un champ de formulaire.
Utiliser les outils pour les développeurs pour améliorer l'accessibilité des formulaires
DevTools peut également mettre en évidence des problèmes d'accessibilité de la saisie automatique, comme un champ de formulaire qui ne comporte ni attribut aria-labelledby ni <label> associé.
Dans cet exemple, un élément <input> possède une étiquette correspondante. Cela signifie que les appareils 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 des modifications décrites dans l'article, ou de tout autre élément lié aux outils de développement:
- Envoyez-nous une suggestion ou des commentaires via le bug générique sur crbug.com.
- Signalez un problème depuis les outils de développement: Autres options > Aide > Signaler un problème dans les outils de développement.
- Envoyez un tweet à @ChromeDevTools.
En savoir plus
- Apprendre les formulaires: cours sur les formulaires HTML pour vous aider à améliorer votre expertise de développeur Web. Idéal pour les utilisateurs novices des formulaires et de la saisie automatique.
- web.dev/tags/forms: conseils, bonnes pratiques et ateliers de programmation pour les formulaires de paiement, de connexion et d'adresse.