<input type="search">

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

searchTerms = mySearch.value;

Wenn keine Validierungsbeschränkungen für die Eingabe bestehen (siehe Validierung für weitere Details), kann der Wert eine beliebige Zeichenfolge oder eine leere Zeichenfolge ("") sein.

Zusätzlich zu den globalen Attributen und den Attributen, die für alle <input>-Elemente ungeachtet ihres Typs gelten, 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 zur Auswahl für diese Eingabe. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht zu den vorgeschlagenen Optionen hinzugefügt. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

Die maximale Zeichenlänge (gemessen in UTF-16 Codeeinheiten), die der Benutzer ins 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 ist, 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 größer ist als maxlength UTF-16 Codeeinheiten. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

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

Das Suchfeld wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des Textes im Feld weniger als minlength UTF-16 Codeeinheiten beträgt. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

Das pattern-Attribut, wenn angegeben, ist ein regulärer Ausdruck, den der value des Eingabefelds erfüllen muss, um die Einschränkungsvalidierung zu bestehen. 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 bei der Kompilierung des regulären Ausdrucks angegeben, sodass das Muster als eine Sequenz von Unicode-Codepunkten behandelt wird, anstelle von ASCII. Keine Schrägstriche sollten um den Mustertext angegeben werden.

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

Sehen Sie im 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 demonstriert, anstatt eine erklärende Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt des Steuerelements eine Richtung (LTR oder RTL) hat, aber der Platzhalter in der entgegengesetzten Richtung präsentiert werden muss, können Sie die Unicode-Bidi-Algorithmus-Formatierungszeichen verwenden, um die Richtung im Platzhalter zu überschreiben; sehen Sie Wie man Unicode-Steuerungszeichen für bidirektionalen Text verwendet für mehr Informationen.

Ein boolesches 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 geändert werden, indem die HTMLInputElement value-Eigenschaft gesetzt wird.

Das size-Attribut ist ein numerischer Wert und gibt an, 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 Zeichenbreiten unterscheiden, kann dies mehr oder weniger genau sein und sollte nicht darauf vertraut werden, dass es exakt ist; die resultierende Eingabe kann je nach Zeichen und Schriftart (font-Einstellungen in Gebrauch) schmaler oder breiter sein als die angegebene Anzahl Zeichen.

Dies setzt keine Begrenzung für die Anzahl Zeichen, die der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele zu einem Zeitpunkt angezeigt werden 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 für jeden bearbeitbaren Inhalt verwendet werden, aber hier betrachten wir Spezifika bezüglich der Verwendung von spellcheck auf <input>-Elementen. Die erlaubten Werte für spellcheck sind:

false

Deaktivieren Sie die Rechtschreibprüfung für dieses Element.

true

Aktivieren Sie die Rechtschreibprüfung für dieses Element.

"" (leere Zeichenfolge) oder ohne Wert

Folgen Sie 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 durch das Lesen von spellcheck zurückgegebene Wert 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.

Die folgenden nicht standardmäßigen Attribute sind für Sucheingabefelder verfügbar. Vermeiden Sie, diese nach Möglichkeit zu verwenden.

Das boolesche Attribut incremental ist eine WebKit- und Blink-Erweiterung (daher unterstützt von Safari, Opera, Chrome usw.), die, wenn 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, das das Suchfeld repräsentiert. Dies ermöglicht 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 die Suche ausdrücklich initiiert (zum Beispiel durch Drücken der Enter- oder Return-Taste während der Bearbeitung des Feldes).

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

Das results-Attribut – nur von Safari unterstützt – ist ein numerischer Wert, der es Ihnen erlaubt, die maximale Anzahl Einträge zu überschreiben, die im nativ bereitgestellten Drop-Down-Menü des <input>-Elements früherer 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 Standardanzahl maximaler Einträge des Browsers verwendet.

<input>-Elemente vom Typ search sind sehr ähnlich wie solche vom Typ text, außer dass sie speziell dafür gedacht sind, Suchbegriffe zu verarbeiten. Sie sind im Verhalten im Wesentlichen gleich, aber User Agents können sich entscheiden, sie standardmäßig anders zu gestalten (und natürlich können Websites Stylesheets verwenden, um ihnen benutzerdefinierte Stile zu verleihen).

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

Dies wird wie folgt gerendert:

q ist der gebräuchlichste name, der für Sucheingaben verwendet wird, obwohl dies nicht zwingend ist. Wenn die Daten übermittelt werden, wird das Name/Wert-Paar, das an den Server gesendet wird, q=searchTerm sein.

