Das Chrome-Entwicklertools-Team entwickelt zusätzliche neue Funktionen, mit denen du Formularprobleme leichter erkennen und Autofill-Fehler beheben kannst.
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:
Anschließend bietet Chrome an, Formulare automatisch mit den gespeicherten Daten auszufüllen.
Auf einem Mobilgerät:
Auf einem Computer:
Du kannst deine Autofill-Daten in den Chrome-Einstellungen verwalten.
Auf einem Mobilgerät:
Auf einem Computer:
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:
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.
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 > Tests > 
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.
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.
Wie Sie sehen, ist dieses Formular ein Chaos! Es gibt:
- Eingabefelder ohne
id- odername-Attribut. - Elemente mit doppelten IDs.
- Ein
<label>mit einemfor-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.
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.
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.
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