<input type="search">

Das value Attribut enthält einen String, der den im Suchfeld enthaltenen Wert repräsentiert. Sie können dies mithilfe der HTMLInputElement.value Eigenschaft in JavaScript abrufen.

searchTerms = mySearch.value;

Wenn keine Validierungseinschränkungen für die Eingabe vorhanden sind (siehe Validierung für weitere Details), kann der Wert beliebiger Text oder ein leerer String ("") 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 im selben Dokument befindlichen <datalist> Elements. Das <datalist> bietet eine Liste mit vordefinierten Werten, die dem Benutzer als Vorschläge für diese Eingabe angeboten werden. Alle Werte in der Liste, die mit dem type nicht kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert eingeben.

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 angegeben wird, hat das Suchfeld keine maximale Länge. Dieser Wert muss auch größer oder gleich dem Wert von minlength sein.

Die Eingabe schlägt bei der Einschränkungs-Validierung fehl, wenn die Länge des in das Feld eingegebenen Textes größer als maxlength UTF-16 Codeeinheiten ist. Die Einschränkungs-Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

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

Das Suchfeld schlägt bei der Einschränkungs-Validierung fehl, wenn die Länge des in das Feld eingegebenen Textes weniger als minlength UTF-16 Codeeinheiten beträgt. Die Einschränkungs-Validierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

Das pattern Attribut, falls angegeben, ist ein regulärer Ausdruck, den der value der Eingabe (siehe value) erfüllen muss, damit der Wert die Einschränkungs-Validierung besteht. Es muss ein gültiger JavaScript-Regulärer Ausdruck sein, wie er vom RegExp Typ verwendet wird, und wie in unserem Leitfaden für reguläre Ausdrücke dokumentiert; das 'u'-Flag wird beim Kompilieren des regulären Ausdrucks angegeben, sodass das Muster als eine Folge von Unicode-Codepunkten und nicht als ASCII behandelt wird. 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 wird vollständig ignoriert.

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

Das placeholder Attribut ist ein String, der 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 zeigt, anstatt einer erklärenden Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenvorschubrücke enthalten.

Wenn der Inhalt der Kontrolle eine bestimmte Richtung (LTR oder RTL) hat, aber der Platzhalter in der entgegengesetzten Richtung angezeigt werden muss, können Sie Unicode-Formatierungszeichen für die bidirektionale Algorithmusformatierung verwenden, um die Richtung im Platzhalter zu überschreiben; siehe Anleitung zur Verwendung von Unicode-Steuerelementen für bidi-Text für weitere Informationen.

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

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 die Zeichenbreiten variieren, kann dies mehr oder weniger genau sein und sollte nicht darauf verlassen werden, dass es so ist; die resultierende Eingabe kann je nach den Zeichen und der Schriftart breiter oder schmaler als die angegebene Anzahl von Zeichen sein (font Einstellungen in Verwendung).

Dies setzt keine Begrenzung dafür, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele ungefähr gleichzeitig sichtbar sein können. Um ein Obergrenze für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength Attribut.

spellcheck ist ein globales Attribut, das angibt, ob die Rechtschreibprüfung für ein Element aktiviert werden soll. Es kann auf jedem bearbeitbaren Inhalt verwendet werden, aber hier betrachten wir die spezifische 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

Befolgen Sie das Standardverhalten des Elements für die Rechtschreibprüfung. Dies kann auf den spellcheck-Einstellungen der Eltern 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 Lesen von spellcheck zurückgegeben wird, spiegelt möglicherweise nicht den tatsächlichen Zustand der Rechtschreibprüfung innerhalb einer Kontrolle wider, wenn die Einstellungen des user agents die Einstellung außer Kraft setzen.

Die folgenden nicht-standardisierten Attribute sind für Suchfeldeingaben verfügbar. Vermeiden Sie ihre Verwendung, wo möglich.

Das Boolean-Attribut incremental ist eine Erweiterung von WebKit und Blink (also von Safari, Opera, Chrome usw. unterstützt). Wenn es vorhanden ist, teilt es dem user agent mit, dass die Eingaben als Live-Suche verarbeitet werden sollen. Während der Benutzer den Wert des Feldes bearbeitet, sendet der user agent search Ereignisse an das HTMLInputElement Objekt, das das Suchfeld repräsentiert. Dadurch kann Ihr Code die Suchergebnisse in Echtzeit aktualisieren, während der Benutzer die Suche bearbeitet.

Wenn incremental nicht angegeben ist, wird das search Ereignis nur gesendet, wenn der Benutzer eine Suche ausdrücklich initiiert (zum Beispiel durch Drücken der Enter oder Return Taste beim Bearbeiten des Feldes).

Das search Ereignis ist so rate-limitiert, dass 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 an Einträgen zu überschreiben, die im nativ bereitgestellten Dropdown-Menü des <input> Elements mit früheren Suchanfragen angezeigt werden sollen.

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

<input> Elemente vom Typ search sind den Elementen vom Typ text sehr ähnlich, außer dass sie speziell für die Bearbeitung von Suchbegriffen gedacht sind. Ihr Verhalten ist grundsätzlich gleich, aber Benutzeragenten können sich dafür entscheiden, sie standardmäßig anders zu gestalten (und natürlich können Webseiten mit CSS eigene Stile darauf anwenden).

<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 es nicht obligatorisch ist. Wenn das Formular übermittelt wird, wird das Daten-Namens/Wert-Paar zum Server mit q=searchTerm gesendet.

Die wichtigsten grundlegenden Unterschiede liegen in der Art und Weise, wie Browser sie behandeln. Das erste, was zu beachten ist, ist, dass einige Browser ein Kreuzsymbol anzeigen, das angeklickt werden kann, um den Suchbegriff sofort zu entfernen, falls gewünscht. In Chrome wird diese Aktion auch ausgelöst, wenn Escape gedrückt wird. Das folgende Screenshot stammt aus Chrome:

Darüber hinaus speichern moderne Browser in der Regel automatisch Suchbegriffe, die zuvor domänenübergreifend eingegeben wurden und die dann bei nachfolgenden Suchvorgängen in Sucheingaben auf dieser Domäne als Autovervollständigungsoptionen erscheinen. Dies hilft Benutzern, die dazu neigen, im Laufe der Zeit ähnliche Suchanfragen durchzuführen. Dieses Screenshot ist von Firefox:

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

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

Ein Problem bei Suchformularen ist ihre Zugänglichkeit; eine gängige Designpraxis ist es, dem Suchfeld kein Etikett zu geben (obwohl möglicherweise ein Lupen-Symbol oder ähnliches vorhanden ist), 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 Verwirrung für Benutzer von Bildschirmlesegeräten verursachen, da sie keine verbale Angabe darüber haben, was die Suchfunktion ist. Eine Möglichkeit, dies zu umgehen, ohne Ihr visuelles Design zu beeinträchtigen, besteht darin, WAI-ARIA Funktionen zu verwenden:

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

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 unten sehen, wie dies gerendert wird:

Es gibt keinen visuellen Unterschied zum vorherigen Beispiel, aber Benutzer von Bildschirmlesegeräten haben wesentlich mehr Informationen zur Verfügung.

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

<input> Elemente vom Typ search haben die gleichen Validierungsfunktionen wie normale text Eingaben. Es ist weniger wahrscheinlich, dass Sie in Suchfeldern allgemein Validierungsfunktionen verwenden möchten. In vielen Fällen sollten Benutzer einfach alles suchen dürfen, aber es gibt einige Fälle zu berücksichtigen, wie Suchvorgänge gegen Daten in einem bekannten Format.

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 neben Eingaben enthält, die gültige Werte enthalten, und ein Kreuz neben Eingaben, die ungültige Werte enthalten.

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

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

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

Sie können das required Attribut verwenden, um auf einfache Weise sicherzustellen, 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>

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 rendert wie folgt:

Außerdem zeigt der Browser eine Meldung an, wenn Sie versuchen, das Formular ohne Eingabe eines Suchbegriffs abzusenden. Das folgende Beispiel ist aus Firefox:

Verschiedene Nachrichten werden angezeigt, wenn Sie versuchen, das Formular mit verschiedenen Arten von ungültigen Daten in den Eingaben abzusenden; siehe die Beispiele unten.

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

Das folgende Beispiel erfordert, dass der eingegebene 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 rendert wie folgt:

Wenn Sie versuchen, das Formular mit weniger als 4 Zeichen einzureichen, erhalten Sie eine entsprechende Fehlermeldung (die zwischen den Browsern 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 angesehen zu werden (siehe Validierung gegen einen regulären Ausdruck für einen Schnellkurs).

Schauen wir uns ein Beispiel an. 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 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 rendert wie folgt:

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

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