Formularprobleme mit den Chrome-Entwicklertools finden

Das Chrome DevTools-Team arbeitet an weiteren neuen Funktionen, mit denen Sie Formularprobleme finden und Autofill-Fehler beheben können.

Sam Dutton

In Chrome Canary testen wir neue Funktionen in den DevTools, mit denen Entwickler besser nachvollziehen können, wie das automatische Ausfüllen von Formularen funktioniert und warum es manchmal fehlschlägt:

  • Wie werden gespeicherte Werte durch die automatische Ausfüllung im Browser in Formularfelder zugeordnet?
  • Anhand welcher Kriterien wird ein Formularfeld mit Autofill ausgefüllt?
  • Welche Felder wurden nicht automatisch ausgefüllt?
  • Warum wird ein Formularfeld nicht durch Autofill ausgefüllt?

In diesem Artikel werden die neuen Funktionen in den Chrome-Entwicklertools beschrieben und erläutert, wie Sie sie testen und Feedback geben können.

Was ist AutoFill?

Chrome hilft Nutzern, Adress-, Zahlungs- und Anmeldedaten zu verwalten, indem Datensätze sicher gespeichert und Formularfelder automatisch ausgefüllt werden, ohne dass der Nutzer Text eingeben muss. Das wird als Autofill bezeichnet.

Chrome bietet Ihnen an, Autofill-Daten zu speichern, wenn Sie ein Formular einreichen. Auf einem Mobilgerät:

Drei Android-Screenshots: ein Adressformular in Chrome, Chrome Autofill bietet an, die Adresse zu speichern, und dann wird ein Dialogfeld zum Bearbeiten des neuen Autofill-Eintrags angezeigt.

Anschließend bietet Chrome an, Formulare mit den gespeicherten Daten automatisch auszufüllen.

Auf einem Mobilgerät:

Auf einem Computer:

Chrome bietet auf dem Computer an, ein Adressformular automatisch auszufüllen

Sie können Ihre Autofill-Daten in den Chrome-Einstellungen verwalten.

Auf einem Mobilgerät:

Chrome-Einstellungen unter Android: Adresse bearbeiten

Auf einem Computer:

Die Seite chrome://settings/addresses mit zwei Beispieladressen

Möglicherweise haben Sie auch schon gesehen, dass Chrome Vorschläge für Eingabefelder macht, die sich nicht auf Adressen, Kreditkarten oder Anmeldedaten beziehen. Chrome bietet nicht nur Autofill für Sätze strukturierter Daten wie Adressen und Zahlungsdetails, sondern hilft Nutzern auch, Daten für einzelne Formularfelder, die nicht von Autofill verarbeitet werden können, nicht noch einmal eingeben zu müssen. Wenn ein Formular ein Feld mit einem Namensattribut enthält, das Chrome bereits kennt, kann Chrome Werte vorschlagen, damit Sie die Daten nicht noch einmal eingeben müssen.

Hier ein einfaches Beispiel:

Chrome bietet Vorschläge für unstrukturierte Daten in einem einzigen Formularfeld

Die Chrome-Entwicklertools zeigen, dass das Formularfeld hier keine Attribute hat, die für den Browser relevant sind. Stattdessen ist es nur ein name-Attribut von n300.

Chrome DevTools mit Informationen zu den unstrukturierten Daten in einem Formular, wie im vorherigen Beispiel: eine einzelne Eingabe mit den Attributen „type=text“ und „name=n300“.

Das Feld entspricht keinem Wert in einem Satz strukturierter Daten, der es für Chrome Autofill geeignet machen würde. Chrome kann dem Nutzer aber trotzdem helfen, wenn er in Zukunft auf ein Feld mit diesem Namen stößt.

Neue Autofill-Funktionen der Chrome-Entwicklertools testen

In Chrome werden neue Funktionen für den Bereich Probleme in den DevTools getestet, um Probleme mit der Autofill-Funktion zu beheben.

Sie können diese neuen Funktionen in Chrome Canary ausprobieren. Aktivieren Sie in den DevTools die Option Einstellungen.Einstellungen > Experimente > Kästchen. Knoten oder Attribut mit Verstoß im DOM-Baum des Elements-Bereichs hervorheben und aktualisieren Sie die DevTools, wenn Sie dazu aufgefordert werden.

Seite mit den Einstellungen der Chrome-Entwicklertools mit der Meldung „Markiert einen richtlinienverletzenden Knoten…“

Alternativ können Sie Chrome Canary über die Befehlszeile mit dem Flag AutofillEnableDevtoolsIssues ausführen:

  • 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

Öffnen Sie auf einer Seite mit einem Formular den Bereich Probleme in den Entwicklertools. form-problems.glitch.me ist ein guter Ausgangspunkt.

In den Chrome-Entwicklertools wird ein Problem mit dem Attribut „for“ eines Formularelements angezeigt.

Wie Sie sehen, ist dieses Formular ein Durcheinander. Es gibt:

  • Eingabefelder ohne id- oder name-Attribut
  • Elemente mit doppelten IDs
  • Ein <label> mit einem for-Attribut, das nicht mit einer Element-ID übereinstimmt.
  • Ein Feld mit einem leeren autocomplete-Attribut.

Bewegen Sie den Mauszeiger auf ein hervorgehobenes Element im DOM-Baum und klicken Sie auf Problem ansehen, um mehr zu erfahren.

Erweitertes Problem in den Chrome-Entwicklertools: Falsche Verwendung des Labels für das Attribut.

Klicken Sie auf Verletzender Knoten, um die betroffenen Ressourcen für jedes Problem aufzurufen. Dieses Formular enthält acht Labels mit dem Attribut „for“, das nicht mit dem „id“ eines Formularfelds übereinstimmt.

Mit den Entwicklertools die Barrierefreiheit von Formularen verbessern

In den DevTools können auch Probleme mit der Barrierefreiheit von Autofill hervorgehoben werden, z. B. ein Formularfeld, das weder ein aria-labelledby-Attribut noch eine zugehörige <label> hat.

Der Bereich „Bedienungshilfen“ in den Chrome DevTools, in dem zu sehen ist, dass ein Label für ein Eingabeelement in einem Formular gefunden wurde.

In diesem Beispiel hat ein <input>-Element ein übereinstimmendes Label. Das bedeutet, dass Hilfstechnologien den Zweck des Elements ansagen können. Im folgenden Beispiel wurde jedoch kein übereinstimmendes Label oder aria-labelledby-Attribut gefunden.

Der Bereich „Barrierefreiheit“ in den Chrome-Entwicklertools, in dem zu sehen ist, dass für ein Eingabeelement in einem Formular kein übereinstimmendes Label oder aria-labelledby-Attribut gefunden wurde.

Feedback zu den neuen Autofill-Funktionen in den DevTools geben

Mit den folgenden Optionen können Sie über die neuen Funktionen und Änderungen im Beitrag oder über andere Themen im Zusammenhang mit den Entwicklertools diskutieren:

Weitere Informationen

  • Learn Forms: Ein Kurs zu HTML-Formularen, mit dem Sie Ihre Kenntnisse als Webentwickler verbessern können. Ideal für alle, die noch keine Erfahrung mit Formularen und Autofill haben.
  • web.dev/tags/forms: Anleitungen, Best Practices und Codelabs für Zahlungs-, Anmelde- und Adressformulare.