<search>

Syntax

<search>
  <form role="search">
    <input type="search" name="q">
  </form>
</search>

Examples

<search>
  <form action="/search" method="get">
    <label for="q">Search Codectionary</label>
    <input type="search" id="q" name="q" placeholder="Search docs...">
    <button type="submit">Search</button>
  </form>
</search>

<search>
  <label for="filter">Filter by language:</label>
  <select id="filter">
    <option>All</option>
    <option>HTML</option>
    <option>CSS</option>
  </select>
</search>

<header>
  <search>
    <input type="search" placeholder="Quick search..." style="padding: 6px 12px; border-radius: 6px; border: 1px solid #d1d5db;">
  </search>
</header>

Best practices

• Use search to wrap the form and controls for search/filter functionality, not the results themselves
• It can be used for both site-wide search and in-page filtering — both are valid uses
• Being a newer element, verify support in your target browsers; it degrades gracefully to an unstyled generic container in older ones
• Continue using a real form inside it for the actual search input — search is a landmark wrapper, not a replacement for form semantics

Browser compatibility

Related HTML documentation

Specifications & further reading

• HTML Living Standard