Widely available Supported across all major browsers. Safe to use in production.

<input type="search">

<input> elements of type search are text fields designed for the user to enter search queries into. These are functionally identical to text inputs, but may be styled differently by the user agent.

Forms

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
html.elements.input.type_search
5
12
4
5
18
4.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
<form action="/search" method="get">
  <label for="q">Search:</label>
  <input type="search" id="q" name="q"
    placeholder="キーワードを入力" autofocus>
  <button type="submit">Search</button>
</form>

Live demo

Searchinputfield

Search type in kriabutton with. Searchfield provide.

PreviewFullscreen

Text and. Comparison

Search and text. Difference.search to is kriabutton that display case that exists.

PreviewFullscreen

saitsearchui

header to placementconpakt searchform.

PreviewFullscreen

Use cases

  • Using <input type="search">

    <input> elements of type search are text fields designed for the user to enter search queries into.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Verify how this element is announced by screen readers.

Related links