<input type="search"> HTML-Attributwert

Probieren Sie es aus

<label for="site-search">Search the site:</label>
<input type="search" id="site-search" name="q" />

<button>Search</button>

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Wert

Das Attribut value enthält einen String, der den Wert darstellt, der im Suchfeld enthalten ist. Sie können diesen Wert mit 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 ein beliebiger Textstring oder ein leerer String ("") sein.

Zusätzliche Attribute

Zusätzlich zu den globalen Attributen und den Attributen, die auf alle <input> Elemente unabhängig von ihrem Typ wirken, unterstützen Sucheingabefelder die folgenden Attribute.

list

Der Wert des list Attributs ist die id eines <datalist> Elements, das sich im selben Dokument befindet. Das <datalist> bietet eine Liste von vordefinierten Werten, 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 enthalten. Die angegebenen Werte sind Vorschläge und keine Anforderungen: Benutzer können aus dieser vorgegebenen Liste auswählen oder einen anderen Wert eingeben.

maxlength

Die maximale Zeichenlänge (gemessen in UTF-16 Code-Einheiten), 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 ist, hat das Suchfeld keine maximale Länge. Dieser Wert muss auch 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 Code-Einheiten. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

minlength

Die minimale Zeichenlänge (gemessen in UTF-16 Code-Einheiten), die der Benutzer in das Suchfeld eingeben kann. Dies muss ein nicht-negativer Ganzzahlenwert 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 in das Feld eingegebenen Textes kürzer ist als minlength UTF-16 Code-Einheiten. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

pattern

Das Attribut pattern, wenn angegeben, ist ein regulärer Ausdruck, den der value des Inputs erfüllen muss, um die Einschränkungsvalidierung zu bestehen. Es muss ein gültiger regulärer JavaScript-Ausdruck sein, wie er vom RegExp Typ benutzt wird, und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert; das 'u' Flag wird beim Kompilieren des regulären Ausdrucks spezifiziert, sodass das Muster als Sequenz von Unicode-Codepunkten behandelt wird, anstatt als ASCII. Vorwärts-Schrägstriche sollten nicht um den Text des Musters herum 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 Ein Muster spezifizieren für Details und ein Beispiel.

placeholder

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 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, der Platzhalter jedoch in der entgegengesetzten Richtung präsentiert werden muss, können Sie Unicode-Bidirektional-Algorithmus-Formatzeichen verwenden, um die Richtungssteuerung innerhalb des Platzhalters zu überschreiben. Siehe Wie man Unicode-Steuerelemente für bidi-Text verwendet für mehr Informationen.

readonly

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

size

Das size Attribut ist ein numerischer Wert, der angibt, 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 exakt sein oder nicht und sollte nicht darauf verlassen werden; das resultierende Eingabefeld kann schmaler oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und dem verwendeten font (Schriftart)-Einstellungen.

Dies setzt kein Limit darauf, wie viele Zeichen der Benutzer in das Feld eingeben kann. Es gibt nur an, wie viele ungefähr zu einem Zeitpunkt gesehen werden können. Um eine Obergrenze für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength Attribut.

spellcheck

spellcheck ist ein globales Attribut, das angibt, ob für ein Element die Rechtschreibprüfung aktiviert wird. Es kann für jeden bearbeitbaren Inhalt verwendet werden, hier betrachten wir jedoch die spezifischen Verwendungsmöglichkeiten von spellcheck auf <input> Elementen. Die zulässigen 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.

"" (leerer String) oder kein Wert

Folgen Sie dem Standardverhalten des Elements für die Rechtschreibprüfung. Dies kann auf der spellcheck-Einstellung eines Elternteils 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 das Lesen von spellcheck zurückgegeben wird, muss möglicherweise nicht den tatsächlichen Zustand der Rechtschreibprüfung innerhalb einer Steuerung widerspiegeln, wenn die Präferenzen des User Agents die Einstellung überschreiben.

Nicht-standardisierte Attribute

Die folgenden nicht-standardisierten Attribute sind für Such-Eingabefelder verfügbar. Vermeiden Sie sie nach Möglichkeit.

incremental

Das Boolean-Attribut incremental ist eine WebKit- und Blink-Erweiterung (also unterstützt von Safari, Opera, Chrome, etc.), die, wenn vorhanden, dem User Agent mitteilt, die Eingabe als Live-Suche zu verarbeiten. Wenn der Benutzer den Wert des Feldes 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, wenn der Benutzer die Suche bearbeitet.

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

Das search Ereignis wird in einer definierten Rate begrenzt, sodass es nicht öfter gesendet wird als in einem implementationsdefinierten Intervall.

results

Das results Attribut – nur von Safari unterstützt – ist ein numerischer Wert, mit dem Sie die maximale Anzahl von Einträgen überschreiben können, die im nativ bereitgestellten Dropdown-Menü von vorherigen Suchanfragen des <input> Elements angezeigt werden.

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

Verwendung von Such-Eingaben

