<input type="search">

Das value Attribut enthält einen String, der den Wert darstellt, der im Suchfeld enthalten ist. Sie können diesen mit 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 ein beliebiger 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, angewendet werden, 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, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in den vorgeschlagenen Optionen enthalten. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert eingeben.

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 außerdem größer oder gleich dem Wert von minlength sein.

Die Eingabe wird die Einschränkungsvalidierung nicht bestehen, wenn die Länge des Texts, der in das Feld eingegeben wird, länger als maxlength UTF-16 Codeeinheiten ist. 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 in das Suchfeld eingeben kann. Dies muss ein nicht-negativer ganzzahliger Wert sein, der kleiner oder gleich dem von maxlength angegebenen 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 Texts, der in das Feld eingegeben wird, kürzer als minlength UTF-16 Codeeinheiten ist. 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 der Eingabe erfüllen muss, um die Einschränkungsvalidierung zu bestehen. Es muss ein gültiger JavaScript-Regulärausdruck sein, wie er vom RegExp Typ verwendet wird, und ist in unserem Leitfaden zu regulären Ausdrücken dokumentiert; das 'u' Flag wird beim Kompilieren des regulären Ausdrucks angegeben, sodass das Muster als Folge von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Es sollten keine Schrägstriche um den Text des Musters angegeben werden.

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

Siehe den Abschnitt Ein Muster angeben 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 ein kurzer Satz sein, der 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, jedoch der Platzhalter in der entgegengesetzten Richtung dargestellt werden muss, können Sie die Unicode-Bidi-Algorithmus-Formatierungszeichen verwenden, um die Richtung im Platzhalter zu überschreiben; siehe Anleitung zur Verwendung von Unicode-Steuerzeichen für bidi-Text für weitere Informationen.

Ein boolesches Attribut, das, falls vorhanden, bedeutet, dass dieses Feld nicht vom Benutzer bearbeitet werden kann. Sein value kann jedoch immer noch durch direktes Setzen der HTMLInputElement value Eigenschaft über JavaScript 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 nicht exakt sein und sollte nicht darauf verlassen werden, dass es so ist; das resultierende Eingabefeld kann schmaler oder breiter sein als die angegebene Anzahl von Zeichen, abhängig von den Zeichen und der Schriftart (font Einstellungen, die in Verwendung sind).

Dies setzt keine Begrenzung für die Anzahl der Zeichen, die der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele Zeichen ungefähr 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 anzuzeigen, ob die Rechtschreibprüfung für ein Element aktiviert werden soll. Es kann bei jedem bearbeitbaren Inhalt verwendet werden, hier betrachten wir jedoch spezifische Dinge in Bezug auf die Verwendung von spellcheck bei <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 bei der Rechtschreibprüfung. Dies kann auf den spellcheck Einstellungen des ü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 Einstellungen des User Agents die Einstellung überschreiben.

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

Das boolesche Attribut incremental ist eine WebKit- und Blink-Erweiterung (daher unterstützt von Safari, Opera, Chrome usw.), die, falls vorhanden, dem User Agent angibt, 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 die Suchbox darstellt. 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 explizit initiiert (z. B. durch Drücken der Enter oder Return Taste während der Bearbeitung des Feldes).

Das search Ereignis ist in der Frequenz begrenzt, sodass es nicht öfter 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 früherer Suchanfragen angezeigt werden.

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

<input> Elemente des Typs search sind denen des Typs text sehr ähnlich, außer dass sie speziell für die Handhabung von Suchbegriffen vorgesehen sind. Im Verhalten sind sie im Wesentlichen gleichwertig, aber User Agents können sich dafür entscheiden, sie standardmäßig unterschiedlich 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 dargestellt:

q ist der am häufigsten gegebene name für Sucheingaben, obwohl es nicht zwingend erforderlich ist. Wenn übermittelt, wird das Daten Name/Wert-Paar, das an den Server gesendet wird, q=searchTerm sein.

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, falls gewünscht. In Chrome wird diese Aktion auch ausgelöst, wenn die Escape-Taste gedrückt wird. Das folgende Screenshot stammt aus Chrome:

