Formularprobleme mit den Chrome-Entwicklertools finden

Das Chrome-Entwicklertools-Team entwickelt zusätzliche neue Funktionen, mit denen du Formularprobleme leichter erkennen und Autofill-Fehler beheben kannst.

Sam Dutton

In Chrome Canary testen wir neue Funktionen in den Entwicklertools, die Entwicklern helfen sollen, zu verstehen, wie Autofill funktioniert und warum es manchmal fehlschlägt:

  • Wie ordnet die AutoFill-Funktion des Browsers gespeicherte Werte Formularfeldern zu?
  • Welche Kriterien werden von Autofill beim Ausfüllen eines Formularfelds verwendet?
  • Welche Felder wurden nicht durch Autofill ausgefüllt?
  • Warum wird ein Formularfeld nicht durch AutoFill ausgefüllt?

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

Was ist Autofill?

Chrome unterstützt Nutzer bei der Verwaltung von Adress-, Zahlungs- und Anmeldeinformationen, indem Datensätze sicher gespeichert werden und Formularfelder ausgefüllt werden können, ohne dass der Nutzer Text eingeben muss. Das nennt man Autofill.

Chrome bietet das Speichern von AutoFill-Daten an, wenn Sie ein Formular senden. Auf einem Mobilgerät:

Drei Android-Screenshots: ein Adressformular in Chrome, die Autofill-Option in Chrome zum Speichern der Adresse und ein Dialogfeld zum Bearbeiten des neuen AutoFill-Eintrags.

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

Auf einem Mobilgerät:

Auf einem Computer:

Chrome bietet das automatische Ausfüllen eines Adressformulars auf dem Computer an

Du kannst deine Autofill-Daten in den Chrome-Einstellungen verwalten.

Auf einem Mobilgerät:

Chrome-Einstellungen unter Android: eine Adresse bearbeiten

Auf einem Computer:

chrome://settings/addresses Seite mit zwei Beispieladressen

Möglicherweise hat Chrome auch Vorschläge für Eingabefelder gesehen, die sich nicht auf Adressen-, Kreditkarten- oder Anmeldedaten beziehen. Neben der Funktion „Automatisches Ausfüllen“ für Sätze strukturierter Daten wie Adresse und Zahlungsdetails hilft Chrome den Nutzern, die erneute Eingabe von Daten in einzelne Formularfelder zu vermeiden, die von AutoFill nicht verarbeitet werden können. Wenn ein Formular ein Feld mit einem Namensattribut enthält, das in Chrome schon einmal vorkommt, kann Chrome Werte vorschlagen, damit Sie Daten nicht noch einmal eingeben müssen.

Hier ein einfaches Beispiel:

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

Aus den Chrome-Entwicklertools geht hervor, dass das Formularfeld hier keine für den Browser relevanten Attribute enthält. Stattdessen ist es nur ein name-Attribut von n300.

In den Chrome-Entwicklertools werden Informationen zu den unstrukturierten Daten in einem Formular angezeigt, wie im vorherigen Beispiel gezeigt: eine einzelne Eingabe, die nur die Attribute „type=text“ und „name=n300“ enthält.

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

Neue Autofill-Funktionen in den Chrome-Entwicklertools testen

Chrome testet neue Funktionen für den Bereich Probleme in den Entwicklertools, um AutoFill-Fehler zu beheben.

Sie können diese neuen Funktionen in Chrome Canary ausprobieren. Rufen Sie in den Entwicklertools Einstellungen.-Einstellungen > Tests > Kästchen. auf. Hierbei wird im DOM-Baum des Steuerfelds „Elemente“ ein Knoten oder Attribut hervorgehoben, der gegen die Richtlinien verstößt. Wenn Sie dazu aufgefordert werden, laden Sie die Entwicklertools neu.

Seite mit den Einstellungen für die Chrome-Entwicklertools:

Alternativ können Sie Chrome Canary mit dem Flag AutofillEnableDevtoolsIssues über die Befehlszeile 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

Wenn du prüfen möchtest, ob Probleme aufgetreten sind, öffne in den Entwicklertools den Bereich Probleme auf einer Seite mit einem Formular. form-problems.glitch.me ist ein guter Ausgangspunkt.

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

Wie Sie sehen, ist dieses Formular ein Chaos! Es gibt:

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

Bewegen Sie den Mauszeiger auf ein markiertes Element in der DOM-Baumstruktur und klicken Sie auf Problem ansehen, um weitere Informationen zu erhalten.

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

Klicken Sie auf Nicht richtlinienkonformer Knoten, um die von den einzelnen Problemen betroffenen Ressourcen aufzurufen. Dieses Formular hat acht Labels mit einem for-Attribut, das nicht mit dem id eines Formularfelds übereinstimmt.

Entwicklertools zur Verbesserung der Barrierefreiheit von Formularen verwenden

Entwicklertools können auch Probleme mit der Barrierefreiheit bei Autofill hervorheben, z. B. ein Formularfeld, das weder ein aria-labelledby-Attribut noch ein verknüpftes <label> hat.

Chrome-Entwicklertools Der Bereich „Bedienungshilfen“, der zeigt, dass für ein Eingabeelement in einem Formular ein Label gefunden wurde.

In diesem Beispiel hat ein <input>-Element ein passendes Label. Das bedeutet, dass assistive Geräte den Zweck des Elements ankündigen können. Im folgenden Beispiel wurde jedoch kein übereinstimmendes Label oder aria-labelledby-Attribut gefunden.

Chrome-Entwicklertools Im Bereich „Bedienungshilfen“, der zeigt, dass für ein Eingabeelement in einem Formular kein passendes Label oder „aria-labelledby“-Attribut gefunden wurde.

Feedback zu den neuen Autofill-Funktionen in den Entwicklertools geben

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen:

  • Du kannst uns Vorschläge oder Feedback über den umbrella Bug auf crbug.com senden.
  • Du kannst ein Problem über die Entwicklertools melden: Weitere Optionen > Hilfe > Problem mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.

Weitere Informationen

  • Formulare lernen: Ein Kurs zu HTML-Formularen, mit dem Sie Ihre Fachkenntnisse in Webentwicklern erweitern können. Ideal für alle, die mit Formularen und Autofill noch nicht vertraut sind.
  • web.dev/tags/forms: Anleitungen, Best Practices und Codelabs für Zahlungs-, Anmelde- und Adressformulare