<input> Elemente vom Typ search sind sehr ähnlich zu denen vom Typ text, außer dass sie speziell für die Handhabung von Suchbegriffen vorgesehen sind. Sie sind im Verhalten im Wesentlichen gleichwertig, aber User Agents können sich entscheiden, sie standardmäßig anders zu stylen (und natürlich können Websites Stylesheets verwenden, um ihnen benutzerdefinierte Stile zuzuweisen).

Einfaches Beispiel

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

Dies wird so gerendert:

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

Unterschiede zwischen Such- und Texttypen

Die grundlegenden Unterschiede bestehen darin, wie Browser sie handhaben. Zunächst ist zu beachten, dass einige Browser ein Kreuzsymbol anzeigen, das angeklickt werden kann, um den Suchbegriff sofort zu entfernen, wenn gewünscht. In Chrome wird diese Aktion auch ausgelöst, wenn die Escape-Taste gedrückt wird. Das folgende Bildschirmfoto stammt aus Chrome:

Außerdem speichern moderne Browser auch automatisch zuvor eingegebene Suchbegriffe domainsübergreifend, die dann als Autocomplete-Optionen angezeigt werden, wenn nachfolgende Suchen in Sucheingaben auf dieser Domain durchgeführt werden. Dies hilft Benutzern, die dazu neigen, über Zeiträume hinweg nach den gleichen oder ähnlichen Suchanfragen zu suchen. Dieses Bildschirmfoto stammt aus Firefox:

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

Platzhalter setzen

Sie können eine nützliche Platzhalter-Text innerhalb Ihrer Sucheingabe bereitstellen, die einen Hinweis darauf geben könnte, 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 unten gerendert wird:

Suchformular-Labels und Barrierefreiheit

Ein Problem mit Suchformularen ist ihre Barrierefreiheit; eine gängige Designpraxis besteht darin, 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 normalerweise aufgrund der Platzierung ziemlich offensichtlich ist (dieses Beispiel zeigt ein typisches Muster).

Dies könnte jedoch für Bildschirmleser-Benutzer Verwirrung stiften, da sie keinerlei verbale Hinweise darauf erhalten, was die Sucheingabe ist. Eine Möglichkeit, dies umzugehen, die Ihr visuelles Design nicht beeinflusst, besteht darin, Landmark-Elemente zu verwenden.

• Umfassen Sie die gesamte Suchfunktion in einem <search> Element, das eine Landmarkregion erstellt, die von unterstützenden Technologien angekündigt und schnell navigiert werden kann. Wenn Ihr <input> sich bereits in einem <form> befindet, können Sie alternativ role="search" dem <form> Tag hinzufügen, was das <form> Element ebenfalls zu einer Such-Landmark macht. Das <search>-Element verwendet native HTML-Semantik, während role="search" mehr Unterstützung hat und möglicherweise kürzer zu tippen ist, wenn Sie bereits eine <form>-Umgebung haben.
• Wenn das nicht ausreicht, können Sie ein aria-label Attribut 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.

Lassen Sie uns ein Beispiel betrachten:

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

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

Es gibt keine visuelle Unterschied zum vorherigen Beispiel, aber Bildschirmleser-Benutzer haben viel mehr Informationen zur Verfügung.

Physische Eingabefeldgröße

Die physische Größe des Eingabefelds 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 zum Beispiel 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:

Validierung

<input> Elemente vom Typ search haben die gleichen Validierungsoptionen zur Verfügung wie reguläre text Eingaben. Es ist weniger wahrscheinlich, dass Sie im Allgemeinen Validierungsmerkmale für Suchfelder verwenden möchten. In vielen Fällen sollten Benutzer einfach nach allem suchen dürfen, es gibt jedoch einige Fälle zu beachten, beispielsweise um gegen Daten mit bekanntem Format zu suchen.

Eine Anmerkung zum Styling

Es gibt nützliche Pseudoklassen zum Styling von gültigen/ungültigen Formularelementen: :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 Form-Element platziert wird und als Halter für die Symbole dient. Dies war notwendig, weil einige Eingabetypen auf einigen Browsern Symbole, die direkt nach ihnen platziert werden, nicht sehr gut anzeigen.

Eingabe erforderlich machen

Sie können das required Attribut verwenden, um das Eingeben eines Wertes vor dem Absenden des Formulars erforderlich zu machen:

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

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

Verschiedene Nachrichten werden angezeigt, wenn Sie versuchen, das Formular mit verschiedenen Typen ungültiger Daten in den Eingaben abzusenden; siehe folgende Beispiele.

Eingabewertlänge

Sie können eine minimale Länge in Zeichen für den eingegebenen Wert mit dem minlength Attribut angeben; ebenfalls verwenden Sie 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 wird so gerendert:

Wenn Sie versuchen, das Formular mit weniger als 4 Zeichen abzusenden, erhalten Sie eine entsprechende Fehlermeldung (die zwischen den Browsern variiert). Wenn Sie versuchen, mehr als 8 Zeichen einzugeben, lässt der Browser es nicht zu.

Ein Muster spezifizieren

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 kurzen Überblick).

Betrachten wir ein Beispiel. Angenommen, wir wollten ein Produktsuchformular bereitstellen und die IDs wären alle Codes aus zwei Buchstaben gefolgt von vier Zahlen. Das folgende Beispiel behandelt das:

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

Beispiele

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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