{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "formular-eingabehilfen-autofill",
 "name": "Eingabehilfen und Autofill",
 "name_en": "Autofill, input modes and German formats",
 "kurz": "Terminanfrage einer Kfz-Werkstatt, bei der jedes Feld dem Browser sagt, was es will: ein Inspektor zeigt Token und Tastatur, Kennzeichen und Kilometer werden deutsch gesetzt, die PLZ schlägt den Ort vor, Autofill bekommt Gelb mit „bitte prüfen“.",
 "kategorie": "Zugang & Robustheit",
 "kategorie_slug": "zugang",
 "kategorie_nr": 17,
 "bau_chat": "E",
 "prioritaet": "E",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "sachlich",
  "robust",
  "klar"
 ],
 "technik": [
  "html",
  "css",
  "vanilla-js",
  "intl",
  "form"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "andere"
 ],
 "leistungskosten": "sehr niedrig",
 "steckbrief": {
  "beschreibung": "Jedes Feld sagt dem Browser, was es will: autocomplete-Token für Name, Telefon, E-Mail, Straße, PLZ und Ort, type und inputmode für die passende Telefon-Tastatur, enterkeyhint für die Eingabetaste. Deutsche Formate werden angenommen, wie Menschen sie tippen (Telefon mit Leerzeichen oder Schrägstrich, Kennzeichen mit oder ohne Bindestrich, Kilometer mit Punkt) und erst beim Verlassen ordentlich gesetzt. Die PLZ schlägt den Ort vor, überschreibbar. Freiwillige Felder sind mit „freiwillig“ beschriftet. Fehlertexte nennen, was fehlt, mit Beispiel. Vom Browser ausgefüllte Felder bekommen über :autofill einen eigenen Stil in der Markenfarbe statt Gelb oder Blau, mit dem Hinweis „bitte prüfen“.",
  "warum_es_wirkt": "Auf dem Telefon kostet jedes getippte Feld Zeit. Mit richtigen Token füllt der Browser Name, Adresse und Telefon in einem Tipp; die passende Tastatur spart Wechsel. Wer „0521/12 34 56“ tippen darf, statt an einem starren Muster zu scheitern, bricht seltener ab. Ein eigener Autofill-Stil wirkt gestaltet und erinnert daran, die Angaben zu prüfen.",
  "wann_einsetzen": "Jedes Formular mit persönlichen Angaben: Kontakt, Termin, Rückruf, Bewerbung, Bestellung, Hol- und Bringdienst. Pflicht im Generator für alle Formulare.",
  "wann_nicht": "Kein autocomplete für Angaben über Dritte (Empfänger eines Geschenks) ohne section- oder shipping-Präfix. PLZ-Ortsvorschlag nur mit echter, gepflegter Liste oder Dienst; nie den Ort gegen die Eingabe erzwingen. Keine Formatprüfung, die echte Eingaben abweist (Doppelnamen, ausländische Nummern).",
  "varianten": [
   "Termin: Name, Telefon, E-Mail (freiwillig), Kennzeichen, Kilometerstand (freiwillig), Wunschtag",
   "Abholung: Abholadresse mit section- und shipping-Token, PLZ schlägt Ort vor, abweichende Rechnungsadresse mit billing-Token",
   "Übersicht: Spickzettel aller Felder mit type, inputmode, autocomplete, weiteren Attributen und Fehlertext"
  ],
  "umsetzung": "Labels über jedem Feld, nie nur Platzhalter. Token: name, tel, email, street-address oder address-line1, postal-code, address-level2, bei zwei Adressen section-abholung bzw. billing davor. Telefon type=tel autocomplete=tel; E-Mail type=email spellcheck=false autocapitalize=off; PLZ inputmode=numeric maxlength=5 autocomplete=postal-code; Kennzeichen autocapitalize=characters; Kilometer inputmode=numeric, beim Verlassen mit Intl.NumberFormat('de-DE') gesetzt. enterkeyhint=next bzw. send. Prüfen erst beim Verlassen und Absenden (siehe validierung-nach-interaktion), Fehler über aria-describedby und aria-invalid, Text mit Beispiel. PLZ-Vorschlag: nach fünf Ziffern Ort aus Liste vorschlagen, nur wenn das Ortsfeld leer oder selbst vorgeschlagen ist; mehrere Orte als Auswahl. Autofill-Stil: input:autofill bzw. input:-webkit-autofill { box-shadow: inset 0 0 0 100px <Hausfarbe hell>; -webkit-text-fill-color: <Text> } und ein Hinweis, der über animationstart oder matches(':autofill') eingeblendet wird.",
  "mobil": "Eine Spalte, Felder mindestens 48 px hoch, Schrift mindestens 16 px gegen den Zoom in iOS. Tastatur passend zum Feld, Eingabetaste springt zum nächsten Feld. PLZ und Ort nebeneinander erst ab 360 px.",
  "reduzierte_bewegung": "Hinweise und Fehler erscheinen ohne Gleiten.",
  "barrierefreiheit": "Erfüllt WCAG 1.3.5 (Zweck der Eingabe bestimmen) über autocomplete-Token. Freiwillige Felder im Label benannt, nicht nur per Stern. Fehler am Feld mit aria-describedby und aria-invalid, Beispiel im Hinweistext. Der Autofill-Stil hält 4,5 : 1. Keine Zeitgrenzen, kein automatisches Springen ins nächste Feld."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.16, 1, 0.3, 1) öffnen, cubic-bezier(0.7, 0, 0.84, 0) schließen",
  "dauer_ms": "120 Farbe, 250 Hinweis und Fehler öffnen, 170 schließen",
  "stagger_ms": "",
  "distanz": "4 px",
  "sonstiges": "",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept kfz-werkstatt-autohaus (token-toggle-asymmetrisch)"
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 120
 },
 "gesehen_bei": [
  {
   "seite": "web.dev: Payment and address form best practices",
   "url": "https://web.dev/articles/codelab-address-form-best-practices",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026 (Stand 22.10.2026): Token name, address-line1, address-line2 oder street-address, Präfixe billing und shipping. type=tel und type=email, inputmode=numeric für andere Ziffern. Ein Namensfeld, Unicode-Buchstaben zulassen. PLZ-Adresssuche funktioniert nicht in allen Ländern. Labels statt Platzhalter, stabile name- und id-Werte.",
   "art": "artikel"
  },
  {
   "seite": "Jeremy Keith (Clearleft): Three attributes for better web forms",
   "url": "https://clearleft.com/thinking/three-attributes-for-better-web-forms",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026 (23.01.2023): inputmode wählt die Bildschirmtastatur, enterkeyhint beschriftet nur die Eingabetaste, autocomplete erlaubt sicheres Vorausfüllen; nur für die eigenen Angaben des Nutzers.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "web.dev: Address form best practices",
   "url": "https://web.dev/articles/codelab-address-form-best-practices"
  },
  {
   "titel": "HTML Standard: Autofill",
   "url": "https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill"
  },
  {
   "titel": "MDN: :autofill",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill"
  },
  {
   "titel": "WCAG 2.2: 1.3.5 Identify Input Purpose",
   "url": "https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html"
  }
 ],
 "kombinierbar_mit": [
  "validierung-nach-interaktion",
  "formular-fehlerzusammenfassung",
  "mehrschritt-anfrage",
  "kontakt-anfrage-formular",
  "fokus-stil-system",
  "tabellenziffern",
  "zoom-und-textabstand-robust"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/zugang/formular-eingabehilfen-autofill/",
  "meta": "https://cecodesign.de/lab/fundus/zugang/formular-eingabehilfen-autofill/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/zugang/formular-eingabehilfen-autofill/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026"
  ],
  "pruefnotizen": [
   "Recherche Runde 4 (04.11.2026): autocomplete=\"postal-code\" nur in 8 demo.html.",
   "Belege 04.11.2026: web.dev und Clearleft geöffnet. WCAG 1.3.5 nicht geöffnet. Kennzeichen-Format (Unterscheidungszeichen 1–3 Buchstaben, Erkennung 1–2 Buchstaben, 1–4 Ziffern, E oder H) nach FZV, nicht geprüft; vom Kunden prüfen lassen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Terminanfrage einer Kfz-Werkstatt, bei der jedes Feld dem Browser sagt, was es will: ein Inspektor zeigt Token und Tastatur, Kennzeichen und Kilometer werden deutsch gesetzt, die PLZ schlägt den Ort vor, Autofill bekommt Gelb mit „bitte prüfen“.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.16, 1, 0.3, 1) öffnen, cubic-bezier(0.7, 0, 0.84, 0) schließen",
   "dauer_ms": {
    "farbe": 120,
    "hinweis_fehler_auf": 250,
    "zu": 170
   },
   "distanz": "Fehler und Inspektor 4 px von unten",
   "token": "name, tel, email, section-abholung shipping name/address-line1/postal-code/address-level2, billing name/address-line1/postal-code/address-level2; Kennzeichen autocomplete=off",
   "eingabe": "PLZ inputmode=numeric maxlength=5; Kilometer inputmode=numeric; Kennzeichen autocapitalize=characters spellcheck=false; E-Mail spellcheck=false autocapitalize=off; enterkeyhint next bzw. send",
   "formate": "Telefon: mindestens 6 Ziffern, erlaubt + / ( ) - . und Leerzeichen; Kennzeichen /^([A-ZÄÖÜ]{1,3})[\\s-]+([A-Z]{1,2})[\\s-]*([1-9]\\d{0,3})([EH])?$/ → „GT-AB 123“, ohne Trenner nur Großschreibung; Kilometer Intl.NumberFormat('de-DE') → „86.400“; PLZ /^\\d{5}$/",
   "pruefzeitpunkt": "beim Verlassen und Absenden, Fehler verschwindet beim Tippen, sobald die Eingabe stimmt",
   "autofill": "input:-webkit-autofill und :autofill: box-shadow inset 0 0 0 100px #FFF4CC, Rand #9A7400, -webkit-text-fill-color Text; Erkennung über animationstart (Keyframe autofill-an, 1 ms); Hinweis-Pille „Vom Browser, bitte prüfen“ #6B5000 auf #FFF4CC",
   "ort_vorschlag": "nach fünf Ziffern, nur wenn Ort leer oder selbst vorgeschlagen; sonst Knopf „… übernehmen“",
   "farben": "Grund #F2F1ED, Feld #FFFFFF, Text #121314, leise #595E63, Asphalt #232629, Verkehrsgelb #F5B700, Fehler #B3261E, Erfolg #1F7A3E",
   "schrift": "Mona Sans 800 wdth 80 für h1, Google Sans Flex für Text und Felder (1.0625rem, Felder 50 px hoch)"
  },
  "ausloeser": "klick",
  "touch": "Eine Spalte, Felder 50 px hoch und 17 px Schrift (kein Zoom in iOS); die echte Tastatur ersetzt den Inspektor, der unter 560 px ausgeblendet ist. Der Spickzettel wird zu Karten mit Beschriftung je Wert.",
  "reduziert": "Fehler, Hinweise, Inspektor und die aufklappende Rechnungsadresse erscheinen ohne Übergang.",
  "korrekturen": {
   "varianten": [
    "Termin: Name, Telefon, E-Mail (freiwillig), Kennzeichen, Kilometerstand (freiwillig), Wunschtag",
    "Abholung: Abholadresse mit section- und shipping-Token, PLZ schlägt Ort vor, abweichende Rechnungsadresse mit billing-Token",
    "Übersicht: Spickzettel aller Felder mit type, inputmode, autocomplete, weiteren Attributen und Fehlertext"
   ]
  },
  "geprueft": "04.11.2026",
  "notiz": "Welt: Rezept kfz-werkstatt-autohaus, erfundene Werkstatt Brandt & Sezer in Rheda-Wiedenbrück (Sie-Ansprache, Hol- und Bringdienst im Umkreis von 15 km). Links ein Feld-Inspektor auf Asphalt: Name, type, inputmode, autocomplete, enterkeyhint, weitere Attribute und eine gezeichnete Tastatur (Ziffernblock, Telefon-Tastatur, Tastatur mit @, Großbuchstaben) samt Beschriftung der Eingabetaste. Pult: Variante, „Autofill simulieren“ (setzt Werte und die Klasse sim-autofill, die wie :autofill aussieht; Kennzeichen bleibt leer, weil es kein Token gibt), „Leeren“. PLZ-Liste ist eine Beispielliste für den Kreis Gütersloh, im Projekt aus einem gepflegten Dienst. Kennzeichen-Regel nach FZV vom Kunden prüfen lassen. Abgrenzung: validierung-nach-interaktion regelt den Zeitpunkt der Prüfung, formular-fehlerzusammenfassung die Liste oben; dieses Muster die Attribute, Formate und den Autofill-Stil. Selbsturteil 4.",
  "varianten": [
   {
    "id": "termin",
    "name": "Termin mit Fahrzeugdaten",
    "wann": "Kurze Anfragen mit Kontakt und Fachangaben (kfz, handwerk, praxis, friseur).",
    "werte": {
     "felder": "Name, Telefon, E-Mail freiwillig, Kennzeichen, Kilometer freiwillig, Wunschtag type=date min=morgen"
    }
   },
   {
    "id": "abholung",
    "name": "Adresse mit zweiter Rechnungsadresse",
    "wann": "Lieferung, Abholung, Hausbesuch oder Bestellung mit Adresse (kfz Hol- und Bringdienst, pflege, d2c, lebensmittel).",
    "werte": {
     "token": "section-abholung shipping …, billing …",
     "rechnung": "Checkbox öffnet Felder per grid-template-rows 0fr → 1fr, inert solange zu, required nur offen"
    }
   },
   {
    "id": "uebersicht",
    "name": "Spickzettel",
    "wann": "Referenz für den Bau und für den Generator: welche Attribute und Fehlertexte jedes Feld bekommt.",
    "werte": {
     "zeilen": "11 Feldarten",
     "telefon": "unter 560 px Karten statt Tabelle"
    }
   }
  ]
 }
}