<input type="search">

Das value-Attribut enthält einen Zeichenfolgenwert, der den Wert im Suchfeld repräsentiert. Sie können diesen mittels der JavaScript-Eigenschaft HTMLInputElement.value abrufen.

searchTerms = mySearch.value;

Falls keine Validierungskriterien für die Eingabe vorliegen (siehe Validierung für weitere Details), kann der Wert eine beliebige Textzeichenfolge oder eine leere Zeichenfolge ("") sein.

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.

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

Die maximale Zeichenfolgenlä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 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 Einschränkungsvalidierung nicht bestehen, wenn die Länge des in das Feld eingegebenen Textes länger ist als maxlength UTF-16 Codeeinheiten. Eine Validierung erfolgt nur, wenn der Wert vom Benutzer geändert wird.

Die minimale Zeichenfolgenlä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 in maxlength festgelegten Wert ist. Wenn kein minlength angegeben ist oder ein ungültiger Wert angegeben wird, 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. Eine Validierung erfolgt nur, wenn der Wert vom Benutzer geändert wird.

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

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

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

Das placeholder-Attribut ist eine Zeichenfolge, die dem Benutzer einen kurzen Hinweis darauf gibt, welche Art von Informationen im Feld erwartet werden. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp veranschaulicht, anstatt eine erläuternde Nachricht. Der Text darf keinen Wagenrücklauf oder Zeilenumbrüche enthalten.

Wenn der Inhalt der Steuerung eine Richtung (LTR oder RTL) hat, der placeholder jedoch in der entgegengesetzten Richtung angezeigt werden muss, können Sie Unicode-Steuerungszeichen für die bidirektionale Formatierung verwenden, um die Richtung innerhalb des placeholder zu überschreiben; siehe Wie man Unicode-Steuerelemente für bidi-Text verwendet für weitere Informationen.

Ein Boolean-Attribut, welches, wenn vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch immer noch von JavaScript-Code geändert werden, der die HTMLInputElement value-Eigenschaft direkt setzt.

Das size-Attribut ist ein numerischer Wert, der angibt, wie viele Zeichen breit das Eingabefeld sein soll. Der Wert muss eine Zahl größer als Null sein, und der Standardwert ist 20. Da sich die Breiten von Zeichen unterscheiden, kann dies ungefähr sein und sollte nicht darauf verlassen werden, genau zu sein; das resultierende Eingabefeld kann schmaler oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und den Schriftarten (font-Einstellungen, die verwendet werden).

Dies setzt keine Grenze, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur ungefähr 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 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, hier betrachten wir jedoch die spezifischen Aspekte der Verwendung von spellcheck auf <input>-Elementen. Die erlaubten Werte für spellcheck sind:

false

Deaktiviert die Rechtschreibprüfung für dieses Element.

true

Aktiviert die Rechtschreibprüfung für dieses Element.

"" (leere Zeichenfolge) oder kein Wert

Verfolgt das 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 innerhalb einer Steuerung wider, wenn die Präferenzen des User-Agent die Einstellung überschreiben.

Die folgenden nicht-standardisierten Attribute stehen für Sucheingabefelder zur Verfügung. Vermeiden Sie die Verwendung, wo möglich.

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

Falls incremental nicht angegeben ist, wird das search-Ereignis nur gesendet, wenn der Benutzer explizit eine Suche initiiert (wie durch Drücken der Enter- oder Return-Taste während der Bearbeitung des Feldes).

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

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

Der Wert muss eine nicht-negative Dezimalzahl sein. Wird er nicht bereitgestellt oder ein ungültiger Wert angegeben, wird die Standardmaximalanzahl der Einträge des Browsers verwendet.

<input>-Elemente des Typs search sind sehr ähnlich denen des Typs text, 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 wählen, sie standardmäßig anders zu gestalten (und natürlich können Websites Stylesheets verwenden, um ihnen benutzerdefinierte Stile zuzuweisen).

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

Dies wird so gerendert:

q ist der häufigste name, der Suchabfragen zugewiesen wird, obwohl es nicht verpflichtend ist. Beim Absenden wird das Daten-Namen/Wert-Paar q=searchTerm an den Server gesendet.

Die Hauptunterschiede liegen in der Art und Weise, wie Browser diese Handhaben. Der erste Punkt ist, dass einige Browser ein Kreuzsymbol anzeigen, das angeklickt werden kann, um den Suchbegriff sofort zu entfernen. In Chrome wird diese Aktion auch durch Drücken der Escape-Taste ausgelöst. Der folgende Screenshot stammt aus Chrome:

