MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

<input type="search">

Value A DOMString representing the value contained in the search field.
Events change and input
Supported Common Attributes autocomplete, list, maxlength, minlengthpatternplaceholderrequiredsize.
IDL attributes value
Methods select(), setRangeText(), setSelectionRange().

Value

The value attribute contains a DOMString representing the value contained in the search field. You can retrieve this using the HTMLInputElement.value property in JavaScript.

mySearch.value;

If no validation constraints are in place for the input (see Validation for more details), the value can be a text string or empty string ("").

Using range inputs

<input> elements of type search are very similar to those of type text, except that they are specifically intended for handling search terms.

Basic example

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

This renders like so:

q is the standard name given to search inputs. When submitted, the data name/value pair sent to the server will be q=searchterm. You must remember to set a name for your input, otherwise nothing will be submitted.

Differences between search and text types

The main basic differences come in the way browsers handle them. The first thing to note is that some browsers show a cross icon that can be clicked on to remove the search term instantly if desired. The following screenshot comes from Chrome:

In addition, modern browsers also tend to automatically store search terms previously entered across domains, which then come up as autocomplete options when subsequent searches are performed in search inputs on that domain. This screenshot is from Firefox:

At this point, let's look at some useful techniques you can apply to your search forms.

Setting placeholders

You can provide a useful placeholder inside your search input that could give a hint on what to do using the placeholder attribute. Look at the following example:

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

You can see how the placeholder is rendered below:

Search form labels and accessibility

One problem with search forms is their accessibility — the general pattern is that you don't provide a label (although you might provide a magnifying glass icon or similar), as the purpose of a search form is normally fairly obvious for sighted users due to placement (this example shows a typical pattern).

This could however cause confusion for screenreader users. One way around this that won't impact on your visual design is to use WAI-ARIA features:

  • A role attribute of value search on the <form> element will cause screenreaders to  annoucement the form as a search form.
  • If that is not enough, you can use an aria-label attribute on the input itself. This is designed to contain a descriptive text label that will be read out by the screenreader — basically, it's a non-visual equivalent to <label>.

Let's have a look at an example:

<form role="search">
  <div>
    <input type="search" id="mySearch" name="q"
     placeholder="Search the site..."
     aria-label="Search through site content">
    <button>Search</button>
  </div>
<form>

You can see how this is rendered below:

There is no visual difference from the previous example, but screenreader users have way more information available to them.

Note: See Signposts/Landmarks for more information about such accessibility features.

Physical input element size

The physical size of the input box can be controlled using the size attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the search box is 30 characters wide:

<form>
  <div>
    <input type="search" id="mySearch" name="q"
    placeholder="Search the site..." size="30">
    <button>Search</button>
  </div>
<form>

Validation

<input> elements of type search have the same validation features avaiable to them as regular text inputs. It is less like that you'd want to use validation features in general for search boxes. In many cases, users should just be allowed to search for anything, but there are a few cases to consider.

Note: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format.  It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.

A note on styling

There are useful pseudo-classes available for styling valid/invalid form elements — :valid and :invalid. In this section, we'll use the following CSS, which will place a check (tick) next to inputs containing valid values, and a cross next to inputs containing invalid values.

input:invalid ~ span:after {
    content: '✖';
    padding-left: 5px;
    position: absolute:
}

input:valid ~ span:after {
    content: '✓';
    padding-left: 5px;
    position: absolute:
}

The technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons. This was necessary because some input types on some browsers don't display icons placed directly after them very well.

Making input required

You can use the required attribute as an easy way of making entering a value required before form submission is allowed:

<form>
  <div>
    <input type="search" id="mySearch" name="q"
    placeholder="Search the site..." required>
    <button>Search</button>
    <span class="validity"></span>
  </div>
<form>

This renders like so:

In addition, if you try to submit the form with no search term entered into it, the browser will show a message. The follow example is from Firefox:

form field with attached message that says Please fill out this field

Different messages will be shown when you try to submit the form with different types of invalid data contained inside the inputs; see the below examples.

Input value length

You can specify a minimum length, in characters, for the entered value using the minlength attribute; similarly, use maxlength to set the maximum length of the entered value.

The example below requires that the entered value be 4–8 characters in length.

<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>

This renders like so:

If you try to submit the form with less than 4 characters, you'll be given an appropriate error message (which differs between browsers). If you try to go beyond 8 characters in length, the browser won't let you.

Specifying a pattern

You can use the pattern attribute to specify a regular expression that the inputted value must follow to be considered valid (see Validating against a regular expression for a simple crash course).

Let's look at an example. Say we wanted to provide a product ID search form, and the IDs were all codes of two letters followed by four numbers? the following example covers it:

The example below requires that the entered value be 4–8 characters in length.

<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>

This renders like so:

Examples

You can see a good example of a search form used in context at our website-aria-roles example (see it live).

Specifications

Specification Status Comment
HTML Living Standard
The definition of '<input type="search">' in that specification.
Living Standard Initial definition
HTML 5.1
The definition of '<input type="search">' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5.0 ? Unknown (4.0) 10 10.62 ?
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile iOS WebKit
(Safari/Chrome/Firefox/etc)
Basic support ? ? ? 4.0 (4.0) ? (Yes) 3.1

See also

Document Tags and Contributors

 Contributors to this page: nmunro, chrisdavidmills
 Last updated by: nmunro,