Html form input search

W3cubDocs

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.

searchTerms = mySearch.value;

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

Using search inputs

elements of type search are very similar to those of type text , except that they are specifically intended for handling search terms. They are basically equivalent in behavior, but user agents may choose to style them differently by default (and, of course, sites may use stylesheets to apply custom styles to them).

Basic example

q is the most common name given to search inputs, although it’s not mandatory. 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 helps users who are tend to do searches on the same or similar search queries over time. 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:

You can see how the placeholder is rendered below:

Search form labels and accessibility

One problem with search forms is their accessibility; a common design practice is not to provide a label for the search field (although there might be 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, since they will not have any verbal indication of what the search input is. 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 element will cause screenreaders to announce that the form is a search form.
• If that isn’t enough, you can use an aria-label attribute on the itself. This should be a descriptive text label that will be read out by the screenreader; it’s used as a non-visual equivalent to .

Let’s have a look at an example:

 
 
aria-label="Search through site content"> Search 
 

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:

The result is this wider input box:

Validation

elements of type search have the same validation features available to them as regular text inputs. It is less likely 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, such as searches against data of a known format.

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

Making input required

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

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.

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:

 
 
Search for product by ID: 1"> Search 
 

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 » in that specification.	Living Standard	Initial definition
HTML 5.1 The definition of » 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

Источник

HTML

Define a search field (like a site search, or Google search):

Definition and Usage

The defines a text field for entering a search string.

Note: Remember to set a name for the search field, otherwise nothing will be submitted. The most common name for search inputs is q.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Attribute
type=»search»	26.0	10.0	4.0	5.1	12.1

Syntax

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник