LAST UPDATED: JULY 8, 2021
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 list attribute 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 size attribute.
-
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>
Output:
Here is the output of the above program.
Conclusion
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.
