How to create a Search field in HTML?
Answer: Using an
input tag with
type attribute value as search, we can create a search field in HTML form.
Nowadays a search field is used in almost every website. The search field is used to enable the end user to enter queries to search any specific content on the website.
Creating a Search field
To create a search field we have to use the
type attribute along with its value as search (
type="search") within the
<input> tag. The
<input> tag with
type="search" acts just like a normal text field.
But it can be used for only search-related tasks. Some browsers styles both the inputs differently. And all the browsers immediately understand that a field is used for search when they see the
type attribute set as search.
Here is the basic syntax:
<input type="search" ... />
Example: Creating a basic search field
Here is an example to add a search field using the HTML <input> tag. Also, we have added a search button inline with the search field. The
name attribute is used to submit the field value to the server.
Attributes for the search field
There are a number of attributes which can be used in the
<input> tag with
type attribute search.
list - The
listattribute is used to provide a list of predefined values to the user. The values are included within <datalist> tag and are used as suggestions for users.
size - Limit the length of characters used for the search field using the
spellcheck - It is used to indicate whether to enable or disable spellcheck for the input field.
placeholder - It is used to display some text in the empty field which acts as a hint for the end user. This attribute can be used for almost every input field.
Example: Search field with attributes
Here we have used some attributes while creating a search field.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML Examples</title> </head> <body> <h1>Search input field</h1> <form> <div> <input type="search" name="q" placeholder="Search anything..." size="35" spellcheck="enable"> <button>Search</button> </div> </form> </body> </html>
Here is the output of the above program.
We can create a search field using the
<input> tag by specifying the
type attribute along with the value search. Use different attributes available with the search field to make your search more user friendly.