<input type="search"> Wert des HTML-Attributs

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 value-Attribut enthält eine Zeichenkette, die den im Suchfeld enthaltenen Wert darstellt. Sie können diesen über die HTMLInputElement.value-Eigenschaft in JavaScript abrufen.

searchTerms = mySearch.value;

Wenn keine Validierungseinschränkungen für die Eingabe festgelegt sind (siehe Validierung für weitere Details), kann der Wert eine beliebige Zeichenkette oder eine leere Zeichenkette ("") 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. Die <datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Listenwerte, 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.

maxlength

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 ist, 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 Textes länger als maxlength UTF-16 Codeeinheiten ist. Die Einschränkungsvalidierung wird nur angewendet, wenn der Wert vom Benutzer geändert wird.

minlength

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

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

pattern

Das pattern-Attribut, wenn angegeben, ist ein regulärer Ausdruck, den der value des Eingabefelds 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 wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert; das 'u'-Flag wird beim Kompilieren des regulären Ausdrucks angegeben, damit das Muster als Sequenz von Unicode-Codepunkten und nicht als ASCII behandelt wird. Um das Muster herum sollten keine Schrägstriche angegeben werden.

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

Siehe die Sektion Angeben eines Musters für Details und ein Beispiel.

placeholder

Das placeholder-Attribut ist eine Zeichenkette, die 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 und keine erklärende Nachricht. Der Text darf keine Wagenrückläufe oder Zeilenvorschübe enthalten.

Wenn der Inhalt der Steuerung in eine Richtung (LTR oder RTL) angeordnet ist, der Platzhalter jedoch in der entgegengesetzten Richtung dargestellt werden muss, können Sie Unicode-Bidi-Algorithmus-Formatierungszeichen verwenden, um die Richtung innerhalb des Platzhalters zu überschreiben; siehe Wie man Unicode-Steuerzeichen für bidirektionalen Text verwendet für mehr Informationen.

readonly

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

size

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 mehr oder weniger genau sein und sollte nicht darauf verlassen werden, dass es so ist; die resultierende Eingabe kann schmaler oder breiter als die angegebene Anzahl von Zeichen sein, abhängig von den Zeichen und den (font-Einstellungen) verwendeten Schriftarten.

Dies setzt keine Beschränkung, 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 oberes Limit für die Länge der Eingabedaten festzulegen, verwenden Sie das maxlength-Attribut.

spellcheck

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

"" (leere Zeichenkette) oder kein Wert

Folgen Sie dem Standartverhalten des Elements für die Rechtschreibprüfung. Dies kann auf der spellcheck-Einstellung 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 Wert, der durch das Lesen von spellcheck zurückgegeben wird, könnte nicht den tatsächlichen Zustand der Rechtschreibprüfung innerhalb eines Steuerelements widerspiegeln, wenn die Präferenzen des Benutzer-Agents die Einstellung überschreiben.

Nicht-standardisierte Attribute

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

incremental

Das boolesche Attribut incremental ist eine WebKit- und Blink-Erweiterung (daher von Safari, Opera, Chrome usw. unterstützt), die, falls vorhanden, den User Agent auffordert, die Eingabe als Echtzeitsuche zu verarbeiten. Während der Benutzer den Wert des Feldes bearbeitet, sendet der Benutzeragent search-Ereignisse an das HTMLInputElement-Objekt, das das Suchfeld 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 startet (wie zum Beispiel durch Drücken der Enter- oder Return-Taste beim Bearbeiten des Feldes).

Das search-Ereignis ist so geregelt, dass es nicht häufiger als in einem von der Implementierung definierten Intervall gesendet wird.

results

Das results-Attribut – nur von Safari unterstützt – ist ein numerischer Wert, der es Ihnen ermöglicht, die maximale Anzahl von Einträgen zu überschreiben, die im nativen Dropdown-Menü des <input>-Elements mit vorherigen Suchanfragen angezeigt werden.

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.

Verwendung von Sucheingaben

