Javatpoint Logo
Javatpoint Logo

How to make a Search bar in Html

Using Html and CSS

If we want to make the search bar using the Html and Internal CSS then we have to follow the steps which are given below. Using these steps, we can easily view the search bar on the web page in the browser:

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to use the CSS and Html code for making a search bar.

Step 2: Now, we have to place the cursor at that point in the body tag where we want to make a search bar. And, then type the <form> tag at that point.

Step 3: Now, we have to use the <input> tag with the type attribute. And, then place the text value in the type attribute. And, then, type the placeholder and name attributes in the <input> tag.

Step 4: Now, we have to use the button tag with the type attribute. And, then place the submit value in the type attribute. And, then we have to close the </button> tag. And, at last we have to close the </form> tag.

Step 5: And then, we have to use the following code of CSS between the starting and closing of <head> tag.

Step 6: And, at last, we have to save the Html file and then run the file in the browser.

Test it Now

The output of above Html code is shown in the following screenshot:

How to make a Search bar in Html




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA