Vind formulierproblemen met Chrome DevTools

Het Chrome DevTools-team ontwikkelt aanvullende nieuwe functies waarmee u formulierproblemen kunt opsporen en problemen met automatisch aanvullen kunt opsporen.

Sam Dutton

In Chrome Canary testen we nieuwe functies in DevTools die bedoeld zijn om ontwikkelaars te helpen begrijpen hoe automatisch invullen van formulieren werkt en waarom dit soms mislukt:

• Hoe wijst browser Automatisch aanvullen opgeslagen waarden toe aan formuliervelden?
• Welke criteria worden door Automatisch aanvullen gebruikt om een ​​formulierveld in te vullen?
• Welke velden zijn niet ingevuld door Automatisch aanvullen?
• Waarom wordt een formulierveld niet ingevuld door Automatisch aanvullen?

In dit artikel worden de nieuwe functies in Chrome DevTools beschreven en uitgelegd hoe u deze kunt testen en feedback kunt geven.

Wat is automatisch aanvullen?

Chrome helpt gebruikers adres-, betalings- en inloggegevens te beheren door gegevenssets veilig op te slaan en aan te bieden formuliervelden in te vullen zonder dat de gebruiker tekst hoeft in te voeren. Dat staat bekend als Automatisch aanvullen.

Chrome biedt aan om gegevens voor automatisch aanvullen op te slaan wanneer u een formulier verzendt. Op mobiel:

Vervolgens biedt Chrome aan om formulieren automatisch in te vullen met de opgeslagen gegevens.

Op mobiel:

Op bureaublad:

U kunt uw gegevens voor automatisch aanvullen beheren in de Chrome-instellingen.

Op mobiel:

Op bureaublad:

Mogelijk hebt u ook gezien dat Chrome suggesties biedt voor invoervelden die geen verband houden met adres-, creditcard- of inloggegevens. Naast het aanbieden van automatisch aanvullen voor reeksen gestructureerde gegevens zoals adres- en betalingsgegevens, helpt Chrome gebruikers te voorkomen dat gegevens opnieuw moeten worden ingevoerd voor afzonderlijke formuliervelden die niet door automatisch aanvullen kunnen worden verwerkt. Wanneer een formulier een veld bevat met een naamkenmerk dat Chrome eerder is tegengekomen, kan Chrome waarden voorstellen, zodat u de gegevens niet opnieuw hoeft in te voeren.

Hier is een eenvoudig voorbeeld:

Chrome DevTools laat zien dat het formulierveld hier geen kenmerken heeft die betekenisvol zijn voor de browser. In plaats daarvan is het slechts een name van n300 .

Het veld komt niet overeen met een waarde in een reeks gestructureerde gegevens die het geschikt zou maken voor automatisch aanvullen in Chrome, maar Chrome kan de gebruiker nog steeds helpen als hij in de toekomst een veld met deze naam tegenkomt.

Test nieuwe Chrome DevTools Autofill-functies

Chrome test nieuwe mogelijkheden voor het DevTools Issues- paneel om problemen met automatisch aanvullen te helpen oplossen.

U kunt deze nieuwe mogelijkheden uitproberen in Chrome Canary. Rekening Instellingen > Experimenten > Markeert een inbreukmakend knooppunt of attribuut in de DOM-structuur van het Elementenpaneel in DevTools en laadt DevTools opnieuw wanneer daarom wordt gevraagd.

Als alternatief kunt u Chrome Canary uitvoeren vanaf de opdrachtregel met de vlag 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

Als u op problemen wilt controleren, opent u het paneel DevTools Issues op een pagina met een formulier. form-problems.glitch.me is een goed beginpunt.

Zoals je kunt zien, is dit formulier een puinhoop! Er zijn:

• Invoervelden zonder een id of name attribuut.
• Elementen met dubbele ID's.
• Een <label> met een for attribuut dat niet overeenkomt met een element-ID.
• Een veld met een leeg autocomplete attribuut.

Beweeg de muis over een gemarkeerd element in de DOM-structuur en klik op Probleem weergeven voor meer informatie.

Klik op Overtredend knooppunt om de getroffen bronnen voor elk probleem te bekijken. Dit formulier heeft acht labels met een for attribuut dat niet overeenkomt met de id van een formulierveld.

Gebruik DevTools om de toegankelijkheid van formulieren te verbeteren

DevTools kan ook toegankelijkheidsproblemen met automatisch aanvullen benadrukken, zoals een formulierveld dat geen aria-labelledby attribuut of een bijbehorend <label> heeft.

In dit voorbeeld heeft een <input> -element een bijbehorend label. Dit betekent dat hulpmiddelen het doel van het element kunnen aankondigen. In het volgende voorbeeld is echter geen overeenkomend label of aria-labelledby attribuut gevonden.

Geef feedback over de nieuwe functies voor automatisch aanvullen in DevTools

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools:

• Dien een suggestie of feedback bij ons in via de paraplubug op crbug.com .
• Een probleem melden vanuit DevTools: Meer opties > Help > Een DevTools-probleem melden .
• Tweet op @ChromeDevTools .

Meer te weten komen

• Formulieren leren : een cursus over HTML-formulieren om u te helpen uw expertise op het gebied van webontwikkelaars te verbeteren. Ideaal voor iedereen die nieuw is met formulieren en automatisch aanvullen.
• web.dev/tags/forms : richtlijnen, best practices en codelabs voor betalings-, login- en adresformulieren.