<input type="search">

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 Attribut value enthält eine Zeichenkette, die den in das Suchfeld eingegebenen Wert darstellt. Sie können diesen Wert mit der JavaScript-Eigenschaft HTMLInputElement.value abrufen.

searchTerms = mySearch.value;

Wenn keine Validierungsanforderungen für die Eingabe vorhanden sind (siehe Validierung für weitere Details), kann der Wert beliebiger Text oder eine leere Zeichenkette ("") 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 Suchfeld-Eingaben die folgenden Attribute.

list

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

maxlength

Die maximale Zeichenlänge (gemessen in UTF-16 Code-Einheiten), 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 angegeben wird, hat das Suchfeld keine maximale Länge. Dieser Wert muss außerdem größer oder gleich dem Wert von minlength sein.

Die Eingabe wird die Constraint-Validierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes größer als maxlength UTF-16 Code-Einheiten ist. Die Constraint-Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

minlength

Die minimale Zeichenlänge (gemessen in UTF-16 Code-Einheiten), 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 angegeben wird, hat das Sucheingabefeld keine Mindestlänge.

Das Suchfeld wird die Constraint-Validierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes weniger als minlength UTF-16 Code-Einheiten lang ist. Die Constraint-Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

pattern

Das Attribut pattern, wenn angegeben, ist ein regulärer Ausdruck, den der value der Eingabe erfüllen muss, damit der Wert die Constraint-Validierung besteht. Es muss ein gültiger regulärer JavaScript-Ausdruck sein, wie er vom RegExp-Typ verwendet wird, und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert ist; das 'u'-Flag wird beim Kompilieren des regulären Ausdrucks angegeben, damit das Muster als Folge von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Keine Schrägstriche sollten um den Musterausdruck angegeben werden.

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

Siehe den Abschnitt Spezifizieren eines Musters für Details und ein Beispiel.

placeholder

Das Attribut placeholder ist eine Zeichenkette, die dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Informationen im Feld erwartet werden. Es sollte ein Wort oder ein kurzer Satz sein, der den erwarteten Datentyp demonstriert, anstatt eine erklärende Nachricht zu sein. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

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

readonly

Ein Boolean-Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin direkt durch JavaScript-Code, der die HTMLInputElement value-Eigenschaft setzt, geändert werden.

size

Das Attribut size 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 sich die Breite von Zeichen unterscheidet, kann dies mehr oder weniger genau sein, und darauf sollte nicht vertraut werden; die resultierende Eingabe kann je nach den Zeichen und der verwendeten Schrift (font-Einstellungen) schmaler oder breiter als die angegebene Anzahl von Zeichen sein.

Dies setzt kein Limit dafür, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele 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 Aspekte, die mit der Verwendung von spellcheck auf <input>-Elementen zusammenhängen. 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.

"" (leere Zeichenkette) oder kein Wert

Folgt dem Standardverhalten des Elements für die Rechtschreibprüfung. Dies kann auf der spellcheck-Einstellung eines übergeordneten Elements 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 beim Lesen von spellcheck zurückgegeben wird, spiegelt möglicherweise nicht den tatsächlichen Status der Rechtschreibprüfung in einer Kontrolle wider, wenn die Präferenzen des Benutzeragenten die Einstellung überschreiben.

Nicht standardmäßige Attribute

Die folgenden nicht standardmäßigen Attribute sind für Suchfeldeingaben verfügbar. Vermeiden Sie, diese soweit möglich zu nutzen.

incremental

Das Boolean-Attribut incremental ist eine WebKit- und Blink-Erweiterung (somit unterstützt von Safari, Opera, Chrome usw.), die, falls vorhanden, dem Benutzeragenten anweist, die Eingabe als Live-Suche zu verarbeiten. Während der Benutzer den Wert des Feldes bearbeitet, sendet der Benutzeragent 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 angegeben ist, wird das search-Ereignis nur gesendet, wenn der Benutzer explizit eine Suche initiiert (z. B. durch Drücken der Enter- oder Return-Taste beim Bearbeiten des Feldes).

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

results

Das results-Attribut – nur von Safari unterstützt – ist ein numerischer Wert, der es ermöglicht, die maximale Anzahl der Einträge zu überschreiben, die im nativ bereitgestellten Dropdown-Menü der <input>-Elemente von vorherigen Suchanfragen angezeigt werden.

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

Verwendung von Suchfeldern

<input>-Elemente vom Typ search sind denjenigen vom Typ text sehr ähnlich, außer dass sie speziell für die Handhabung von Suchbegriffen vorgesehen sind. Ihr Verhalten ist im Wesentlichen gleichwertig, aber Benutzeragenten können sie standardmäßig anders gestalten (und natürlich können Seiten Stylesheets verwenden, um benutzerdefinierte Stile auf sie anzuwenden).

Einfaches Beispiel

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

Dies wird wie folgt gerendert:

q ist der häufigste name, der Suchfeldern gegeben wird, obwohl dies nicht obligatorisch ist. Bei der Übermittlung wird das Daten Name/Wert-Paar, das an den Server gesendet wird, q=searchTerm sein.

Unterschiede zwischen Such- und Texttypen

Die Hauptunterschiede liegen in der Art und Weise, wie Browser sie handhaben. Das erste, was zu beachten ist, ist, dass einige Browser ein Kreuzsymbol anzeigen, das angeklickt werden kann, um den Suchbegriff bei Bedarf sofort zu entfernen; in Chrome wird diese Aktion auch ausgelöst, wenn Escape gedrückt wird. Der folgende Screenshot stammt von Chrome:

Darüber hinaus neigen moderne Browser dazu, Suchbegriffe, die zuvor über Domänen hinweg eingegeben wurden, automatisch zu speichern, die dann als Autovervollständigungsoptionen erscheinen, wenn nachfolgende Suchen in Suchfeldern auf dieser Domäne durchgeführt werden. Dies hilft Benutzern, die dazu neigen, über einen längeren Zeitraum mit denselben oder ähnlichen Suchanfragen zu suchen. Dieser Screenshot stammt von Firefox:

Werfen wir an diesem Punkt einen Blick auf einige nützliche Techniken, die Sie auf Ihre Suchformulare anwenden können.

Platzhalter setzen

Sie können einen nützlichen Platzhalter in Ihrem Suchfeld bereitstellen, der einen Hinweis darauf geben kann, was zu tun ist, indem Sie das placeholder-Attribut verwenden. 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:

Such Formular-Labels und Barrierefreiheit

Ein Problem mit Suchformularen ist deren Barrierefreiheit; ein häufiges Designmerkmal ist es, 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 aufgrund der Platzierung normalerweise ziemlich offensichtlich ist (dieses Beispiel zeigt ein typisches Muster).

Dies könnte jedoch für Benutzer von Bildschirmlesegeräten Verwirrung stiften, da sie keine verbale Indikation darüber erhalten, was das Suchfeld ist. Eine Möglichkeit, dies zu umgehen, ohne Ihr visuelles Design zu beeinträchtigen, besteht darin, Landmark-Elemente zu verwenden.

• Verpacken Sie die gesamte Suchfunktionalität in ein <search>-Element, das eine Landmark-Region erstellt, die von unterstützenden Technologien angekündigt und schnell durchsucht werden kann. Wenn sich Ihr <input> bereits in einem <form> befindet, können Sie alternativ role="search" dem <form>-Element hinzufügen, das auch das <form> zu einem Such-Landmark macht. Das <search>-Element verwendet native HTML-Semantik, während role="search" mehr Unterstützung hat und möglicherweise kürzer zu tippen ist, wenn Sie bereits einen <form>-Wrapper haben.
• Wenn das nicht ausreicht, können Sie das aria-label-Attribut auf dem <input> selbst verwenden. Dies sollte ein beschreibender Textetikett sein, das vom Bildschirmlesegerät vorgelesen wird; es wird als nicht visuelles Äquivalent zu <label> verwendet.

Sehen 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>

So wird es unten dargestellt:

Es gibt keinen visuellen Unterschied zum vorherigen Beispiel, aber Benutzer von Bildschirmlesegeräten 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 festlegen, die das Eingabefeld auf einmal anzeigen kann. In diesem Beispiel ist das Suchfeld beispielsweise 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 vom Typ search haben dieselben Validierungsfunktionen wie reguläre text-Eingaben. Es ist weniger wahrscheinlich, dass Sie Validierungsfunktionen im Allgemeinen für Suchfelder verwenden möchten. In vielen Fällen sollten Benutzer einfach nach allem suchen dürfen, es gibt jedoch einige Fälle zu berücksichtigen, wie z.B. die Suche in Daten eines bekannten Formats.

Eine Anmerkung zur Gestaltung

Es gibt nützliche Pseudoklassen zum Gestalten von gültigen/ungültigen Formularelementen: :valid und :invalid. In diesem Abschnitt verwenden wir das folgende CSS, das ein Häkchen (Tick) neben Eingaben mit gültigen Werten und ein Kreuz neben Eingaben mit ungültigen Werten anzeigt.

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 Formular-Element platziert wird und als Halter für die Symbole fungiert. Dies war notwendig, da einige Eingabetypen in einigen Browsern Symbole, die direkt nach ihnen platziert sind, nicht gut anzeigen.

Eingabe als erforderlich markieren

Sie können das required-Attribut verwenden, um auf einfache Weise sicherzustellen, dass das Eingeben eines Wertes erforderlich ist, bevor die Formularübermittlung erlaubt ist:

<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:

Zusätzlich zeigt der Browser eine Nachricht an, wenn Sie versuchen, das Formular ohne Eingabe eines Suchbegriffs zu übermitteln. Das folgende Beispiel stammt von Firefox:

Verschiedene Nachrichten werden angezeigt, wenn Sie versuchen, das Formular mit verschiedenen Arten von ungültigen Daten zu übermitteln, die in den Eingabefeldern enthalten sind; siehe die folgenden Beispiele.

Länge des Eingabewerts

Sie können eine Mindestlänge in Zeichen für den eingegebenen Wert mithilfe des Attributs minlength angeben; ähnlich können Sie maxlength verwenden, um die maximale Länge des eingegebenen Wertes festzulegen.

Im folgenden Beispiel wird angegeben, dass der eingegebene Wert 4 bis 8 Zeichen lang sein muss.

<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 zu übermitteln, wird Ihnen eine entsprechende Fehlermeldung angezeigt (die zwischen den Browsern unterschiedlich ist). Wenn Sie versuchen, mehr als 8 Zeichen einzugeben, lässt der Browser dies nicht zu.

Spezifizieren eines Musters

Sie können das Attribut pattern verwenden, um einen regulären Ausdruck anzugeben, den der eingegebene Wert befolgen muss, um als gültig zu gelten (siehe Validierung mit regulärem Ausdruck für einen Crash-Kurs).

Schauen wir uns ein Beispiel an. Angenommen, wir möchten ein Suchformular für Produkt-IDs bereitstellen, und die IDs sind 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

Ein gutes Beispiel für ein Suchformular im Kontext finden Sie in unserem website-aria-roles-Beispiel (siehe es live).

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTML-Formulare
• <input> und die darauf basierende HTMLInputElement-Schnittstelle
• <input type="text">