Attributen
Dit element bevat alleen de globale attributen.
Gebruiksopmerkingen
Het <search>-element is niet bedoeld voor het presenteren van zoekresultaten. Zoek- of filterresultaten moeten in plaats daarvan gepresenteerd worden als onderdeel van de hoofdinhoud van die webpagina. Dat gezegd zijnde, suggesties en links die deel uitmaken van "snelzoek"-functionaliteit binnen de zoek- of filterfunctionaliteit, worden op passende wijze genest binnen de inhoud van het <search>-element, aangezien het zoekfuncties zijn.
Toegankelijkheid
Het <search>-element definieert een search-landmark. Dit maakt het toevoegen van role=search aan een <form>-element overbodig.
Voorbeelden
Zoekformulier in koptekst
Dit voorbeeld demonstreert het gebruik van <search> als de container voor een zoekfunctie binnen een websitekop, om een sitebrede zoekopdracht uit te voeren. De <search> is een semantische container voor het <form> dat de door de gebruiker ingevoerde zoekopdracht naar een server verzendt.
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>Resultaat
Zoeken in webtoepassing
Dit voorbeeld demonstreert mogelijke DOM-inhoud bij het dynamisch opnemen van JavaScript-zoekfunctionaliteit in een webtoepassing. Wanneer zoekfunctionaliteit volledig met JavaScript wordt geïmplementeerd en er geen formulier wordt verzonden, is noch een <form>-element noch een verzendknop <button> vereist. Voor de semantiek wordt het <search>-element opgenomen om de zoek- en filtermogelijkheden te bevatten.
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>Resultaat
Onthoud dat sommige gebruikers geen JavaScript hebben, en geen van uw gebruikers heeft JavaScript actief totdat de JavaScript succesvol is gedownload, geparseerd en uitgevoerd. Zorg ervoor dat uw gebruikers toegang hebben tot de inhoud van uw site met JavaScript uitgeschakeld.
Meerdere zoekfuncties
Dit voorbeeld demonstreert een pagina met twee zoekfuncties. De eerste is een algemene sitezoekfunctie in de koptekst. De tweede is een zoek- en filterfunctie gebaseerd op de paginacontext, in ons voorbeeld een autozoekopdracht.
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>Resultaat
Technische samenvatting
| Inhoudscategorieën | Flow-inhoud, tastbare inhoud. |
|---|---|
| Toegestane inhoud | Flow-inhoud. |
| Weglaten van tag | Geen, zowel de begin- als de eindtag zijn verplicht. |
| Impliciete ARIA-rol |
search
|
| Toegestane ARIA-rollen |
form, group, none, presentation, region, search
|
| DOM-interface | HTMLElement |