Signup/Sign In

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.

search field with attributes

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.



About the author: