HTML Input Type for Native Search

The input attribute Search is a text field for the search input field. It is similar to the text attribute, except that it also has an "X" to clear the search field for another search.

Method 1:

// Basic use of the search attribute
<input name="q" type="search" required placeholder="Search..." onfocus="this.placeholder = ''">

Example 1:

Adding the type="search" attribute specifies that the input field is for search. This adds an "X" to clear the input text if desired. In the example below a required placeholder was also added which can offer a hint or suggested search terms. The onfocus javascript in this example clears the placeholder when the search field gets focus either from a cursor or finger press on a touch screen.

<form id="search" method="get" action="https://www.indoorclimbing.com/search/">
<input name="q" type="search" required placeholder="Search..." onfocus="this.placeholder = ''">
</form>

Here is an example of the working code for the search attribute.

 

Copyright © Lage.us Website Development | Disclaimer | Privacy Policy | Terms of Use