Zum Beispiel: <input type="search">
- 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…
- 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. - 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. - 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.
- 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.
- 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. - Man muss daran denken, dem Input ein ordentliches
<label>hinzuzufügen. Nur ein Lupensymbol oder nur einplaceholderallein reicht nicht aus, auch wenn das visuell bei vielen Designs verlangt wird. - Man bekommt ein super seltsames
incremental-Attribut, das ein verzögertessearch-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). - Man kann einen weiteren Tag als Frontend-Entwickler leben.
Und wenn man das
action-Attribut des Formularelements nicht weglässt – aus irgendeinem albernen Grund – bekommt man auch eine „Suchen“-Schaltfläche auf der iOS-Tastatur anstelle von nur „Enter“Danke für diese Erinnerung.
Ich füge immer ein
role="search"zum übergeordneten Formular hinzu, habe aber dastype="search"vergessen.Die Gründe 3, 4 und 9 auf Ihrer Liste sind für mich Rechtfertigung genug!
In Firefox kann man beim Rechtsklick darauf „Ein Schlüsselwort für diese Suche hinzufügen…“ erhalten.