`<search>` HTML generisches Such-Element

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Oktober 2023 browserübergreifend verfügbar.

Das <search> HTML-Element ist ein Container, der die Teile des Dokuments oder der Anwendung mit Formularsteuerelementen oder anderem Inhalt darstellt, die mit der Durchführung einer Such- oder Filteroperation verbunden sind. Das <search>-Element identifiziert semantisch den Zweck der Inhalte des Elements als Such- oder Filterfunktionen. Die Such- oder Filterfunktionalität kann für die Website oder Anwendung, die aktuelle Webseite oder das Dokument, oder das gesamte Internet oder einen Teil davon sein.

Attribute

Dieses Element enthält nur die globalen Attribute.

Nutzungshinweise

Das <search>-Element dient nicht zur Präsentation von Suchergebnissen. Vielmehr sollten Such- oder gefilterte Ergebnisse als Teil des Hauptinhalts dieser Webseite präsentiert werden. Dennoch sind Vorschläge und Links, die Teil der "Schnellsuch"-Funktionalität innerhalb der Such- oder Filterfunktionalität sind, angemessen innerhalb der Inhalte des <search>-Elements verschachtelt, da sie Suchfunktionen sind.

Barrierefreiheit

Das <search>-Element definiert ein search-Landmark. Dies macht es überflüssig, role=search zu einem <form>-Element hinzuzufügen.

Beispiele

Suchformular im Kopfbereich

Dieses Beispiel demonstriert die Verwendung von <search> als Container für eine Suche innerhalb eines Website-Kopfbereichs zum Durchführen einer siteweiten Suche. Das <search> ist ein semantischer Container für das <form>, das die vom Benutzer eingegebene Suchanfrage an einen Server sendet.

HTML

html

<header>
  <h1>Movie website</h1>
  <search>
    <form action="./search/">
      <label for="movie">Find a Movie</label>
      <input type="search" id="movie" name="q" />
      <button type="submit">Search</button>
    </form>
  </search>
</header>

Ergebnis

Web-App-Suche

Dieses Beispiel zeigt mögliche DOM-Inhalte, wenn eine JavaScript-Suchfunktionalität dynamisch in einer Webanwendung integriert wird. Wenn Suchfunktionen vollständig mit JavaScript implementiert werden und kein Formular übermittelt wird, sind weder ein <form>-Element noch ein Senden-<button> erforderlich. Für semantische Zwecke wird das <search>-Element hinzugefügt, um die Such- und Filterfunktionen zu enthalten.

HTML

html

<search>
  <label>
    Find and filter your query
    <input type="search" id="query" />
  </label>
  <label>
    <input type="checkbox" id="exact-only" />
    Exact matches only
  </label>

  <section>
    <h3>Results:</h3>
    <ul id="results">
      <!-- search result content -->
    </ul>
    <output id="no-results">
      <!-- no results content -->
    </output>
  </section>
</search>

Ergebnis

Hinweis: Denken Sie daran, dass einige Benutzer kein JavaScript haben und keiner Ihrer Benutzer JavaScript ausführt, bis das JavaScript erfolgreich heruntergeladen, analysiert und ausgeführt wurde. Stellen Sie sicher, dass Ihre Benutzer auf den Inhalt Ihrer Website zugreifen können, wenn JavaScript deaktiviert ist.

Mehrfache Suchen

Dieses Beispiel zeigt eine Seite mit zwei Suchfunktionen. Die erste ist eine globale Site-Suche im Kopfbereich. Die zweite ist eine Suche und ein Filter basierend auf dem Seitenkontext, in unserem Beispiel eine Autosuche.

HTML

html

<body>
  <header>
    <h1>Car rental agency</h1>
    <search title="Website">...</search>
  </header>
  <main>
    <h2>Cars available for rent</h2>
    <search title="Cars">
      <h3>Filter results</h3>
      ...
    </search>
    <article>
      <!-- search result content -->
    </article>
  </main>
</body>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien	Flussinhalt, greifbarer Inhalt.
Erlaubter Inhalt	Flussinhalt.
Tag-Auslassung	Keine, sowohl der Start- als auch der End-Tag sind obligatorisch.
Implizite ARIA-Rolle	`search`
Erlaubte ARIA-Rollen	`form`, `group`, `none`, `presentation`, `region`, `search`
DOM-Schnittstelle	[`HTMLElement`](/de/docs/Web/API/HTMLElement)