Darüber hinaus speichern moderne Browser automatisch Suchbegriffe, die zuvor domainspezifisch eingegeben wurden, was dann als Autovervollständigungsoptionen angezeigt wird, wenn in den Suchfeldern auf dieser Domain nachfolgende Suchanfragen durchgeführt werden. Dies hilft Nutzern, die dazu neigen, wiederholt nach denselben oder ähnlichen Suchbegriffen zu suchen. Dieser Screenshot stammt aus Firefox:

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

Sie können einen nützlichen Platzhalter innerhalb Ihrer Sucheingabe bereitstellen, der einen Hinweis darauf gibt, was zu tun ist, indem Sie das placeholder-Attribut verwenden. Betrachten Sie das folgende Beispiel:

<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 darunter gerendert wird:

Ein Problem mit Suchformularen ist ihre Zugänglichkeit; eine gängige Design-Praxis ist es, kein Label für das Suchfeld bereitzustellen (obwohl möglicherweise ein Lupensymbol oder ähnliches vorhanden ist), da der Zweck eines Suchformulars für sehende Benutzer aufgrund der Platzierung in der Regel ziemlich offensichtlich ist (dieses Beispiel zeigt ein typisches Muster).

Dies könnte jedoch für Benutzer von Bildschirmlesern verwirrend sein, da sie keine verbale Angabe darüber haben, was die Sucheingabe ist. Eine Möglichkeit, dies zu umgehen, die sich nicht auf Ihr visuelles Design auswirkt, ist die Verwendung von [WAI-ARIA]-Funktionen(/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics):

• Ein role-Attribut mit dem Wert search auf dem <form>-Element sorgt dafür, dass Bildschirmleser ankündigen, dass es sich um ein Suchformular handelt.
• Wenn das nicht ausreicht, können Sie ein aria-label-Attribut direkt am <input> selbst verwenden. Dies sollte ein beschreibender Text sein, der vom Bildschirmleser vorgelesen wird; es wird als nicht-visuelles Äquivalent zu <label> verwendet.

Sehen wir uns ein Beispiel an:

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

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

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

Die physische Größe des Eingabefeldes kann mittels des size-Attributs gesteuert werden. Damit können Sie die Anzahl der Zeichen angeben, die das Eingabefeld gleichzeitig anzeigen kann. In diesem Beispiel z.B. 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 diese breitere Eingabebox:

<input>-Elemente des Typs search haben dieselben Validierungsfunktionen zur Verfügung wie reguläre text-Eingaben. Es ist weniger wahrscheinlich, dass man Validierungsfunktionen allgemein für Suchfelder verwenden möchte. In vielen Fällen sollte Benutzern erlaubt sein, nach allem zu suchen, aber es gibt einige Fälle, die zu berücksichtigen sind, wie z.B. Suchen gegen Daten in einem bekannten Format.

Es gibt nützliche Pseudo-Klassen, die für das Styling von gültigen und ungültigen Formularelementen verfügbar sind: :valid und :invalid. In diesem Abschnitt verwenden wir das folgende CSS, welches ein Häkchen (Tick) 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 und als Halter für die Icons dient. Dies war notwendig, weil einige Eingabetypen in einigen Browsern Icons, die direkt nach ihnen platziert wurden, nicht sehr gut anzeigen.

Sie können das required-Attribut verwenden, um die Eingabe eines Wertes als Bedingung für die Formularübermittlung leicht festzulegen:

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

Darüber hinaus zeigt der Browser eine Nachricht an, wenn Sie versuchen, das Formular ohne eingegebenen Suchbegriff zu übermitteln. Das folgende Beispiel stammt aus Firefox:

Unterschiedliche Nachrichten werden angezeigt, wenn Sie versuchen, das Formular mit unterschiedlichen Typen von ungültigen Daten innerhalb der Eingaben zu übermitteln; siehe die untenstehenden Beispiele.

Sie können eine Mindestanzahl an Zeichen für den einzutragenden Wert mit dem Attribut minlength festlegen; ähnlich verwenden Sie maxlength, um die maximale Länge des einzutragenden Wertes festzulegen.

Das untenstehende Beispiel erfordert, dass der eingetragene Wert 4–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 so gerendert:

Wenn Sie versuchen, das Formular mit weniger als 4 Zeichen zu übermitteln, erhalten Sie eine entsprechende Fehlermeldung (die je nach Browser unterschiedlich ist). Wenn Sie versuchen, mehr als 8 Zeichen einzugeben, lässt der Browser dies nicht zu.

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

Lassen Sie uns ein Beispiel betrachten. Angenommen, wir wollten ein Suchformular für Produkt-IDs bereitstellen, und die IDs waren alle Codes aus zwei Buchstaben gefolgt von vier Zahlen. Das folgende Beispiel behandelt dies:

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

Dieses wird wie folgt gerendert:

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

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