A search bar is a crucial element in modern web design, enhancing the user experience by allowing users to quickly search for content.
In this guide, you’ll learn how to create a search bar using HTML and CSS code. It’s an easy-to-follow tutorial that requires basic knowledge of HTML and CSS. We’ll also explore styling techniques to make the search bar visually appealing.
Creating a functional, attractive search bar is not just a technical task—it’s also about improving the usability of your website. When implemented correctly, a search bar can significantly boost user engagement and satisfaction.
Basic Structure of an HTML Search Bar
To create a search bar, you need to structure it using basic HTML tags. Here’s the basic code to create a search input field.
HTML code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Search Bar Example</title> </head> <body> <form action="#" method="GET"> <input type="text" placeholder="Search..."> <button type="submit">Search</button> </form> </body> </html>
In this code:
- The <form> tag is used to create a form that can accept input and submit it to a server.
- The <input> element with type=”text” is used to create the search bar where users can type their search query.
- The <button> element is the submit button that the user clicks after typing their search.
At this point, the search bar works, but it doesn’t look very appealing. Next, we’ll add some CSS to style it.
Styling the Search Bar with CSS
To make the search bar more attractive, we need to style it using CSS. Below is an example of how to add basic styles to the search bar.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Search Bar</title>
<style>
body {
font-family: Arial, sans-serif;
}
form {
margin: 50px auto;
max-width: 400px;
display: flex;
}
input[type="text"] {
width: 100%;
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 5px 0 0 5px;
outline: none;
}
button {
padding: 10px;
background-color: #5cb85c;
color: white;
border: none;
font-size: 16px;
cursor: pointer;
border-radius: 0 5px 5px 0;
}
button:hover {
background-color: #4cae4c;
}
</style>
</head>
<body>
<form action="#" method="GET">
<input type="text" placeholder="Search...">
<button type="submit">Search</button>
</form>
</body>
</html>
Explanation of the CSS Styling:
- form: This centers the form horizontally on the page and sets a maximum width of 400px.
- input[type=”text”]: It defines the search input’s width, padding, and border. The rounded corners on the left side give it a sleek look.
- button: It styles the search button with padding, background color, and text color, ensuring it stands out.
- button:hover: This rule changes the background color of the button when a user hovers over it, making it interactive.
Adding Icons to the Search Bar
Icons can enhance the user experience and give the search bar a more polished look. Here’s how you can add a magnifying glass icon to the search bar using Font Awesome.
First, include Font Awesome in your HTML file by adding this link inside the <head> section.
HTML code
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
Now, modify the search bar to include an icon.
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Bar with Icon</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
font-family: Arial, sans-serif;
}
form {
margin: 50px auto;
max-width: 400px;
display: flex;
}
.search-box {
width: 100%;
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 5px 0 0 5px;
outline: none;
}
button {
padding: 10px;
background-color: #5cb85c;
color: white;
border: none;
font-size: 16px;
cursor: pointer;
border-radius: 0 5px 5px 0;
}
button:hover {
background-color: #4cae4c;
}
.fa-search {
margin-right: 10px;
}
</style>
</head>
<body>
<form action="#" method="GET">
<input class="search-box" type="text" placeholder="Search...">
<button type="submit"><i class="fas fa-search"></i> Search</button>
</form>
</body>
</html>
In this updated code:
- The <link> tag includes the Font Awesome stylesheet.
- The <i class=”fas fa-search”></i> inside the button adds the search icon. This improves the look and functionality, making the button easier to recognize.
Making the Search Bar Responsive
Responsive design ensures the search bar works on all devices, from desktops to smartphones. Here’s how to make the search bar responsive.
CSS Code
@media screen and (max-width: 600px) {
form {
flex-direction: column;
}
.search-box, button {
width: 100%;
border-radius: 5px;
margin-bottom: 10px;
}
}
This CSS rule:
- When the screen size is less than 600px, it changes the layout of the search bar. The input and button will stack vertically, and both will be 100% width, improving usability on smaller devices.
Customizing the Search Bar
The beauty of HTML and CSS is the ability to customize as needed. You can change colors, fonts, and layouts to fit the style of your website. Here are some additional ideas to further customize your search bar:
- Rounded Search Bar: Make the input and button fully rounded by adjusting the border-radius values to 50px.
- Changing Font: Use a custom font by importing it from Google Fonts.
- Background Image: Add a background image to the search bar area to make it stand out even more.
CSS Code
input[type="text"] {
background-image: url('search-bg.jpg');
background-size: cover;
}
Accessibility Considerations
Always ensure that your search bar is accessible to all users. This includes adding aria-label attributes to provide clear instructions for screen readers.
HTML code
<input class="search-box" type="text" placeholder="Search..." aria-label="Search the website">
This small step improves the user experience for people who rely on assistive technologies.
FAQs on Search Bar
How do I align a search bar to the center of the page?
To center a search bar, wrap the form in a div with text-align: center, or use Flexbox as shown in the example above.
Can I change the color of the search bar?
Yes, you can change the color of the search bar by applying CSS properties like background-color and color to the input element.
How do I make the search bar mobile-friendly?
Use media queries to adjust the layout of the search bar for smaller screens, ensuring it’s responsive and easy to use on mobile devices.
Can I add a dropdown to the search bar?
Yes, you can add a dropdown to the search bar by adding a <select> element next to the input field.
How can I handle form submission with JavaScript?
Use JavaScript to handle form submission by attaching an event listener to the form’s submit event and preventing the default action if needed.
Is it possible to connect the search bar to a database?
Yes, you can connect the search bar to a database using a server-side language like PHP or JavaScript frameworks like Node.js. The search query will be processed on the server side.
Creating a search bar using HTML and CSS is straightforward yet crucial for improving your website’s usability. By adding simple styling and interactivity, you can transform a plain search bar into a user-friendly feature.
Don’t forget to make your search bar responsive and accessible to ensure it works for all users across various devices. Following these guidelines will help you create a search bar that not only looks good but also functions effectively.
A big thank you for exploring TechsBucket! Your visit means a lot to us, and we’re grateful for your time on our platform. If you have any feedback or suggestions, we’d love to hear them. Looking forward to serving you again soon!