<input>-Elemente vom Typ search sind dem Typ text sehr ähnlich, außer dass sie speziell für die Verarbeitung von Suchbegriffen vorgesehen sind. Sie sind im Verhalten im Wesentlichen gleichwertig, aber Benutzeragenten können sie standardmäßig anders gestalten (und natürlich können Webseiten Stylesheets verwenden, um ihnen benutzerdefinierte Stile zu verleihen).

Einfaches Beispiel

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

Dies wird wie folgt gerendert:

q ist der gängigste name, der Sucheingaben gegeben wird, obwohl es nicht zwingend erforderlich ist. Beim Absenden wird das Datenname/Wert-Paar, das an den Server gesendet wird, q=searchTerm sein.

Unterschiede zwischen Such- und Texttypen

Die Hauptunterschiede ergeben sich aus der Art und Weise, wie Browser sie behandeln. Zu beachten 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 neigen moderne Browser dazu, automatisch zuvor eingetippte Suchbegriffe über Domains hinweg zu speichern, die dann als Autovervollständigungsmöglichkeiten erscheinen, wenn nachfolgende Suchanfragen in Sucheingabefeldern auf dieser Domain durchgeführt werden. Das hilft Benutzern, die über einen bestimmten Zeitraum hinweg häufig dieselben oder ähnliche Suchanfragen durchführen. Dieser Screenshot ist von Firefox:

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

Platzhalter setzen

Sie können einen nützlichen Platzhalter in Ihrer Sucheingabe bereitstellen, der einen Hinweis darauf gibt, was zu tun ist, indem Sie das placeholder-Attribut verwenden. 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>

Sie können sehen, wie der Platzhalter unten gerendert wird:

Etiketten für Suchformulare und Zugänglichkeit

Ein Problem mit Suchformularen ist ihre Zugänglichkeit; eine übliche Designpraxis besteht darin, kein Etikett 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 visuelles Muster).

Dies könnte jedoch zu Verwirrung für Benutzer von Bildschirmlesegeräten führen, da sie keinen mündlichen Hinweis darauf erhalten, was das Sucheingabefeld ist. Ein Weg, dieses Problem zu umgehen, der Ihr visuelles Design nicht beeinträchtigt, besteht darin, Landmark-Elemente zu verwenden.

• Umrahmen Sie die gesamte Suchfunktionalität in ein <search>-Element, das eine Landmark-Region erstellt, die Hilfstechnologien ankündigen und schnell navigieren können. Wenn Ihr <input> bereits in einem <form> ist, können Sie alternativ role="search" auf das <form>-Element hinzufügen, das auch das <form> zu einer Such-Landmark macht. Das <search>-Element verwendet native HTML-Semantik, während role="search" mehr Unterstützung hat und kürzer zu tippen sein kann, wenn Sie bereits einen <form>-Wrapper haben.
• Wenn das nicht ausreicht, können Sie ein aria-label-Attribut auf dem <input> selbst verwenden. Dies sollte eine beschreibende Textbeschriftung sein, die vom Vorleseprogramm vorgelesen wird; es dient als nicht-visueller Ersatz zu <label>.

Schauen wir uns ein minimales Beispiel an:

<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 keinen visuellen Unterschied zum vorherigen Beispiel, aber Benutzer von Bildschirmlesegeräten haben viel mehr Informationen zur Verfügung.

Physische Größe des Eingabeelements

Die physische Größe des Eingabefelds kann mit dem size-Attribut gesteuert werden. Mit diesem können Sie die Anzahl der Zeichen angeben, die das Eingabefeld gleichzeitig anzeigen kann. In diesem Beispiel ist das Suchfeld zum Beispiel 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 dieselben Validierungsmerkmale zur Verfügung wie reguläre text-Eingaben. Es ist weniger wahrscheinlich, dass Sie allgemeine Validierungsmerkmale für Suchfelder verwenden möchten. In vielen Fällen sollten Benutzer einfach alles suchen dürfen, aber es gibt ein paar Fälle zu berücksichtigen, wie zum Beispiel Suchanfragen gegen Daten eines bekannten Formats.

