<input type="search">

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

searchTerms = mySearch.value;

Wenn keine Validierungsbeschränkungen für die Eingabe vorhanden sind (siehe Validierung für weitere Details), kann der Wert jeder beliebige Textstring 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 <datalist>-Elements, das sich im selben Dokument befindet. Die <datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die mit dem type nicht kompatibel sind, werden nicht in den vorgeschlagenen Optionen aufgenommen. Die angegebenen 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 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änkungsvalidierung fehl, wenn die Länge des in das Feld eingegebenen Texts länger ist als maxlength UTF-16-Codeeinheiten. Eine 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 in das Suchfeld eingeben kann. Dieser Wert muss eine nicht negative Ganzzahl sein, die kleiner oder gleich dem durch maxlength angegebenen Wert ist. Wenn kein minlength angegeben oder ein ungültiger Wert angegeben wird, hat die Sucheingabe keine Mindestlänge.

Das Suchfeld schlägt bei der Einschränkungsvalidierung fehl, wenn die Länge des in das Feld eingegebenen Texts kürzer ist als minlength UTF-16-Codeeinheiten. Eine 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 der Eingabe erfüllen muss, damit der Wert die Einschränkungsvalidierung besteht. Es muss ein gültiger regulärer JavaScript-Ausdruck sein, wie er vom RegExp-Typ verwendet wird und 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 und nicht als ASCII behandelt wird. Vorwärtsschrägstriche sollten nicht um den Mustertext herum angegeben werden.

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

Siehe den Abschnitt Angabe 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 wird. Es sollte ein Wort oder eine kurze Phrase sein, die den erwarteten Datentyp darstellt, anstatt eine erklärende Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenumbrüche enthalten.

Wenn der Inhalt der Steuerung eine Ausrichtung (LTR oder RTL) hat, der placeholder jedoch in der entgegengesetzten Ausrichtung angezeigt werden muss, können Sie Zeichen zur Formatierung des Unicode-Textflussalgorithmus verwenden, um die Ausrichtung innerhalb des placeholder zu überschreiben; siehe Anleitung zur Verwendung von Unicode-Steuerzeichen für bidi-Text für weitere Informationen.

Ein Boolean-Attribut, das, wenn vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch immer noch durch direktes Setzen der HTMLInputElement value-Eigenschaft durch JavaScript-Code 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 Zeichenbreiten variieren, kann dies möglicherweise, muss aber nicht genau sein; das resultierende Eingabefeld kann je nach Zeichen und Schrift (font-Einstellungen in Verwendung) schmaler oder breiter sein als die angegebene Zeichenzahl.

Dies setzt kein Limit für die Anzahl der Zeichen, die der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele etwa auf einmal zu sehen sind. 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 anzuzeigen, ob die Rechtschreibprüfung für ein Element aktiviert werden soll. Es kann auf jedem bearbeitbaren Inhalt verwendet werden, hier betrachten wir jedoch die Besonderheiten im Zusammenhang mit der 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

Folgt dem Standardverhalten des Elements für die Rechtschreibprüfung. Dies kann auf den spellcheck-Einstellungen eines übergeordneten Elements oder anderen Faktoren basieren.

Ein Eingabefeld kann die Rechtschreibprüfung aktiviert haben, wenn nicht das readonly-Attribut festgelegt ist und es nicht deaktiviert ist.

Der Wert, der durch Ablesen von spellcheck zurückgegeben wird, spiegelt möglicherweise nicht den tatsächlichen Status der Rechtschreibprüfung innerhalb einer Steuerung wider, wenn die Einstellungen des User-Agent diese Einstellung überschreiben.

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

Das Boolean-Attribut incremental ist eine WebKit- und Blink-Erweiterung (daher unterstützt von Safari, Opera, Chrome usw.), die, wenn vorhanden, den User-Agent anweist, die Eingabe als Live-Suche zu verarbeiten. Während der Benutzer den Wert des Felds bearbeitet, sendet der User-Agent search-Ereignisse an das HTMLInputElement-Objekt, das das Suchfeld darstellt. 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 eine Suche explizit initiiert (etwa durch Drücken der Enter- oder Return-Taste beim Bearbeiten des Feldes).

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

Das results-Attribut—nur von Safari unterstützt—ist ein numerischer Wert, der Ihnen erlaubt, die maximale Anzahl von Einträgen zu überschreiben, die im nativ bereitgestellten Dropdown-Menü des <input>-Elements von vorherigen Suchanfragen angezeigt werden.

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

<input>-Elemente des Typs search sind sehr ähnlich wie solche des Typs text, mit dem Unterschied, dass sie speziell dafür vorgesehen sind, Suchbegriffe zu verarbeiten. Sie sind im Verhalten im Wesentlichen gleichwertig, aber die User-Agents können sich entscheiden, sie standardmäßig anders zu stylen (und natürlich können Websites Stylesheets verwenden, um benutzerdefinierte Stile auf sie anzuwenden).

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

