The above HTML is all we need to create a search bar. There are a few attributes that we are using on the <input> tag. Let's look at these in more detail:
type - This sets how the input looks on the screen. There are many types such as password, checkbox and radio yet here we are using search
name - It is common to use “q” for the search query box name
placeholder - This is some text that gives a hint to the user on what the input is for
When the HTML displays on the browser it looks like this:
For the input, we have used the type search but there is also a text type. It can be a bit confusing on which one you should pick. The two input types are almost the same except the search type has some extra functionality. For example, some browsers will add a delete button to the input tag for you:
For search boxes, it makes sense to use the search input type and that is what we are going to use here.
Our form is not quite finished yet, we need to make sure that screen readers can use it for accessibility.
To do this we have to make two changes to the form:
We need to add a role to the form with the value of “search”. Setting this will cause the screen readers to announce that this form is a search form.
We add a aria-label attribute to the <input> element. The screen reader will read aloud the value of this attribute. Set a value that describes what text the search form returns such as “Search through our site content”.
This is our final HTML:
<inputtype="search"id="query"name="q"placeholder="Search..."aria-label="Search through site content">
Next, we are going to look at making a form pretty by styling the form with CSS.
CSS adds style to the search bar changing its look and feel.
One addition that can help the user find the search box is to add a magnifying glass or search icon. We will add one of these to the button and create a search box that looks like this:
It's amazing what a bit of color and an icon can do! Looks much better right?
Let's look at what we have changed to make it look like this.
First, we have added some color to the form itself:
We have used the all: unset; rule again to reset the button to its default. Then set a height and width of 44px this is a good size for fingers on touch screens.
Then we set the height and width of the icon and set the color to white ("#fff”).
Now our search bar is almost ready! Except nothing happens when we press the search button.
We are going to do a Google search when someone searches in our search bar.
To do this we need to write some code that will:
Add an event listener to the form so we know when someone presses the search button
Get the text value from the query box
Build a Google URL that searches a specific site
Opens a new tab with Google and the search query
Google allows you to search a specific site if you add site: to the query. For example, if you wanted to search PageDart for the term lazy loading you could add this in Google:
site:pagedart.com lazy loading
The great thing about this search query is that it only returns results for the site you specify. You filter Google results and no other site will appear in the results. We can use this trick to create a search results page from our search bar.