HTML-Attributwert <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 Zeichenfolge, die den Wert des Suchfelds darstellt. Sie können diesen Wert in JavaScript über die Eigenschaft HTMLInputElement.value abrufen.

searchTerms = mySearch.value;

Wenn für das Eingabefeld keine Validierungsvorgaben gelten (weitere Informationen finden Sie unter Validierung), kann der Wert eine beliebige Zeichenfolge oder eine leere Zeichenfolge ("") sein.

Zusätzliche Attribute

Neben den globalen Attributen und den Attributen, die für alle <input>-Elemente unabhängig von ihrem Typ gelten, unterstützen Suchfelder die folgenden Attribute.

list

Der Wert des Attributs list ist die id eines <datalist>-Elements im selben Dokument. Das <datalist> stellt eine Liste vordefinierter Werte bereit, die Benutzern für dieses Eingabefeld vorgeschlagen werden. Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in die Vorschläge aufgenommen. Die Werte sind Vorschläge, keine Vorgaben: Benutzer können einen Wert aus der Liste auswählen oder einen anderen Wert eingeben.

maxlength

Die maximale Länge der Zeichenfolge (gemessen in UTF-16-Codeeinheiten), die Benutzer in das Suchfeld eingeben können. Der Wert muss eine ganze Zahl größer oder gleich 0 sein. Wenn maxlength nicht angegeben ist oder einen ungültigen Wert hat, gibt es für das Suchfeld keine maximale Länge. Dieser Wert muss außerdem größer oder gleich dem Wert von minlength sein.

Die Eingabe besteht die Constraint-Validierung nicht, wenn der in das Feld eingegebene Text länger als maxlength UTF-16-Codeeinheiten ist. Die Constraint-Validierung wird nur angewendet, wenn Benutzer den Wert ändern.

minlength

Die minimale Länge der Zeichenfolge (gemessen in UTF-16-Codeeinheiten), die Benutzer in das Suchfeld eingeben können. Der Wert muss eine nicht negative ganze Zahl sein, die kleiner oder gleich dem durch maxlength angegebenen Wert ist. Wenn minlength nicht angegeben ist oder einen ungültigen Wert hat, gibt es für das Suchfeld keine minimale Länge.

Das Suchfeld besteht die Constraint-Validierung nicht, wenn der in das Feld eingegebene Text kürzer als minlength UTF-16-Codeeinheiten ist. Die Constraint-Validierung wird nur angewendet, wenn Benutzer den Wert ändern.

pattern

Das Attribut pattern ist, sofern angegeben, ein regulärer Ausdruck, mit dem der value des Eingabefelds übereinstimmen muss, damit der Wert die Constraint-Validierung besteht. Es muss sich um einen gültigen regulären JavaScript-Ausdruck handeln, wie er vom Typ RegExp verwendet und in unserem Leitfaden zu regulären Ausdrücken beschrieben wird. Beim Kompilieren des regulären Ausdrucks wird das Flag 'u' gesetzt, damit das Muster als Folge von Unicode-Codepunkten statt als ASCII behandelt wird. Der Mustertext darf nicht in Schrägstriche eingeschlossen werden.

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

Einzelheiten und ein Beispiel finden Sie im Abschnitt Ein Muster festlegen.

placeholder

Das Attribut placeholder ist eine Zeichenfolge, die Benutzern einen kurzen Hinweis darauf gibt, welche Art von Informationen im Feld erwartet wird. Es sollte sich um ein Wort oder eine kurze Wortgruppe handeln, die den erwarteten Datentyp veranschaulicht, nicht um eine ausführliche Erklärung. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt des Steuerelements eine Schreibrichtung (LTR oder RTL) hat, der Platzhalter aber in der entgegengesetzten Richtung angezeigt werden soll, können Sie Unicode-Formatierungszeichen für den bidirektionalen Algorithmus verwenden, um die Schreibrichtung innerhalb des Platzhalters zu überschreiben. Weitere Informationen finden Sie unter Unicode-Steuerzeichen für bidirektionalen Text verwenden.

readonly

Ein boolesches Attribut, das, wenn es vorhanden ist, festlegt, dass Benutzer das Feld nicht bearbeiten können. Sein value kann jedoch weiterhin durch JavaScript-Code geändert werden, der die Eigenschaft value von HTMLInputElement direkt setzt.