Darüber hinaus neigen moderne Browser dazu, automatisch früher eingegebene Suchbegriffe domainspezifisch zu speichern, die dann als Autovervollständigungsoptionen erscheinen, wenn nachfolgende Suchanfragen in Sucheingaben auf dieser Domain durchgeführt werden. Dies hilft Benutzern, die dazu neigen, über einen längeren Zeitraum nach denselben oder ähnlichen Suchanfragen zu suchen. Dieses Screenshot ist aus Firefox:

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

Sie können einen nützlichen Platzhalter innerhalb Ihrer Sucheingabe bereitstellen, die einen Hinweis bieten 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 sehen, wie der Platzhalter unten dargestellt wird:

Ein Problem mit Suchformularen ist deren Barrierefreiheit; ein häufiges Designmerkmal ist es, kein Label für das Suchfeld bereitzustellen (obwohl es möglicherweise ein Lupen-Symbol oder ähnliches gibt), da der Zweck eines Suchformulars für sehende Benutzer normalerweise aufgrund der Platzierung ziemlich offensichtlich ist (dieses Beispiel zeigt ein typisches Muster).

Dies könnte jedoch bei Benutzern von Bildschirmlesern zu Verwirrung führen, da sie keine verbale Indikation erhalten, was die Suchanfrage ist. Eine Möglichkeit, dies zu umgehen, die sich nicht auf Ihr visuelles Design auswirkt, besteht darin, WAI-ARIA Funktionen zu verwenden:

• Ein role Attribut mit dem Wert search auf dem <form> Element sorgt dafür, dass Bildschirmleser ankündigen, dass das Formular ein Suchformular ist.
• Wenn das nicht ausreicht, können Sie ein aria-label Attribut direkt auf dem <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 dargestellt wird:

Es gibt keinen visuellen Unterschied zum vorherigen Beispiel, aber Bildschirmleser-Benutzern stehen weitaus mehr Informationen zur Verfügung.

Die physische Größe der Eingabebox kann mit dem size Attribut gesteuert werden. Damit können Sie die Anzahl der Zeichen angeben, die die Eingabebox gleichzeitig anzeigen kann. In diesem Beispiel ist die Suchbox 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 breitere Eingabebox:

<input> Elemente des Typs search haben dieselben Validierungsfunktionen verfügbar wie reguläre text Eingaben. Es ist weniger wahrscheinlich, dass Sie Validierungsfunktionen im Allgemeinen für Suchboxen verwenden möchten. In vielen Fällen sollte Benutzern einfach erlaubt werden, nach allem zu suchen, aber es gibt einige Fälle zu betrachten, wie beispielsweise Suchanfragen gegen Daten in einem bekannten Format.

Es gibt nützliche Pseudoklassen für die Gestaltung gültiger/ungültiger Formularelemente: :valid und :invalid. In diesem Abschnitt verwenden wir das folgende CSS, das ein Häkchen neben Eingaben mit gültigen Werten und ein Kreuz neben Eingaben mit ungültigen Werten platzieren wird.

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 notwendig, weil einige Eingabetypen in einigen Browsern Symbole, die direkt nach ihnen platziert werden, nicht sehr gut anzeigen.

Sie können das required Attribut verwenden, um einfach die Eingabe eines Werts zu erzwingen, bevor das Formular übermittelt werden darf:

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

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

Unterschiedliche Nachrichten werden angezeigt, wenn Sie versuchen, das Formular mit verschiedenen Typen ungültiger Daten, die in den Eingaben enthalten sind, zu übermitteln; sehen Sie sich die folgenden Beispiele an.

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

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

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

Wenn Sie versuchen, das Formular mit weniger als 4 Zeichen zu übermitteln, erhalten Sie eine entsprechende Fehlermeldung (die zwischen den Browsern unterschiedlich ist). Wenn Sie versuchen, über 8 Zeichen hinauszugehen, lässt der Browser dies nicht zu.

Sie können das pattern Attribut verwenden, um einen regulären Ausdruck anzugeben, den der eingegebene Wert erfüllen muss, um als gültig betrachtet zu werden (siehe Validierung gegen einen regulären Ausdruck für einen kurzen Crashkurs).

Lassen Sie uns ein Beispiel ansehen. 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;
}

Dies wird so dargestellt:

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

• HTML-Formulare
• <input> und die darauf basierende HTMLInputElement Schnittstelle
• <input type="text">
• Kompatibilität von CSS-Eigenschaften