<input type="search">

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

<input type="search">

Value

The value attribute contains a DOMString representing the value containe 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.

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

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>

input {
  margin-right: 10px;
}
input:invalid ~ span:after {
    content: '✖';
    padding-left: 5px;
    position: absolute:
}
input:valid ~ span:after {
    content: '✓';
    padding-left: 5px;
    position: absolute:
}

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:

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>

input {
  margin-right: 10px;
}
input:invalid ~ span:after {
    content: '✖';
    padding-left: 5px;
    position: absolute:
}
input:valid ~ span:after {
    content: '✓';
    padding-left: 5px;
    position: absolute:
}

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>

input {
  margin-right: 10px;
}
input:invalid ~ span:after {
    content: '✖';
    padding-left: 5px;
    position: absolute:
}
input:valid ~ span:after {
    content: '✓';
    padding-left: 5px;
    position: absolute:
}

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

Browser compatibility

See also

• HTML Forms
• <input> and the HTMLInputElement interface it's based upon
• <input type="text">