HTML Search Box
The HTML search box is also known as the search bar. It is an input text field that is used to search the content. If the users want to explore something, they write the relevant keyword in the search box and search for it.
We can create a search box using <input> tag. We also add a type attribute, which takes the value of text or search to create a search bar. Below is the syntax of the search box:
Syntax:
<input type="text" >
We will use HTML code to create an HTML search bar. We will use CSS properties to make the web page look interesting.
Examples of HTML Search Box:
Example 1:
This example shows a simple search box created using HTML and CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Example 3 of HTML Search Box
</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
*{
margin: 0px;
padding: 0px;
}
.main{
width: 350px;
border: 2.5px solid brown;
padding: 10px;
border-radius: 30px;
}
input{
background: transparent;
border: 0px;
outline: 0px;
width: 320px;
}
body{
display:flex;
justify-content: center;
margin-top: 150px;
}
.search-icon{
color: brown;
font-size: 20px;
}
</style>
</head>
<body>
<div class="main">
<input type="search" name="search" id="" placeholder="Type to search">
<a href="#"><i class="fa fa-search search-icon"></i></a>
</div>
</body>
</html>Output:
The output shows a search box with a red border and a search icon in the center of the web page.
Example 2:
This example demonstrates a full-width HTML search button created using HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<title>
Example 2 of HTML Search Button
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
margin-top: 200px;
}
h1{
color: #f37c9d;
}
form.bar input[type=text] {
font-size: 15px;
padding: 12px;
border: 1px solid rgb(205, 174, 174);
width: 80%;
float: left;
background: #fad2d2;
}
form.bar button {
padding: 12px;
float: left;
width: 20%;
color: white;
background: #f38fab;
font-size: 15px;
border-left: none;
border: 1px solid rgb(205, 174, 174);
cursor: pointer;
}
form.bar button:hover {
background: #f37c9d;
}
form.bar::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h1> Full width HTML search box </h1>
<form class="bar" action="/action_page.php">
<input type="text" placeholder="Search here" name="search">
<button type="submit"> <i class="fa fa-search"></i> </button>
</form>
</body>
</html>
</html>
Output:
The output shows a search button with 100% width. We have used CSS to style the box to make it look attractive.
Example 3:
This example shows an HTML search button in the center of a page with a maximum width using HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<title>
Example 3 of HTML Search Button
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
margin-top: 150px;
}
h2{
color: #f37c9d;
text-align: center;
}
form.bar input[type=text] {
font-size: 15px;
padding: 12px;
border: 1px solid rgb(205, 174, 174);
width: 80%;
float: left;
background: #fad2d2;
}
form.bar button {
padding: 12px;
float: left;
width: 20%;
color: white;
background: #f38fab;
font-size: 15px;
border-left: none;
border: 1px solid rgb(205, 174, 174);
cursor: pointer;
}
form.bar button:hover {
background: #f37c9d;
}
form.bar::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2> HTML Search Bar with max-width </h2>
<form class="bar" action="#" style="margin:auto;max-width:300px">
<input type="text" placeholder="Search here" name="search2">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</body>
</html>
Output:
The output shows the search button in the center with the maximum width.
Example 4:
The example shows the search box in the navigation bar.
<!DOCTYPE html>
<html>
<head>
<title>
Example 4 of HTML Search Box
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#nav {
background-color: #7e129f;
position: absolute;
width: 100%;
}
#nav a {
float:left;
color: #ecd7ed;
text-align: center;
display: block;
font-size: 16px;
padding: 14px;
text-decoration: none;
}
.nav-right{
float:right;
}
#nav a:hover {
background-color: rgb(215, 163, 241);
color: rgb(111, 44, 111);
}
.search input[type=text]{
height:26px;
width:280px;
border-radius:24px;
border: none;
}
.search{
float:right;
margin:8px;
}
.search button{
background-color: #7e129f;
color: #f9e7fa;
float: right;
margin-right: 16px;
padding: 5px 10px;
font-size: 12px;
cursor: pointer;
border: none;
}
</style>
</head>
<body>
<div id="nav">
<a href="#"> Home </a>
<a href="#"> About Us </a>
<a href="#"> Contact Us </a>
<a href="#"> Careers </a>
<a href="#"> Courses </a>
<div class="search">
<form action="#">
<input type="text"
placeholder="Search courses"
name="search">
<button>
<i class="fa fa-search"
style="font-size: 15px;">
</i>
</button>
</form>
</div>
</div>
</body>
</html>
Output:
The result shows the search bar inside the navigation bar.
Example 5:
In this example, we are creating a responsive search box in the navigation bar.
<!DOCTYPE html>
<html>
<head>
<title>
Example 5 of HTML Search Box
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: system-ui, 'Helvetica Neue', Helvetica, sans-serif;
}
.nav {
overflow: hidden;
background-color: #b8daef;
}
.nav a {
float: left;
text-align: center;
color: blue;
display: block;
text-decoration: none;
padding: 14px 16px;
font-size: 16px;
}
.nav a:hover {
background-color: rgb(127, 213, 239);
color: rgb(217, 61, 22);
}
.nav .search-container {
float: right;
}
.nav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.nav .search-container button {
float: right;
background: rgb(188, 196, 214);
margin-top: 7px;
margin-right: 15px;
padding: 5px;
font-size: 18px;
cursor: pointer;
border: none;
}
.nav .search-container button:hover {
background: rgb(175, 187, 188);
}
@media screen and (max-width: 600px) {
.nav .search-container {
float: none;
}
.nav a, .nav input[type=text], .topnav .search-container button {
float: none;
text-align: left;
display: block;
width: 100%;
padding: 14px;
margin: 0;
}
.nav input[type=text] {
border: 1px solid rgb(237, 218, 218);
}
}
.content{
padding-left:18px;
color: blue;
}
</style>
</head>
<body>
<div class="nav">
<a class="active" href="#home"> Home </a>
<a href="#about"> About </a>
<a href="#contact"> Contact </a>
<div class="search-container">
<form action="#">
<input type="text" placeholder="Type to search" name="Search">
<button type="Submit"> Submit </button>
</form>
</div>
</div>
<div class="content">
<h2> Responsive Search Bar </h2>
</body>
</html>Output:
You can see the responsive search bar in the navigation bar.
When you adjust the page below 600px, you will see the responsiveness of the web page. The form elements will be stacked on the top of each other, as shown in the result of following snapsot:
Example 6:
In this example, we will create a working search bar. For that, we have to use JavaScript, so we will use HTML, CSS, and JavaScript to create a functional search bar.
We will create a search bar which examine for substrings in a string. We will create a list of items that include different foods so that we can search for food by typing the word in the search bar. We will also give the style to the search bar using padding, margin, border radius, etc. Then finally, we will add JavaScript to add functionality to the search bar.
<!DOCTYPE html>
<html>
<head>
<title>
Example 6 of HTML Search Box
</title>
<script>
function search_food() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('food');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
</script>
<style>
#searchbar{
margin-left: 15%;
border-radius: 12px;
padding:16px;
}
input[type=text] {
width: 40%;
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
}
input[type=text]:focus {
width: 60%;
}
#list{
font-size: 25px;
margin-left: 100px;
}
.food{
display: list-item;
}
</style>
</head>
<body>
<input id="searchbar" onkeyup="search_food()" type="text"
name="search" placeholder="Search food..">
<ol id='list'>
<li class="food"> Burger </li>
<li class="food"> Pizza </li>
<li class="food"> Chilly Potato </li>
<li class="food"> Tomato Soup </li>
<li class="food"> Manchurian </li>
<li class="food"> Garlic Bread </li>
<li class="food"> Fried Rice </li>
<li class="food"> Noodles </li>
<li class="food"> Spring Roll </li>
<li class="food"> Momos </li>
<li class="food"> French Fries </li>
</ol>
</body>
</html>
Output:
The output shows a search bar followed by a list of foods. When you type something in the search bar, the width of the search bar increases by 60%, and the border gets highlighted.
When you write any food name like we have searched Pizza. You will see the word appearing on the screen as shown below in the result.
Browser Support:
It supports the following browsers:
- Google Chrome
- Internet Explorer
- Mozilla Firefox
- Microsoft Edge
- Safari
- Opera