Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a Search Bar using HTML and CSS
The search box is now the most crucial part of the website or application. You must have used it to look for information on YouTube, Google, Facebook, and other websites. Even if the search box is the most crucial part of a website or application, it can still be readily made using basic HTML & CSS code. Typically, the HTML-created search bar is found in the navigation bar.
The input field where users must type their search terms is the search bar. For example, if you need to look up articles, websites, photographs, or videos on Google we use the search bar. The navigation bar can also have buttons, drop-down menus, and anchors in addition to the search box, depending on the requirements. It is frequently put near the top of the page to facilitate navigation.
Example
Let’s look at the following example, where we are going to create the search bar with an ICON.
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
height: 200px;
}
.tutorial {
display: flex;
flex-direction: column;
justify-content: center;
}
form {
color: #DE3163;
display: flex;
padding: 3px;
border: 3px solid;
border-radius: 6px;
margin: 0 0 25px;
}
input[type='search'] {
padding: 8px 9px;
font-size: 20px;
border: 2px solid transparent;
}
input[type='search']::placeholder {
color: #82E0AA;
}
button[type='submit'] {
text-indent: -999px;
width: 50px;
border: 2px solid transparent;
border-radius: inherit;
background: transparent url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZd3uovkPNWjNd58ntj7UL0dQ-6EH8nrlRYg&usqp=CAU") no-repeat center;
cursor: pointer;
opacity: 0.5;
}
button[type='submit']:hover {
opacity: 2;
}
button[type='submit']:focus,
input[type='search']:focus {
box-shadow: 0 0 1px 0 #40E0D0;
border-color: #40E0D0;
outline: none;
}
</style>
</head>
<body>
<div class="tutorial">
<form>
<input type="search" placeholder="SEARCH..." />
<button type="submit">Search</button>
</form>
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the input field, which allows the user to enter the text that they want to search for, along with a search icon displayed instead of the button on the webpage.
Example
Following is an example of how we are going to create a search box with the button.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
float: left;
}
input[type=text] {
padding: 10px;
margin-top: 50px;
font-size: 15px;
border: none;
}
.tutorial button {
padding: 5px;
margin-left: 5px;
background: #D5F5E3;
font-size: 18px;
font-family: verdana;
color: #DE3163;
border: none;
cursor: pointer;
}
.tutorial button:hover {
background: #D2B4DE;
}
</style>
</head>
<body>
<div class="tutorial">
<form>
<input type="text" placeholder="SEARCH..." name="search">
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
On running the above code, the output window will pop up, displaying the search box along with a button applied with CSS displayed on the webpage. The search allows the user to enter the text they want to search for.
Example
Considering another scenario where we are going to add an event for the search box that will redirect to a specified destination when the user presses a button.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
float: left;
}
input[type=text] {
padding: 10px;
margin-top: 50px;
font-size: 15px;
border: none;
}
.tutorial button {
padding: 5px;
margin-left: 5px;
background: #D5F5E3;
font-size: 18px;
font-family: verdana;
color: #DE3163;
border: none;
cursor: pointer;
}
.tutorial button:hover {
background: #D2B4DE;
}
</style>
</head>
<body>
<div class="tutorial">
<form id="tp">
<input type="text" id="tp1" placeholder="SEARCH..." name="search">
<button type="submit">Submit</button>
</form>
</div>
<script>
const x = document.getElementById('tp');
const y = document.getElementById('tp1');
const x1 = 'https://www.google.com/webhp';
const y1 = 'youtube.com';
function submitted(event) {
event.preventDefault();
const a = x1 + y1 + '+' + y.value;
const b = window.open(a, '_blank');
b.focus();
}
x.addEventListener('submit', submitted);
</script>
</body>
</html>
When we execute the above code, it will generate an output consisting of the search box along with a button on the webpage. When the user presses the search button the event gets triggered and directs to the specified destination.
66 Views
