Create a Search Bar using HTML and CSS-How HTML

Create a Search Bar using HTML and CSS

Creating a search bar is a fundamental skill for web developers, as it enhances the user experience by allowing users to navigate through a website easily. This article will guide you through the process of creating various types of search bars using HTML and CSS. We will cover basic to advanced designs, ensuring you understand how to implement and style search bars effectively.

Basic Search Bar

Let’s start with a simple search bar. This example will demonstrate how to create a basic text input field and a submit button.

Example 1: Basic Search Bar

<!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>
<style>
  .search-box {
    margin: 20px;
  }
  .search-input {
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ccc;
    width: 240px;
  }
  .search-button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    font-size: 16px;
    cursor: pointer;
  }
</style>
</head>
<body>
<div class="search-box">
  <input type="text" class="search-input" placeholder="Search on how2html.com">
  <button class="search-button">Search</button>
</div>
</body>
</html>

Output:

Create a Search Bar using HTML and CSS

Search Bar with Icon

Enhancing the search bar with an icon can make it visually appealing. We will use a magnifying glass icon inside the search input field.

Example 2: Search Bar with Icon

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icon Search Bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<style>
  .search-box {
    position: relative;
    margin: 20px;
  }
  .search-input {
    padding: 10px 10px 10px 40px;
    font-size: 16px;
    border: 2px solid #ccc;
    width: 240px;
  }
  .search-icon {
    position: absolute;
    top: 12px;
    left: 12px;
    color: #ccc;
  }
</style>
</head>
<body>
<div class="search-box">
  <i class="fas fa-search search-icon"></i>
  <input type="text" class="search-input" placeholder="Search on how2html.com">
</div>
</body>
</html>

Output:

Create a Search Bar using HTML and CSS

Animated Search Bar

Adding animation to the search bar can make it interactive. This example shows how to expand the search input field when it is focused.

Example 3: Animated Search Bar

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Search Bar</title>
<style>
  .search-box {
    position: relative;
    margin: 20px;
    width: 180px;
  }
  .search-input {
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ccc;
    width: 100%;
    transition: width 0.4s ease-in-out;
  }
  .search-input:focus {
    width: 240px;
  }
</style>
</head>
<body>
<div class="search-box">
  <input type="text" class="search-input" placeholder="Search on how2html.com">
</div>
</body>
</html>

Output:

Create a Search Bar using HTML and CSS

Search Bar with Dropdown Suggestions

Implementing a search bar with dropdown suggestions can enhance the user experience by providing possible search terms or results. This example uses a simple list to simulate suggestions.

Example 4: Search Bar with Dropdown Suggestions

<!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 Suggestions</title>
<style>
  .search-box {
    position: relative;
    margin: 20px;
  }
  .search-input {
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ccc;
    width: 240px;
  }
  .suggestions {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    width: 100%;
    display: none;
  }
  .suggestion-item {
    padding: 10px;
    cursor: pointer;
  }
  .suggestion-item:hover {
    background-color: #f0f0f0;
  }
</style>
<script>
  function showSuggestions() {
    document.querySelector('.suggestions').style.display = 'block';
  }
  function hideSuggestions() {
    document.querySelector('.suggestions').style.display = 'none';
  }
</script>
</head>
<body>
<div class="search-box">
  <input type="text" class="search-input" placeholder="Search on how2html.com" onfocus="showSuggestions()" onblur="hideSuggestions()">
  <div class="suggestions">
    <div class="suggestion-item">HTML Basics</div>
    <div class="suggestion-item">Advanced CSS</div>
    <div class="suggestion-item">JavaScript Tips</div>
  </div>
</div>
</body>
</html>

Output:

Create a Search Bar using HTML and CSS

Responsive Search Bar

Creating a responsive search bar ensures that it looks good on all devices. This example uses CSS media queries to adjust the search bar size based on the screen width.

Example 5: Responsive Search Bar

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Search Bar</title>
<style>
  .search-box {
    margin: 20px;
  }
  .search-input {
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ccc;
    width: 100%;
  }
  @media (min-width: 768px) {
    .search-input {
      width: 50%;
    }
  }
</style>
</head>
<body>
<div class="search-box">
  <input type="text" class="search-input" placeholder="Search on how2html.com">
</div>
</body>
</html>

Output:

Create a Search Bar using HTML and CSS

Conclusion

In this article, we explored various ways to create and style search bars using HTML and CSS. We covered basic search bars, search bars with icons, animated search bars, search bars with dropdown suggestions, and responsive search bars. Each example provided a complete, standalone HTML code snippet that you can use and modify according to your needs. By understanding these examples, you can enhance the functionality and aesthetics of your web projects.

Create a Search Bar using HTML and CSS