size

Das Attribut size ist ein numerischer Wert, der angibt, wie viele Zeichen breit das Eingabefeld sein soll. Der Wert muss eine Zahl größer als null sein; der Standardwert ist 20. Da Zeichen unterschiedlich breit sind, ist die Angabe möglicherweise nicht exakt und sollte nicht als genaue Breite vorausgesetzt werden. Je nach Zeichen und Schriftart (den verwendeten font-Einstellungen) kann das resultierende Eingabefeld schmaler oder breiter als die angegebene Anzahl von Zeichen sein.

Dies begrenzt nicht, wie viele Zeichen Benutzer in das Feld eingeben können. Es gibt lediglich ungefähr an, wie viele Zeichen gleichzeitig sichtbar sind. Um die Länge der Eingabedaten nach oben zu begrenzen, verwenden Sie das Attribut maxlength.

spellcheck

spellcheck ist ein globales Attribut, mit dem angegeben wird, ob die Rechtschreibprüfung für ein Element aktiviert sein soll. Es kann für alle bearbeitbaren Inhalte verwendet werden; hier betrachten wir die Besonderheiten bei der Verwendung von spellcheck für <input>-Elemente. Für spellcheck sind folgende Werte zulässig:

false

Deaktiviert die Rechtschreibprüfung für dieses Element.

true

Aktiviert die Rechtschreibprüfung für dieses Element.

"" (leere Zeichenfolge) oder kein Wert

Verwendet das Standardverhalten des Elements für die Rechtschreibprüfung. Dieses kann von der spellcheck-Einstellung eines übergeordneten Elements oder anderen Faktoren abhängen.

Die Rechtschreibprüfung kann für ein Eingabefeld aktiviert werden, wenn das Attribut readonly nicht gesetzt und das Feld nicht deaktiviert ist.

Der beim Auslesen von spellcheck zurückgegebene Wert entspricht möglicherweise nicht dem tatsächlichen Status der Rechtschreibprüfung innerhalb eines Steuerelements, wenn die Einstellungen des User Agents die Angabe überschreiben.

Nicht standardisierte Attribute

Für Suchfelder sind die folgenden nicht standardisierten Attribute verfügbar. Vermeiden Sie ihre Verwendung nach Möglichkeit.

incremental

Das boolesche Attribut incremental ist eine Erweiterung von WebKit und Blink (und wird daher unter anderem von Safari, Opera und Chrome unterstützt). Wenn es vorhanden ist, weist es den User Agent an, die Eingabe als Live-Suche zu verarbeiten. Während Benutzer den Wert des Felds bearbeiten, sendet der User Agent search-Ereignisse an das HTMLInputElement-Objekt, das das Suchfeld repräsentiert. Dadurch kann Ihr Code die Suchergebnisse während der Eingabe in Echtzeit aktualisieren.

Wenn incremental nicht angegeben ist, wird das search-Ereignis nur gesendet, wenn Benutzer ausdrücklich eine Suche starten, beispielsweise indem sie beim Bearbeiten des Felds die Taste Enter oder Return drücken.

Die Häufigkeit des search-Ereignisses ist begrenzt: Es wird nicht öfter als in einem von der Implementierung festgelegten Intervall gesendet.

results

Das Attribut results wird nur von Safari unterstützt. Es ist ein numerischer Wert, mit dem Sie die maximale Anzahl der Einträge überschreiben können, die im nativen Dropdown-Menü des <input>-Elements mit früheren Suchanfragen angezeigt werden.

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

Suchfelder verwenden

<input>-Elemente vom Typ search sind denen vom Typ text sehr ähnlich, sind aber speziell für die Eingabe von Suchbegriffen vorgesehen. Ihr Verhalten ist im Wesentlichen gleich, doch User Agents können sie standardmäßig unterschiedlich darstellen. Websites können sie natürlich auch mithilfe von Stylesheets individuell gestalten.

Einfaches Beispiel

<input type="search" id="mySearch" name="q" />

Dies wird folgendermaßen dargestellt:

q ist der gebräuchlichste name für Suchfelder, aber nicht vorgeschrieben. Wenn dieses Eingabefeld Teil eines Formulars ist und das Formular gesendet wird, wird das Name-Wert-Paar q=searchTerm an den Server übertragen.

