Search Bar in HTML

Pre-requisites

1. HTML for building the base for the search bar
2. CSS for beautifying the search bar

What are we Creating ?

We are creating a search bar in HTML and CSS. By entering a query or search term, the user can search for and retrieve relevant information from a database using this search bar.

Output

How does Search Bar Work in HTML ?

It is used to search for whatever we want on the website. We have to input a keyword and if it is present it would return it. The syntax is shown below

Syntax

Examples

Example 1: Search Bar

Explanation :
We have created a nav bar with Home, Works, and Blog link fields. We then created a search bar and applied CSS to style it and make it beautiful.

Output

Example 2: Animated Search bar

Explanation :
We have created an animated search with HTML and CSS. When we click on the search button it gets expanded this is possible due to the amazing CSS animation properties.

Output

Creating a Search Bar in HTML

We must first add a bar to the page.

Here are some HTML elements to use :

• <form> : This element asks users for input.
• <input> : There are several types of this element, today we will use search.
• <button> : Use this element to submit the form and begin searching.

The HTML will look like this :

This is all the HTML we need to create the search bar. We are using a few attributes on the <input> tag.

Here is a closer look :

1. type :
   Determines how the input appears on screen. We are using a search engine here rather than other types such as password, checkbox, and radio.
2. id :
   The input box can be referenced from JavaScript by setting an ID, which will be used later on.
3. name :
   In the search box, it is common to use "q".
4. placeholder :
   Displays some text to assist users in understanding what the input is for.

To make it accessible to screen readers, we add role and aria-label attributes.

Our Final HTML would look like the one below :

Styling the Search Bar with CSS

Next we are going to add CSS :

The addition of a magnifying glass or search icon can make it easier for users to find the search box. Let's create a search button with one of the search icon images.

Next by using the flex display, we can arrange the items in the form based on the form's width and height.

In the next step, we change the look of the input search box by using the all:unset, design. It can be difficult to style many browsers since they all add their design. This can make styling easier because we know what to do.

Last but not least, we have added a bit of padding after setting the font and making sure that the search bar fills the space with height and width.

In a search box, the placeholder text is gray by default, so we must set the style with this CSS rule :

The next step is to replace the search button with a search icon made from SVG, which changes its appearance and feel. We will add an SVG of the search icon.

Now our CSS looks like this :

Once again, we have used all: unset, to reset the button to its default state and then have set its height and width to 44px which is a good size for fingers on touch screens.

Lastly, we set the width and height of the icon and its color to white ("#fff").

We have finished with our search bar :

Complete Solution

Examples

Example A: Search with Icon

First, we create a markup with HTML as a wrapper.

The input type text field will then be placed with a placeholder. The icon will then be placed inside a button.

We are going to use Font Awesome icons, which are lightweight and easy to use, but you can pick anyone else.

The next step is to style the input type search box. We will start by applying a 100% width to the wrapper. You can modify it to suit your needs.

We will then apply the styling to the text field. Our goal is to make the picture look good by adding a border, setting the padding, and adding some color.

The button property will also be modified.

Output :

Example B: Search with Button

To get started, let's create the HTML code for an HTML search box with an input text field and a search button inside the same box :

In the following code example, the outermost div element (wraptext) serves as an enclosing box.

To enclose the input text and button in a box is what CSS codes are all about.

It will also enhance the look of our search box :

Output :

Example C: Search without Additional Elements

Now we would add HTML as a wrapper for our search and add CSS to it to beautify it. The only difference we will have here is that we will have any additional search icons as in previous examples.

Explanation :
Here we gave HTML to give the foundation then we added CSS to beautify our foundation and in this example, we did not make use of any search SVG icons

Output :

Search Events with Example

We will add HTML and CSS to our search bar to make it attractive. In addition to that we will also add an event so that when a user presses the search icon they get redirected to the specified destination :

Explanation :
We have added HTML to give structure and CSS to give it beauty and at last javascript to make it work when clicked else it would not redirect anywhere.

Output :

Differences between Search and Text Type

It is primarily a matter of style that separates the Text state from the Search state : on platforms with distinct search fields, the Search state will result in a presentation similar to the platform's search fields, rather than like a regular text field.