Was bekommt man, wenn man einen Such-Input-Typ verwendet?

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Zum Beispiel: <input type="search">

  1. In Safari erhält man ein extra-abgerundetes Aussehen, das früher dem macOS-Look für Suchfelder entsprach, aber heute nicht mehr wirklich. Ich hasse das Aussehen nicht, außer…
  2. Safari ignoriert die font-size, die man ihm zuweist, komplett, also Vorsicht damit. Es sei denn, man zerdrückt die runde Optik mit -webkit-appearance: none (ich nehme an, zukünftig ohne Präfix) – dann kann man es, also wahrscheinlich machen das 92% aller Webseiten.
  3. Man bekommt ein kleines ×-Symbol im Input (wenn er einen Wert hat), das ihn leert. Das ist wahrscheinlich der beste Grund, ihn zu verwenden, und glücklicherweise behält man es auch nach dem Zurücksetzen der appearance.
  4. Man bekommt die Befriedigung zu wissen, dass man den semantisch korrekten Input-Typ für die Aufgabe verwendet, vorausgesetzt, man baut etwas, das tatsächlich etwas sucht.
  5. Man bekommt vergangene Suchbegriffe mit Autovervollständigung. Browser speichern diese vergangenen Suchbegriffe und bieten ein Menü zur Autovervollständigung an. Ich versuche, dies zu einer Liste von Dingen zu machen, die für Such-Inputs *einzigartig* sind, und ich kann beweisen, dass dies auch bei Nicht-Such-Inputs passiert. Aber hey, es ergibt bei Such-Inputs am meisten Sinn.
  6. Man bekommt das Vergnügen, dem übergeordneten Formular eine Rolle zuzuweisen (d. h. <form role="search">), da dies assistiven Technologien hilft, es als Suchformular anzukündigen.
  7. Man muss daran denken, dem Input ein ordentliches <label> hinzuzufügen. Nur ein Lupensymbol oder nur ein placeholder allein reicht nicht aus, auch wenn das visuell bei vielen Designs verlangt wird.
  8. Man bekommt ein super seltsames incremental-Attribut, das ein verzögertes search-Ereignis an das DOM-Element selbst sendet. Ich nehme an, das ist nützlich für Live-Such-UX. Aber es ist nicht standardisiert und nicht in Firefox vorhanden, also verlässt man sich wahrscheinlich nicht darauf (via Christian Shaefer).
  9. Man kann einen weiteren Tag als Frontend-Entwickler leben.