Unterschiede zwischen den Typen search und text

Die wichtigsten Unterschiede liegen darin, wie Browser mit ihnen umgehen. Einige Browser zeigen ein Kreuzsymbol an, auf das Benutzer klicken können, um den Suchbegriff sofort zu entfernen. In Chrome wird dies auch durch Drücken der Escape-Taste ausgelöst. Der folgende Screenshot stammt aus Chrome:

Moderne Browser speichern außerdem häufig automatisch zuvor eingegebene Suchbegriffe über verschiedene Domains hinweg. Bei späteren Suchen in Suchfeldern auf der jeweiligen Domain werden diese dann als Vorschläge zur automatischen Vervollständigung angezeigt. Das hilft Benutzern, die im Laufe der Zeit häufig nach gleichen oder ähnlichen Begriffen suchen. Dieser Screenshot stammt aus Firefox:

Sehen wir uns nun einige nützliche Techniken für Suchformulare an.

Platzhalter festlegen

Mit dem Attribut placeholder können Sie in Ihrem Suchfeld einen hilfreichen Platzhalter anzeigen, der einen Hinweis zur Eingabe gibt. Sehen Sie sich das folgende Beispiel an:

<input type="search" id="mySearch" name="q" placeholder="Search the site…" />

Unten sehen Sie, wie der Platzhalter dargestellt wird:

Beschriftungen und Barrierefreiheit von Suchformularen

Ein Problem bei Suchformularen ist ihre Barrierefreiheit. Häufig wird das Suchfeld nicht beschriftet (obwohl möglicherweise ein Lupensymbol oder Ähnliches vorhanden ist), da der Zweck eines Suchformulars für sehende Benutzer durch seine Platzierung normalerweise recht offensichtlich ist (dieses Beispiel zeigt ein typisches visuelles Muster).

Für Benutzer von Screenreadern kann das jedoch verwirrend sein, da sie keinen gesprochenen Hinweis darauf erhalten, wozu das Suchfeld dient. Eine Möglichkeit, dies ohne Auswirkungen auf die visuelle Gestaltung zu vermeiden, ist die Verwendung von Landmark-Elementen.

• Umschließen Sie die gesamte Suchfunktion mit einem <search>-Element. Dadurch entsteht ein Landmark-Bereich, den assistive Technologien ankündigen und schnell ansteuern können. Wenn sich Ihr <input> bereits in einem <form> befindet, können Sie alternativ dem <form>-Element role="search" hinzufügen. Dadurch wird auch das <form> zu einer Such-Landmark. Das <search>-Element verwendet native HTML-Semantik, während role="search" breiter unterstützt wird und weniger Schreibaufwand erfordern kann, wenn bereits ein umschließendes <form> vorhanden ist.
• Wenn das nicht ausreicht, können Sie dem <input> selbst ein aria-label hinzufügen. Es sollte eine aussagekräftige Textbeschriftung enthalten, die der Screenreader vorliest. Sie dient als nicht visuelles Gegenstück zu <label>.

Sehen wir uns ein einfaches Beispiel an:

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

Unten sehen Sie, wie es dargestellt wird:

Im Vergleich zum vorherigen Beispiel gibt es keinen sichtbaren Unterschied, aber Benutzer von Screenreadern erhalten deutlich mehr Informationen.

Physische Größe des Eingabeelements

Die physische Größe des Eingabefelds lässt sich mit dem Attribut size steuern. Damit können Sie angeben, wie viele Zeichen gleichzeitig im Eingabefeld sichtbar sein sollen. In diesem Beispiel ist das Suchfeld etwa 30 Zeichen breit:

<input
  type="search"
  id="mySearch"
  name="q"
  placeholder="Search the site…"
  size="30" />

Das Ergebnis ist dieses breitere Eingabefeld:

Validierung

Für <input>-Elemente vom Typ search stehen dieselben Validierungsfunktionen wie für gewöhnliche Eingabefelder vom Typ text zur Verfügung. Bei Suchfeldern werden Sie Validierungsfunktionen im Allgemeinen seltener benötigen. In vielen Fällen sollten Benutzer nach beliebigen Begriffen suchen können. Es gibt jedoch Ausnahmen, etwa die Suche nach Daten mit einem bekannten Format.

