Javascript input type search

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.

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

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

Basic example

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:

A role attribute of value search on the 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 .

Let’s have a look at an example:

aria-label=«Search through site content«>

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 20 characters wide:

Validation

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

Making input required

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

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

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.

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

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.

Search for product by ID: 7″>

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

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

HTML DOM Input Search Object

The Input Search object represents an HTML element with type=»search».

Access an Input Search Object

You can access an element with type=»search» by using getElementById():

Example

Tip: You can also access by searching through the elements collection of a form.

Create an Input Search Object

You can create an element with type=»search» by using the document.createElement() method:

Example

Input Search Object Properties

Property	Description
autocomplete	Sets or returns the value of the autocomplete attribute of a search field
autofocus	Sets or returns whether a search field should automatically get focus when the page loads
defaultValue	Sets or returns the default value of a search field
disabled	Sets or returns whether a search field is disabled, or not
form	Returns a reference to the form that contains the search field
list	Returns a reference to the datalist that contains the search field
maxLength	Sets or returns the value of the maxlength attribute of a search field
name	Sets or returns the value of the name attribute of a search field
pattern	Sets or returns the value of the pattern attribute of a search field
placeholder	Sets or returns the value of the placeholder attribute of a search field
readOnly	Sets or returns whether the search field is read-only, or not
required	Sets or returns whether the search field must be filled out before submitting a form
size	Sets or returns the value of the size attribute of the search field
type	Returns which type of form element the search field is
value	Sets or returns the value of the value attribute of a search field

Input Search Object Methods

Method	Description
blur()	Removes focus from a search field
focus()	Gives focus to a search field
select()	Selects the content of a search text field

Standard Properties and Events

The Input Search object also supports the standard properties and events.

Источник

Javascript Reference — HTML DOM Input Search Object

The Input Search object represents an HTML element with type=»search».

Example

We can access an element with type=»search» by using getElementById().

 !DOCTYPE html> html> body> input type="search" >"mySearch" placeholder="Search for something.."> button onclick="myFunction()">test p >"demo">  script> function myFunction() !--from w w w . ja v a2s.c o m--> var x = document.getElementById("mySearch").placeholder; document.getElementById("demo").innerHTML = x; >

The code above is rendered as follows:

Example 2

We can create an element with type=»search» by using the document.createElement() method.

 !DOCTYPE html> html> body> button onclick="myFunction()">test script> function myFunction() !--from w w w . j a v a 2 s . co m--> var x = document.createElement("INPUT"); x.setAttribute("type", "search"); document.body.appendChild(x); >

The code above is rendered as follows:

Input Search Object Properties

Property	Description
autocomplete	Sets or gets the autocomplete attribute of a search field
autofocus	Sets or gets whether a search field can auto focus when the page loads
defaultValue	Sets or gets the default value of a search field
disabled	Disable or enable a search field
form	Get the form that contains the search field
list	Get the datalist that contains the search field
maxLength	Sets or gets the maxlength attribute of a search field
name	Sets or gets the name attribute of a search field
pattern	Sets or gets the pattern attribute of a search field
placeholder	Sets or gets the placeholder attribute of a search field
readOnly	Sets or gets whether the search field is read-only
required	Sets or gets whether the search field must be filled before submitting a form
size	Sets or gets the size attribute of the search field
type	Get the type of the search field
value	Sets or gets the value attribute of a search field

Standard Properties and Events

The Input Search object supports the standard properties and events.

Источник

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

Источник

Javascript input type search