How to Create a Search Bar in HTML?

Introduction

A search bar in HTML allows users to input queries and find relevant results on a webpage. It is commonly used in websites to enhance navigation and user experience. A basic search bar can be created using the <input> element with the type="search" attribute. Additional styling and functionality can be added using CSS and JavaScript.

In this article, you will learn how to create a search bar in HTML, style it with CSS, and add functionality using JavaScript.

Approach

To create a search bar in HTML, we will follow these steps:

Basic Search Bar with HTML – Using only the <input> and <button> elements.
Styled Search Bar with CSS – Enhancing the appearance with CSS.
Search Bar with JavaScript Functionality – Adding dynamic search capabilities.
Search Bar with Auto-Suggestions – Implementing an advanced feature.

Let's look at each approach with examples.

Example 1: Basic Search Bar with HTML

This is a simple search bar using only HTML elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Search Bar</title>
</head>
<body>
    <form action="search_results.html" method="GET">
        <input type="text" name="query" placeholder="Search here...">
        <button type="submit">Search</button>
    </form>
</body>
</html>

Output

Explanation:

<input> creates a text box for entering search queries.
<button> allows users to submit their search query.
The form tag with action="search_results.html" sends the query to a results page.

Example 2: Styled Search Bar with CSS

Now, let's improve the appearance of the search bar using CSS.

<!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>
        .search-container {
            text-align: center;
            margin-top: 50px;
        }
        .search-box {
            padding: 10px;
            width: 250px;
            border: 2px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }
        .search-button {
            padding: 10px;
            background-color: #008CBA;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="search-container">
        <input type="text" class="search-box" placeholder="Search here...">
        <button class="search-button">Search</button>
    </div>
</body>
</html>

Output

Explanation:

The .search-container centers the search bar.
.search-box adds padding and border styling.
.search-button applies a blue color and styles the button for a better appearance.

Example 3: Search Bar with JavaScript Functionality

This example makes the search bar functional by filtering a list of items dynamically.

<!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 JavaScript</title>
    <style>
        .search-box {
            padding: 10px;
            width: 250px;
            border: 2px solid #ccc;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <input type="text" id="searchInput" class="search-box" placeholder="Search items..." onkeyup="searchFunction()">
    <ul id="itemList">
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
        <li>Mango</li>
        <li>Grapes</li>
    </ul>

    <script>
        function searchFunction() {
            let input = document.getElementById("searchInput").value.toLowerCase();
            let items = document.querySelectorAll("#itemList li");
            items.forEach(item => {
                if (item.innerHTML.toLowerCase().includes(input)) {
                    item.style.display = "";
                } else {
                    item.style.display = "none";
                }
            });
        }
    </script>
</body>
</html>

Output

Explanation:

The onkeyup event triggers searchFunction() every time a user types.
The function filters list items based on user input.

Example 4: Search Bar with Auto-Suggestions

An advanced search bar displaying auto-suggestions while typing.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search with Auto-Suggestions</title>
    <style>
        .suggestions {
            border: 1px solid #ccc;
            display: none;
            position: absolute;
            background: white;
        }
        .suggestions div {
            padding: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <input type="text" id="searchBox" placeholder="Type to search..." onkeyup="showSuggestions()">
    <div id="suggestions" class="suggestions"></div>

    <script>
        let items = ["Apple", "Banana", "Orange", "Mango", "Grapes"];
        function showSuggestions() {
            let input = document.getElementById("searchBox").value.toLowerCase();
            let suggestionBox = document.getElementById("suggestions");
            suggestionBox.innerHTML = "";
            if (input) {
                let matches = items.filter(item => item.toLowerCase().includes(input));
                matches.forEach(match => {
                    let div = document.createElement("div");
                    div.innerHTML = match;
                    div.onclick = () => {
                        document.getElementById("searchBox").value = match;
                        suggestionBox.style.display = "none";
                    };
                    suggestionBox.appendChild(div);
                });
                suggestionBox.style.display = "block";
            } else {
                suggestionBox.style.display = "none";
            }
        }
    </script>
</body>
</html>

Output

Explanation:

Filters and displays suggestions based on user input.
Clicking a suggestion fills the search box.

Example with Submit Button

A search bar with a submit button is one of the most common designs you’ll see on websites. It allows users to type their query into a text box & then click the button to initiate the search. Below, we’ll learn with the help of an example how to create this using HTML.

To start, open your code editor & create a new file named `index.html`. Copy the following code into the file:

<!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 Submit Button</title>  
    <style>  
        body {  
            font-family: Arial, sans-serif;  
            margin: 50px;  
        }  
        .search-container {  
            display: flex;  
            align-items: center;  
        }  
        .search-box {  
            padding: 10px;  
            font-size: 16px;  
            border: 1px solid ccc;  
            border-radius: 4px 0 0 4px;  
            width: 300px;  
        }  
        .search-button {  
            padding: 10px 20px;  
            font-size: 16px;  
            background-color: 007BFF;  
            color: white;  
            border: none;  
            border-radius: 0 4px 4px 0;  
            cursor: pointer;  
        }  
        .search-button:hover {  
            background-color: 0056b3;  
        }  
    </style>  
</head>  
<body>  
    <h1>Search Bar with Submit Button</h1>  
    <div class="search-container">  
        <input type="text" class="search-box" placeholder="Enter your search term...">  
        <button class="search-button">Search</button>  
    </div>  
</body>  
</html>

Output

In this Code:

1. HTML Structure:

The `<input>` tag creates the text box where users can type their queries. The `placeholder` attribute provides a hint about what to enter.
The `<button>` tag adds the submit button next to the text box.

2. CSS Styling:

The `.search-container` uses `display: flex` to align the text box & button horizontally.
The `.search-box` has padding, a border, & rounded corners for better aesthetics.
The `.search-button` is styled with a blue background, white text, & hover effects to make it visually appealing.

3. How It Works:

When a user types something into the text box & clicks the "Search" button, the browser sends the input data to the server (if connected to a backend). For now, this example focuses only on the front-end design.

This setup is beginner-friendly & works well for static websites or prototypes.

Example with Submit Icon

A search bar with a submit icon is another popular design choice. Instead of a traditional button with text, this version uses an icon (like a magnifying glass) to make the interface look cleaner & more modern. Below, we’ll show you how to create this using HTML & CSS.

To begin, open your code editor & create a new file named `search-icon.html`. Copy the following code into the file:

<!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 Submit Icon</title>  
    <style>  
        body {  
            font-family: Arial, sans-serif;  
            margin: 50px;  
        }  
        .search-container {  
            display: flex;  
            align-items: center;  
            position: relative;  
            width: 350px;  
        }  
        .search-box {  
            padding: 10px;  
            font-size: 16px;  
            border: 1px solid ccc;  
            border-radius: 4px;  
            width: 100%;  
            box-sizing: border-box;  
        }  
        .search-icon {  
            position: absolute;  
            right: 10px;  
            top: 50%;  
            transform: translateY(-50%);  
            font-size: 20px;  
            color: 007BFF;  
            cursor: pointer;  
        }  
        .search-icon:hover {  
            color: 0056b3;  
        }  
    </style>  
</head>  
<body>  
    <h1>Search Bar with Submit Icon</h1>  
    <div class="search-container">  
        <input type="text" class="search-box" placeholder="Enter your search term...">  
        <span class="search-icon">&128269;</span>  
    </div>  
</body>  
</html>

Output

In this Code:

1. HTML Structure:

The `<input>` tag creates the text box where users can type their queries.
The `<span>` tag with the class `search-icon` displays the magnifying glass icon. The `&128269;` is a Unicode character for the magnifying glass symbol.

2. CSS Styling:

The `.search-container` uses `position: relative` to allow precise placement of the icon within the container.
The `.search-box` has padding, a border, & rounded corners for better aesthetics.
The `.search-icon` is positioned absolutely within the container, aligned to the right side of the text box. The `transform: translateY(-50%)` ensures the icon is vertically centered.

3. How It Works:

When a user types something into the text box & clicks the magnifying glass icon, the browser can send the input data to the server (if connected to a backend). For now, this example focuses only on the front-end design.

This design is sleek & works well for websites aiming for a minimalist or modern look.

Frequently Asked Questions

How do I make the search bar responsive?

Use CSS media queries to adjust styles for different screen sizes.

Can I connect the search bar to a database?

Yes, using server-side languages like PHP and SQL.

How can I add a search icon?

Use an <i> tag with FontAwesome or an <img> tag inside the button.

Conclusion

In this article, we covered how to create a search bar in HTML using the <input> element with the type="search" attribute. By combining it with CSS for styling and JavaScript for functionality, we can enhance user experience. Understanding how to build a search bar helps in improving website navigation and user interaction efficiently.