Der Hauptunterschied liegt in der Art und Weise, wie Browser sie handhaben. Das Erste, das zu beachten ist, ist, dass einige Browser ein Kreuzsymbol anzeigen, das angeklickt werden kann, um den Suchbegriff sofort zu entfernen. In Chrome wird diese Aktion auch ausgelöst, wenn die Escape-Taste gedrückt wird. Der folgende Screenshot stammt aus Chrome:

Darüber hinaus speichern moderne Browser tendenziell auch automatisch zuvor eingegebene Suchbegriffe domänenübergreifend, die dann als Autovervollständigungsvorschläge erscheinen, wenn nachfolgende Suchen in Sucheingabefeldern auf dieser Domäne durchgeführt werden. Dies hilft Benutzern, die im Laufe der Zeit zu denselben oder ähnlichen Suchanfragen neigen. Dieser Screenshot stammt aus Firefox:

Zu diesem Zeitpunkt wollen wir einige nützliche Techniken betrachten, die Sie auf Ihre Suchformulare anwenden können.

Sie können einen hilfreichen Platzhalter in Ihrer Sucheingabe bereitstellen, der einen Hinweis darauf geben könnte, was zu tun ist, indem Sie das placeholder-Attribut verwenden. Betrachten Sie folgendes 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 unten gerendert wird:

Ein Problem mit Suchformularen ist ihre Barrierefreiheit; eine gängige Designpraxis besteht darin, kein Label für das Suchfeld bereitzustellen (obwohl es ein Lupensymbol oder Ähnliches geben könnte), 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 Screenreadern Verwirrung stiften, da sie keine verbale Angabe darüber erhalten, was die Such-Eingabe ist. Ein Weg hierfür, der Ihr visuelles Design nicht beeinträchtigt, ist die Verwendung von WAI-ARIA-Funktionen:

• Ein role-Attribut mit dem Wert search auf dem <form>-Element führt dazu, dass Screenreader ankündigen, dass das Formular ein Suchformular ist.
• Wenn das nicht ausreicht, können Sie ein aria-label-Attribut auf der <input> selbst verwenden. Dies sollte ein beschreibender Text sein, der vom Screenreader vorgelesen wird; es wird als nicht-visuelles Äquivalent zu <label> verwendet.

Schauen 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 Benutzer von Screenreadern haben weitaus mehr Informationen zur Verfügung.

Die physische Größe des Eingabefeldes kann mit dem size-Attribut gesteuert werden. Damit können Sie angeben, wie viele Zeichen das Eingabefeld gleichzeitig 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:

<input>-Elemente vom Typ search haben dieselben Validierungsfunktionen wie reguläre text-Eingaben. Es ist weniger wahrscheinlich, dass Sie im Allgemeinen Validierungsfunktionen für Suchfelder verwenden möchten. In vielen Fällen sollten Benutzer einfach nach allem suchen dürfen, aber es gibt einige Fälle zu beachten, wie zum Beispiel Suchen nach Daten in einem bekannten Format.

Es gibt nützliche Pseudo-Klassen zum Styling von gültigen/ungültigen Formularelementen: :valid und :invalid. In diesem Abschnitt verwenden wir das folgende CSS, welches ein Häkchen (Haken) neben Eingabefeldern mit gültigen Werten platziert und ein Kreuz neben Eingabefeldern mit ungültigen Werten.

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

Sie können das required-Attribut als eine einfache Möglichkeit verwenden, um das Eingeben eines Wertes erforderlich zu machen, bevor das Formular gesendet werden kann:

<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, wenn Sie versuchen, das Formular ohne eingegebenen Suchbegriff abzusenden, zeigt der Browser eine Nachricht an. Das folgende Beispiel stammt aus Firefox:

Unterschiedliche Nachrichten werden angezeigt, wenn Sie versuchen, das Formular mit unterschiedlichen Arten ungültiger Daten in den Eingabefeldern abzusenden. Siehe die untenstehenden Beispiele.

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

Das Beispiel unten erfordert, dass der eingegebene Wert eine Länge von 4–8 Zeichen hat.

<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 abzusenden, erhalten Sie eine entsprechende Fehlermeldung (die sich zwischen Browsern unterscheiden kann). Wenn Sie versuchen, mehr als 8 Zeichen Länge zu erreichen, lässt der Browser dies nicht zu.

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

Sehen wir uns ein Beispiel an. Angenommen, wir wollten ein Produktsuchformular 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;
}

Dieses rendert wie folgt:

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

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