Eine Anmerkung zum Styling

Es gibt nützliche Pseudoklassen, die für das Styling von gültigen/ungültigen Formularelementen verfügbar sind: :valid und :invalid. In diesem Abschnitt verwenden wir das folgende CSS, das einen Haken neben Eingaben mit gültigen Werten und ein Kreuz neben Eingaben mit ungültigen Werten platziert.

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 und als Halter für die Symbole fungiert. Dies war notwendig, da einige Eingabetypen in einigen Browsern keine Symbole sehr gut darstellen, die direkt nach ihnen platziert sind.

Eingabe erforderlich machen

Sie können das required-Attribut als einfache Möglichkeit verwenden, die Eingabe eines Werts 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:

Wenn Sie versuchen, das Formular zu senden, ohne einen Suchbegriff einzugeben, zeigt der Browser eine Nachricht an. Das folgende Beispiel stammt aus Firefox:

Unterschiedliche Nachrichten werden angezeigt, wenn Sie versuchen, das Formular mit unterschiedlichen Arten von ungültigen Daten in den Eingabefeldern zu senden; siehe die untenstehenden Beispiele.

Eingabewertlänge

Sie können eine Mindestlänge in Zeichen für den eingegebenen Wert mithilfe des minlength-Attributs angeben; verwenden Sie ebenso maxlength, um die maximale Länge des eingegebenen Werts festzulegen.

Im folgenden Beispiel wird angegeben, dass der eingegebene Wert zwischen 4 und 8 Zeichen lang sein muss.

<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 zu senden, erhalten Sie eine entsprechende Fehlermeldung (die je nach Browser variiert). Wenn Sie versuchen, über 8 Zeichen hinauszugehen, lässt der Browser dies nicht zu.

Ein Muster angeben

Sie können das pattern-Attribut verwenden, um einen regulären Ausdruck anzugeben, dem der eingegebene Wert entsprechen 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 möchten ein Produkt-ID-Suchformular bereitstellen, und die IDs sind alle Codes aus zwei Buchstaben, gefolgt von vier Zahlen. Das folgende Beispiel behandelt dies:

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

Beispiele

Zugängliches Suchformular

Dieses Beispiel zeigt ein typisches <nav>-Menü, das ein Suchformular enthält. WAI-ARIA-Merkmale werden verwendet, um das Formular für Benutzer von Hilfstechnologie (AT) zugänglicher zu machen.

HTML

Die Hauptnavigationspunkte bestehen aus einer Liste von Links. Dem Such<form> wird ein role="search"-Attribut zugewiesen, wodurch das <form> zu einer Such-Landmark wird und es an AT ankündigt. Wir geben dem <input type="search">-Element auch ein aria-label, um ihm eine klare Beschriftung zu geben, die von Bildschirmlesegeräten vorgelesen wird.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <form role="search">
    <input
      type="search"
      name="q"
      placeholder="Search query"
      aria-label="Search through site content" />
    <button>Search!</button>
  </form>
</nav>

html {
  font-family: sans-serif;
  font-size: 10px;
}

nav {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 10px;
}

nav ul {
  padding: 0;
  list-style-type: none;
  flex: 2;
  display: flex;
}

nav li {
  text-align: center;
  flex: 1;
}

nav a {
  font-size: 2rem;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 1.2;
}

nav form {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
}

input {
  font-size: 1.6rem;
}

input[type="search"] {
  flex: 3;
  height: 30px;
}

button {
  flex: 1;
  height: 30px;
  padding: 0 1em;
  background: #333;
  border: 0;
  color: white;
}

Wir haben das CSS und JavaScript des Beispiels zur Kürze ausgeblendet, da es für das Verständnis des HTML nicht relevant ist. Sie können sie ansehen, indem Sie die "Abspielen"-Schaltfläche im Live-Beispiel unten drücken.

const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
  e.preventDefault();
});

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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