Add Search Bar in HTML

In this article, we will see how to add a search bar in HTML. You can also embed this search bar on your website. To create a Search box, we should use the <input> tag and its attributes.

Step-by-Step Guide to add Search bar

Code:

<form action="https://www.google.com/search" method="GET">
<input type="text" name="q" placeholder="Search">
<input type="submit" value="Search">
</form>

Output:

Step:

1. Here, first, we created a <form> tag. Add the “action” attribute and give the value as “https://www.google.com/search” for <form> tag. Then set the “method” attribute to “GET” for the <form> tag.
2. Inside the <form>, we have created two <input> tags, the first input “type” is set to “text” and the second input “type” is set to “submit“.
3. The first input tag has a “name” attribute and is given the value “q“, It was only after that that a Google search was redirected and the results were displayed.
4. See the above output, the simple search bar is displayed successfully. If you do any search in this search bar, you will be redirected to google and the results of your search will be shown.