<input type="search">

<input> Elemente des Typs search sind Textfelder, die für den Benutzer vorgesehen sind, um Suchanfragen einzugeben. Sie sind funktional identisch mit text-Eingaben, können jedoch vom User-Agent unterschiedlich gestylt werden.

Probieren Sie es aus

<label for="site-search">Search the site:</label>
<input type="search" id="site-search" name="q" />
<button>Search</button>

label {
 display: block;
 font:
 1rem "Fira Sans",
 sans-serif;
}
input,
label {
 margin: 0.4rem 0;
}

Wert

Das value-Attribut enthält einen String, der den im Suchfeld enthaltenen Wert darstellt. Sie können diesen mit der HTMLInputElement.value-Eigenschaft in JavaScript abrufen.

searchTerms = mySearch.value;

Wenn keine Validierungsbeschränkungen für die Eingabe vorhanden sind (siehe Validierung für weitere Details), kann der Wert ein beliebiger Textstring oder ein leerer String ("") sein.

Zusätzliche Attribute

Zusätzlich zu den globalen Attributen und den Attributen, die auf alle <input>-Elemente unabhängig von ihrem Typ wirken, unterstützen Suchfeldeingaben die folgenden Attribute.

list

Der Wert des list-Attributs ist die id eines <datalist>-Elements, das sich im selben Dokument befindet. Die <datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die mit dem type nicht kompatibel sind, werden nicht in die vorgeschlagenen Optionen einbezogen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert eingeben.

maxlength

Die maximale Stringlänge (gemessen in UTF-16 Codeeinheiten), die der Benutzer in das Suchfeld eingeben kann. Dies muss ein ganzzahliger Wert von 0 oder höher sein. Wenn kein maxlength angegeben ist oder ein ungültiger Wert spezifiziert wurde, hat das Suchfeld keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

Die Eingabe wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes länger als maxlength UTF-16 Codeeinheiten ist. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

minlength

Die minimale Stringlänge (gemessen in UTF-16 Codeeinheiten), die der Benutzer in das Suchfeld eingeben kann. Dies muss ein nicht-negativer ganzzahliger Wert sein, der kleiner oder gleich dem von maxlength angegebenen Wert ist. Wenn kein minlength angegeben ist oder ein ungültiger Wert spezifiziert wurde, hat die Sucheingabe keine Mindestlänge.

Das Suchfeld wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes kürzer als minlength UTF-16 Codeeinheiten ist. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

pattern

Das pattern-Attribut, wenn angegeben, ist ein regulärer Ausdruck, den der value der Eingabe entsprechen muss, um die Einschränkungsvalidierung zu bestehen. Es muss ein gültiger JavaScript-Ausdruck sein, wie er vom RegExp-Typ verwendet wird, und wie er in unserem Leitfaden zu regulären Ausdrücken dokumentiert ist; das 'u'-Flag wird angegeben, wenn der reguläre Ausdruck kompiliert wird, sodass das Muster als eine Folge von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Um das Muster herum sollten keine Schrägstriche angegeben werden.

Wenn das angegebene Muster nicht angegeben oder ungültig ist, wird kein regulärer Ausdruck angewendet und dieses Attribut wird vollständig ignoriert.

Siehe den Abschnitt Ein Muster festlegen für Details und ein Beispiel.

placeholder

Das placeholder-Attribut ist ein String, der dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Information im Feld erwartet wird. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp demonstriert, anstatt eine erklärende Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenvorschübe enthalten.

Wenn der Inhalt des Steuerelements eine Richtung (LTR oder RTL) hat, aber der Platzhalter in der entgegengesetzten Richtung dargestellt werden muss, können Sie Unicode-Bidi-Algorithmus-Formatierungszeichen verwenden, um die Richtung des Platzhalters zu überschreiben; siehe Anleitung zur Verwendung von Unicode-Steuerelementen für bidirektionalen Text für weitere Informationen.

readonly

Ein Boolesches Attribut, das, wenn vorhanden, bedeutet, dass dieses Feld nicht vom Benutzer bearbeitet werden kann. Sein value kann jedoch weiterhin direkt durch das Setzen der HTMLInputElement value-Eigenschaft durch JavaScript geändert werden.

size

Das size-Attribut ist ein numerischer Wert, der angibt, wie viele Zeichen breit das Eingabefeld sein sollte. Der Wert muss eine Zahl größer als null sein, und der Standardwert ist 20. Da Zeichenbreiten variieren, kann dies unter Umständen nicht exakt sein und sollte nicht darauf verlassen werden; die resultierende Eingabe kann schmaler oder breiter sein als die angegebene Anzahl von Zeichen, abhängig von den Zeichen und dem genutzten Schriftbild (font Einstellungen).

Dies setzt nicht die Anzahl der Zeichen fest, die der Benutzer in das Feld eingeben kann. Es legt nur fest, wie viele Zeichen ungefähr gleichzeitig sichtbar sein können. Um ein oberes Limit für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

spellcheck

spellcheck ist ein globales Attribut, das verwendet wird, um anzugeben, ob die Rechtschreibprüfung für ein Element aktiviert werden soll. Es kann auf jedem bearbeitbaren Inhalt verwendet werden, aber hier betrachten wir spezifische Details zur Verwendung von spellcheck auf <input>-Elementen. Die zulässigen Werte für spellcheck sind:

false

Deaktiviert die Rechtschreibprüfung für dieses Element.

true

Aktiviert die Rechtschreibprüfung für dieses Element.

"" (leerer String) oder kein Wert

Befolgt das Standardverhalten für die Rechtschreibprüfung des Elements. Dies kann auf der spellcheck-Einstellung des Elterndokuments oder anderen Faktoren basieren.

Ein Eingabefeld kann die Rechtschreibprüfung aktiviert haben, wenn es nicht das readonly-Attribut gesetzt hat und nicht deaktiviert ist.

Der Wert, der durch das Lesen von spellcheck zurückgegeben wird, spiegelt möglicherweise nicht den tatsächlichen Zustand der Rechtschreibprüfung innerhalb eines Steuerelements wider, wenn die Präferenzen des User-Agents die Einstellung überschreiben.

Nicht-Standard-Attribute

Die folgenden, nicht standardisierten Attribute sind für Suchfeldeingaben verfügbar. Vermeiden Sie nach Möglichkeit deren Verwendung.

incremental

Das boolesche Attribut incremental ist eine WebKit- und Blink-Erweiterung (daher unterstützt von Safari, Opera, Chrome usw.), die, falls vorhanden, dem User-Agent sagt, die Eingabe als Live-Suche zu verarbeiten. Wenn der Benutzer den Wert des Feldes bearbeitet, sendet der User-Agent search-Ereignisse an das HTMLInputElement-Objekt, das das Suchfeld darstellt. Dies ermöglicht es Ihrem Code, die Suchergebnisse in Echtzeit zu aktualisieren, während der Benutzer die Suche bearbeitet.

Wenn incremental nicht spezifiziert ist, wird das search-Ereignis nur gesendet, wenn der Benutzer eine Suche explizit initiiert (z. B. durch Drücken der Enter oder Return-Taste während des Bearbeitens des Feldes).

Das search-Ereignis ist so rate-begrenzt, dass es nicht häufiger als in einem implementierungsdefinierten Intervall gesendet wird.

results

Das results-Attribut — unterstützt nur von Safari — ist ein numerischer Wert, der Ihnen erlaubt, die maximale Anzahl von Einträgen zu überschreiben, die im nativ bereitgestellten Dropdown-Menü der vorherigen Suchanfragen des <input>-Elements angezeigt werden.

Der Wert muss eine nicht-negative Dezimalzahl sein. Wenn nicht angegeben oder ein ungültiger Wert eingegeben wird, wird die standardmäßige maximale Anzahl von Einträgen des Browsers verwendet.

Verwendung von Sucheingaben

<input>-Elemente des Typs search sind denjenigen des Typs text sehr ähnlich, außer dass sie speziell für die Verarbeitung von Suchbegriffen gedacht sind. Sie sind im Verhalten im Wesentlichen gleichwertig, aber User-Agents können sich entscheiden, sie standardmäßig unterschiedlich zu stylen (und natürlich können Websites Stylesheets verwenden, um ihnen benutzerdefinierte Stile zu verleihen).

Einfaches Beispiel

<form>
 <div>
 <input type="search" id="mySearch" name="q" />
 <button>Search</button>
 </div>
</form>

Dies wird wie folgt gerendert:

q ist der am häufigsten vergebene name für Sucheingaben, obwohl dies nicht zwingend erforderlich ist. Wenn man das Formular absendet, wird das Daten-Namen/Werte-Paar q=searchTerm zum Server gesendet.

Unterschiede zwischen Such- und Texttypen

Die grundlegenden Unterschiede bestehen hauptsächlich in der Art und Weise, wie Browser sie behandeln. Das erste zu beachtende ist, dass einige Browser ein Kreuzsymbol anzeigen, auf das geklickt werden kann, um den Suchbegriff bei Bedarf sofort zu entfernen. In Chrome wird diese Aktion auch durch Drücken der Escape-Taste ausgelöst. Der folgende Screenshot stammt aus Chrome:

Fokussiertes Suchfeld, mit Fokusring, mit dem Text 'Katzen'. Es gibt ein x-Symbol im Eingabefeld rechtsseitig.

Darüber hinaus speichern moderne Browser auch automatisch zuvor eingegebene Suchbegriffe domänenübergreifend, die dann als Autovervollständigungsoptionen angezeigt werden, wenn nachfolgende Suchanfragen in Sucheingabefeldern dieser Domäne durchgeführt werden. Dies hilft Benutzern, die im Laufe der Zeit häufig dieselben oder ähnliche Suchanfragen stellen. Dieser Screenshot stammt aus Firefox:

[画像:Ein Eingabefeld im Fehlerzustand mit einem roten Fokusring. Der Benutzer hat den Buchstaben 'h' eingegeben. Eine Pop-up-Auswahlliste öffnet sich direkt unter dem Eingabefeld mit zwei Optionen: hello und hermansje.]

An diesem Punkt schauen wir uns einige nützliche Techniken an, die Sie auf Ihre Suchformulare anwenden können.

Platzhalter festlegen

Sie können einen nützlichen Platzhalter in Ihrer Sucheingabe bereitstellen, der einen Hinweis darauf gibt, was man machen soll, mit dem placeholder-Attribut. Schauen Sie sich das folgende Beispiel an:

<form>
 <div>
 <input
 type="search"
 id="mySearch"
 name="q"
 placeholder="Search the site..." />
 <button>Search</button>
 </div>
</form>

Sie können sehen, wie der Platzhalter unten gerendert wird:

Suchformularlabels und Zugänglichkeit

Ein Problem mit Suchformularen ist ihre Zugänglichkeit; eine gängige Designpraxis besteht darin, kein Label für das Suchfeld bereitzustellen (obwohl es möglicherweise ein Lupensymbol oder Ähnliches gibt), da der Zweck eines Suchformulars für sehende Benutzer normalerweise ziemlich offensichtlich ist, wenn die Platzierung gut gemacht ist (dieses Beispiel zeigt ein typisches Muster).

Dies könnte jedoch für Screenreader-Benutzer verwirrend sein, da sie keine verbale Indikation darüber erhalten, was die Sucheingabe ist. Ein Weg, dies zu umgehen, der Ihr visuelles Design nicht beeinträchtigt, ist die Verwendung von Landmark-Elementen.

• Wickeln Sie die gesamte Suchfunktion in ein <search>-Element, das eine Landmark-Region erstellt, die von assistiven Technologien angesagt und schnell navigierbar gemacht wird. Wenn sich Ihr <input> bereits in einem <form>-Element befindet, können Sie alternativ role="search" zum <form>-Element hinzufügen, was auch das <form>-Element zu einer Suchlandmarke macht. Das <search>-Element verwendet native HTML-Semantik, während role="search" mehr Unterstützung bietet und möglicherweise kürzer zu tippen ist, wenn Sie bereits einen <form>-Wrapper haben.
• Wenn das nicht ausreicht, können Sie ein aria-label-Attribut am <input> selbst verwenden. Dies sollte ein beschreibender Text sein, der vom Screenreader vorgelesen wird; es wird als visuelles Äquivalent zu <label> verwendet.

Schauen wir uns ein Beispiel an:

<search>
 <form>
 <div>
 <input
 type="search"
 id="mySearch"
 name="q"
 placeholder="Search the site..."
 aria-label="Search through site content" />
 <button>Search</button>
 </div>
 </form>
</search>

Sie können sehen, wie dies unten gerendert wird:

Es gibt keinen visuellen Unterschied zum vorherigen Beispiel, aber Screenreader-Benutzer haben viel mehr Informationen zur Verfügung.

Physische Größe des Eingabeelements

Die physische Größe des Eingabefeldes kann mit dem size-Attribut gesteuert werden. Damit können Sie die Anzahl der Zeichen angeben, die das Eingabefeld gleichzeitig anzeigen kann. In diesem Beispiel ist das Suchfeld 30 Zeichen breit:

<form>
 <div>
 <input
 type="search"
 id="mySearch"
 name="q"
 placeholder="Search the site..."
 size="30" />
 <button>Search</button>
 </div>
</form>

Das Ergebnis ist dieses breitere Eingabefeld:

Validierung

<input>-Elemente des Typs search haben die gleichen Validierungsfunktionen wie reguläre text-Eingaben. Es ist weniger wahrscheinlich, dass man im Allgemeinen Validierungsfunktionen für Suchfelder verwenden möchte. In vielen Fällen sollten Benutzer einfach nach allem suchen dürfen, aber es gibt einige Fälle zu beachten, wie Suchen in Daten mit einem bekannten Format.

Ein Hinweis zum Styling