So wird es gerendert:

q ist der am häufigsten vergebene name bei Sucheingaben, obwohl es nicht verpflichtend ist. Bei der Übertragung werden Name/Wert-Paare an den Server gesendet: q=searchTerm.

Die grundlegenden Unterschiede 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 sofort zu entfernen. In Chrome wird diese Aktion auch ausgelöst, wenn Escape gedrückt wird. Der folgende Screenshot stammt aus Chrome:

Darüber hinaus speichern moderne Browser tendenziell auch automatisch vorher eingegebene Suchbegriffe domänenübergreifend, die dann als Auto-Complete-Optionen erscheinen, wenn nachfolgende Suchen in Sucheingaben auf dieser Domäne durchgeführt werden. Dies hilft Benutzern, die dazu neigen, immer wieder nach denselben oder ähnlichen Suchanfragen zu überlegen. Dieser Screenshot stammt aus Firefox:

An dieser Stelle wollen wir einige nützliche Techniken betrachten, die Sie auf Ihre Suchformulare anwenden können.

Sie können einen nützlichen Platzhalter in Ihrer Suchfeld-Eingabe bereitstellen, der einen Hinweis darauf geben könnte, was zu tun ist, durch das placeholder-Attribut. 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>

Wie der Platzhalter gerendert wird, sehen Sie unten:

Ein Problem mit Suchformularen ist ihre Zugänglichkeit; eine gängige Designpraxis 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 bei Screenreader-Benutzern Verwirrung stiften, da sie keine verbale Angabe dafür haben, was die Suchfeld-Eingabe ist. Ein Weg darum herum, 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 sorgt dafür, dass Screenreader ankündigen, dass das Formular ein Suchformular ist.
• Wenn das nicht ausreicht, können Sie ein aria-label-Attribut auf dem <input> selbst verwenden. Dies sollte ein beschreibender Text sein, der vom Screenreader 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>

Wie dies gerendert wird, sehen Sie unten:

Es gibt keinen visuellen Unterschied zum vorherigen Beispiel, aber Screenreader-Benutzer haben weitaus mehr Informationen zur Verfügung.

Die physische Größe der Eingabebox 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 diese größere Eingabebox:

<input>-Elemente des Typs search haben die gleichen Validierungsfunktionen, die ihnen zur Verfügung stehen wie normale text Eingaben. Es ist weniger wahrscheinlich, dass Sie Validierungsfunktionen im Allgemeinen für Suchfelder verwenden möchten. In vielen Fällen sollten Benutzer in der Lage sein, nach allem zu suchen, aber es gibt einige Fälle zu beachten, wie beispielsweise Suchen gegen Daten mit einem bekannten Format.

Es gibt nützliche Pseudoklassen zum Styling gültiger/ungültiger Formularelemente: :valid und :invalid. In diesem Abschnitt verwenden wir das folgende CSS, das ein Häkchen (Tick) neben Eingaben platziert, 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 ein <span>-Element, das nach dem Formularelement platziert wird, um als Halter für die Symbole zu dienen. Dies war notwendig, weil einige Eingabetypen in einigen Browsern keine Symbole gut anzeigen, die direkt nach ihnen platziert werden.

Sie können das required-Attribut verwenden, um auf einfache Weise sicherzustellen, dass vor der Formularübermittlung 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;
}

So wird es gerendert:

Zusätzlich wird, wenn Sie versuchen, das Formular ohne eingegebenen Suchbegriff zu übermitteln, der Browser eine Nachricht anzeigen. Das folgende Beispiel stammt aus Firefox:

Unterschiedliche Nachrichten werden angezeigt, wenn versucht wird, das Formular mit unterschiedlichen Arten von ungültigen Daten in den Eingaben zu übermitteln; siehe die folgenden Beispiele.

Sie können eine Mindestlänge in Zeichen für den eingegebenen Wert mit dem minlength-Attribut angeben; ebenso verwenden Sie maxlength, um die maximale Länge des eingegebenen Werts 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;
}

So wird es 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 entsprechen muss, um als gültig zu gelten (siehe Validieren gegen einen regulären Ausdruck für einen Crashkurs).

Schauen wir uns ein Beispiel an. Angenommen, wir wollten ein Produkt-ID-Suchformular 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;
}

So wird es gerendert:

Ein gutes Beispiel für ein verwendetes Suchformular finden Sie in unserem Beispiel website-aria-roles (live ansehen).

• HTML-Formulare
• <input> und die HTMLInputElement Schnittstelle, auf der es basiert
• <input type="text">
• Kompatibilität von CSS-Eigenschaften