Hinweis zur Gestaltung

Für die Gestaltung gültiger und ungültiger Formularelemente stehen die nützlichen Pseudoklassen :valid und :invalid zur Verfügung. In diesem Abschnitt verwenden wir das folgende CSS, das neben Eingabefeldern mit gültigen Werten ein Häkchen und neben solchen mit ungültigen Werten ein Kreuz anzeigt.

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

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

Für diese Technik muss außerdem nach dem Formularelement ein <span>-Element als Platzhalter für die Symbole eingefügt werden. Das ist nötig, weil einige Browser Symbole, die direkt nach bestimmten Eingabetypen platziert werden, nicht richtig anzeigen.

Eingabe als erforderlich festlegen

Mit dem Attribut required können Sie auf einfache Weise festlegen, dass vor dem Absenden des Formulars ein Wert eingegeben werden muss:

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

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

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 folgendermaßen dargestellt:

Wenn Sie versuchen, das Formular ohne Suchbegriff abzusenden, zeigt der Browser außerdem eine Meldung an. Das folgende Beispiel stammt aus Firefox:

Wenn Sie versuchen, das Formular mit anderen Arten ungültiger Eingabedaten abzusenden, werden andere Meldungen angezeigt. Sehen Sie sich dazu die folgenden Beispiele an.

Länge des Eingabewerts

Mit dem Attribut minlength können Sie die Mindestlänge des eingegebenen Werts in Zeichen festlegen. Entsprechend legen Sie mit maxlength dessen maximale Länge fest.

Das folgende Beispiel verlangt, 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>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

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 folgendermaßen dargestellt:

Wenn Sie versuchen, das Formular mit weniger als 4 Zeichen abzusenden, wird eine entsprechende Fehlermeldung angezeigt, die sich je nach Browser unterscheidet. Mehr als 8 Zeichen lässt der Browser nicht zu.

Ein Muster festlegen

Mit dem Attribut pattern können Sie einen regulären Ausdruck festlegen, dem der eingegebene Wert entsprechen muss, um als gültig zu gelten. Eine kurze Einführung finden Sie unter Validierung anhand eines regulären Ausdrucks.

Sehen wir uns ein Beispiel an: Angenommen, wir möchten ein Suchformular für Produkt-IDs bereitstellen und alle IDs bestehen aus zwei Buchstaben, gefolgt von vier Ziffern. Das folgende Beispiel setzt dies um:

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

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

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 folgendermaßen dargestellt:

Beispiele

Barrierefreies Suchformular

Dieses Beispiel zeigt ein typisches <nav>-Menü mit einem Suchformular. WAI-ARIA-Funktionen machen das Formular für Benutzer assistiver Technologien besser zugänglich.

HTML

Die Hauptnavigation besteht aus einer Liste von Links. Das Such-<form> erhält das Attribut role="search". Dadurch wird das <form> zu einer Such-Landmark, die assistiven Technologien angekündigt wird. Außerdem erhält das Element <input type="search"> ein aria-label als eindeutige Beschriftung, die Screenreader vorlesen.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <form role="search">
    <input
      type="search"
      name="q"
      placeholder="Search query"
      aria-label="Search through site content" />
    <button>Search!</button>
  </form>
</nav>

html {
  font-family: sans-serif;
  font-size: 10px;
}

nav {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 10px;
}

nav ul {
  padding: 0;
  list-style-type: none;
  flex: 2;
  display: flex;
}

nav li {
  text-align: center;
  flex: 1;
}

nav a {
  font-size: 2rem;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 1.2;
}

nav form {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
}

input {
  font-size: 1.6rem;
}

input[type="search"] {
  flex: 3;
  height: 30px;
}

button {
  flex: 1;
  height: 30px;
  padding: 0 1em;
  background: #333333;
  border: 0;
  color: white;
}

Der Kürze halber haben wir CSS und JavaScript des Beispiels ausgeblendet, da sie für das Verständnis des HTML-Codes nicht relevant sind. Sie können sie sich ansehen, indem Sie im interaktiven Beispiel unten auf die Schaltfläche „Play“ klicken.

const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
  e.preventDefault();
});

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTML-Formulare
• <input> und die zugrunde liegende Schnittstelle HTMLInputElement
• <input type="text">