Es gibt nützliche Pseudo-Klassen, die für das Styling gültiger/ungültiger Formularelemente verfügbar sind: :valid und :invalid. In diesem Abschnitt verwenden wir das folgende CSS, welches ein Häkchen neben Eingaben mit gültigen Werten und ein Kreuz neben Eingaben mit ungültigen Werten platziert.

input:invalid ~ span::after {
 content: "✖";
 padding-left: 5px;
 position: absolute;
}
input:valid ~ span::after {
 content: "✓";
 padding-left: 5px;
 position: absolute;
}

Die Technik erfordert auch ein <span>-Element, das nach dem Formularelement platziert wird, das als Halter für die Symbole fungiert. Dies war notwendig, weil einige Eingabetypen in einigen Browsern Symbole, die direkt danach platziert werden, nicht sehr gut anzeigen.

Eingabe erforderlich machen

Sie können das required-Attribut verwenden, um einfach zu verlangen, dass ein Wert eingegeben wird, bevor die Formularübermittlung erlaubt wird:

<form>
 <div>
 <input
 type="search"
 id="mySearch"
 name="q"
 placeholder="Search the site..."
 required />
 <button>Search</button>
 <span class="validity"></span>
 </div>
</form>

input {
 margin-right: 10px;
}
input:invalid ~ span::after {
 content: "✖";
 padding-left: 5px;
 position: absolute;
}
input:valid ~ span::after {
 content: "✓";
 padding-left: 5px;
 position: absolute;
}

Dies wird wie folgt gerendert:

Wenn Sie versuchen, das Formular ohne eingegebenen Suchbegriff abzusenden, zeigt der Browser eine Nachricht an. Das folgende Beispiel stammt aus Firefox:

[画像:Formularfeld mit angebundener Nachricht, die sagt Bitte füllen Sie dieses Feld aus]

Verschiedene Nachrichten werden angezeigt, wenn Sie versuchen, das Formular mit unterschiedlichen Arten ungültiger Daten zu übermitteln, die in den Eingaben enthalten sind; siehe die untenstehenden Beispiele.

Eingabewertlänge

Sie können eine minimale Länge, in Zeichen, für den eingegebenen Wert mit dem minlength-Attribut angeben; ähnlich verwenden Sie maxlength, um die maximale Länge des eingegebenen Werts festzulegen.

Das Beispiel unten erfordert, dass der eingegebene Wert 4 bis 8 Zeichen lang ist.

<form>
 <div>
 <label for="mySearch">Search for user</label>
 <input
 type="search"
 id="mySearch"
 name="q"
 placeholder="User IDs are 4–8 characters in length"
 required
 size="30"
 minlength="4"
 maxlength="8" />
 <button>Search</button>
 <span class="validity"></span>
 </div>
</form>

input {
 margin-right: 10px;
}
input:invalid ~ span::after {
 content: "✖";
 padding-left: 5px;
 position: absolute;
}
input:valid ~ span::after {
 content: "✓";
 padding-left: 5px;
 position: absolute;
}

Dies wird wie folgt gerendert:

Wenn Sie versuchen, das Formular mit weniger als 4 Zeichen einzureichen, erhalten Sie eine entsprechende Fehlermeldung (die zwischen den Browsern variiert). Wenn Sie versuchen, über 8 Zeichen einzugeben, lässt der Browser es nicht zu.

Ein Muster festlegen

Sie können das pattern-Attribut verwenden, um einen regulären Ausdruck anzugeben, dem der eingegebene Wert folgen muss, um als gültig betrachtet zu werden (siehe Validierung gegen einen regulären Ausdruck für eine kurze Einführung).

Schauen wir uns ein Beispiel an. Nehmen wir an, wir wollten ein Produkt-ID-Suchformular bereitstellen, und die IDs waren alle Codes aus zwei Buchstaben gefolgt von vier Zahlen. Das folgende Beispiel deckt dies ab:

<form>
 <div>
 <label for="mySearch">Search for product by ID:</label>
 <input
 type="search"
 id="mySearch"
 name="q"
 placeholder="two letters followed by four numbers"
 required
 size="30"
 pattern="[A-z]{2}[0-9]{4}" />
 <button>Search</button>
 <span class="validity"></span>
 </div>
</form>

input {
 margin-right: 10px;
}
input:invalid ~ span::after {
 content: "✖";
 padding-left: 5px;
 position: absolute;
}
input:valid ~ span::after {
 content: "✓";
 padding-left: 5px;
 position: absolute;
}

Dies wird wie folgt gerendert:

Beispiele

Sie können ein gutes Beispiel für ein Suchformular im Kontext in unserem website-aria-roles Beispiel sehen (sehen Sie es live).

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTML Forms
• <input> und die HTMLInputElement-Schnittstelle, auf der es basiert
• <input type="text">