search defines text field which is used for entering value such as string, numbers etc as per search requirements. In HTML5, we can define text box as search box instead of a normal box. It behaves like a regular text field. It is not just Google search or Yahoo search; it is like site search or search box on any page, on any site, like Amazon has search box, Quikr site has search box, most blogs will have search box etc.
The search box differs only in style with standard text box. The browsers that support search box may change look of the field slightly with search box on that platform. It will jus appear as standard text box rather than any special styles.
The search input type has only one attribute:
- value: The initial value.
Syntax of search Input Type
<input type="search" name="some-name">
Browser Support
The search input tag is supported by Google Chrome and Safari. If a browser doesn’t understand type=”search”, it will default to type=”text”.
HTML5 Search Input Type Example
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>search input type </title> </head> <body> <form> search:<input type="search" name="search" placeholder="custom search"> <input type="Submit"> </form> </body> </html>
Here, we are using <input type=”search”> for site search box which will take input from user and gives back result to the user .The placeholderattribute specifies a short hint which describes value of the input field. It works with input types such as text, search, url, email, password etc.
Example Application Test
- Save the file as search_example.html in your system.
- Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.
Output
When the execution process is completed successfully we will get the following output:
We can see cross sign in the text box when you input something in the search box, when we click on the cross sign, our string will be clear and we can start writing new string.
HTML5 Email Input Type