HTML Search Input Generator
Eingabefeld für Suchanfragen. Browser zeigen einen kleinen X-Button zum Leeren.
Anwendung & Beispiele
Semantisch sinnvoll für Such-Eingabefelder, z.B. in Headern. Tastatur-Apps können dafür einen „Suchen"-Button anzeigen.
FAQ
Was unterscheidet type="search" von einem normalen Text-Feld?
Funktional kaum, aber semantisch und visuell: viele Browser zeigen einen X-Button zum Leeren, mobile Tastaturen einen "Suchen"-Button. Auch Screenreader interpretieren das Feld als Suchfeld.
Welche Form-Method sollte ein Such-Formular haben?
Üblicherweise method="get", weil die Suchanfrage in der URL steht (z.B. ?q=begriff) — dadurch bookmarkbar und teilbar.
Wie deaktiviere ich den X-Button?
Per CSS: input[type="search"]::-webkit-search-cancel-button { display: none; } (browser-spezifisch, nur Webkit/Chromium).
Wofür sind ID, Class und Title?
id identifiziert ein Element eindeutig (für CSS, JS, Anker-Links). class erlaubt CSS-Styling, mehrere Klassen werden mit Leerzeichen getrennt. title erzeugt einen Tooltip beim Hover.
Funktioniert der Code in allen Browsern?
Alle hier erzeugten Elemente sind valides HTML5 und werden in allen modernen Browsern (Chrome, Firefox, Safari, Edge, Opera) unterstützt. Bei sehr alten Browsern (z.B. IE 11) kann es bei einzelnen Input-Typen wie color oder date Einschränkungen geben.