A search bar is an important component of a website that allows users to find information quickly. It usually contains a search input field and a search button or icon. Websites use search bars to help visitors find articles, products, tutorials, and other information.
In this tutorial, you will learn how to create a search bar using HTML, CSS, and JavaScript. You will start with a basic search input, style it with CSS, and add JavaScript functionality to search and filter content.
By the end of this tutorial, you will understand how to create a responsive search bar with a search icon, a working button, and dynamic search results.
What Is a Search Bar?
A search bar is a user interface component that accepts a search query and helps users find matching information.
For example, a programming tutorial website might allow visitors to search for HTML, CSS, JavaScript, React, or Python tutorials.
A search bar typically contains these components:
- Search input: Accepts text entered by the user.
- Search button: Submits the search query.
- Search icon: Helps users recognize the search function.
- Search logic: Processes the query and finds matching content.
- Search results: Display the matching information.
A search bar can filter content immediately as users type or display results after they submit a query.
Technologies Required to Create a Search Bar
You can create a search bar using three main web technologies.
HTML
HTML defines the structure of the search bar. It creates the search input, button, form, and results container.
CSS
CSS controls the appearance of the search bar. You can use it to add colors, borders, spacing, rounded corners, hover effects, and responsive layouts.
JavaScript
JavaScript adds functionality to the search bar. It reads the user’s query, checks for matching content, and updates the results dynamically.
Components Used in a Search Bar
Before writing the code, understand the HTML elements and JavaScript methods used in this tutorial.
| Component | Purpose |
|---|---|
<form> | Groups the search input and button |
<input> | Accepts the search query |
<button> | Submits the search |
<label> | Provides an accessible name for the input |
<ul> | Contains a list of search results |
<li> | Represents an individual result |
id | Identifies a specific HTML element |
placeholder | Displays a hint inside an empty input |
addEventListener() | Responds to user interactions |
filter() | Finds items matching a condition |
includes() | Checks whether text contains a query |
Create the HTML Structure
The first step is to create the search bar using HTML.
Create a file named index.html and add the following code.
Understanding the HTML Code
The <form> element groups the input field and search button. Its id allows JavaScript to identify the form.
The <input type="search"> element accepts the text entered by the user. The placeholder attribute displays a helpful hint inside the field.
The <label> element provides an accessible name for the search input. Its for attribute matches the input’s id.
The <button type="submit"> element allows users to submit their search query.
The <ul> element will display matching tutorial titles, while the paragraph with the noResults ID displays a message when nothing matches.
Style the Search Bar Using CSS
Now, create a file named style.css. Add the following CSS to make the search bar clean, modern, and responsive.
Understanding the CSS Properties
The max-width property prevents the search container from becoming too wide on desktop screens.
The display: flex property places the input field and button next to each other.
The flex: 1 property allows the input to occupy the remaining available space.
The :focus-within selector changes the border and adds a highlight when the input receives focus.
The :hover selector changes the button’s background color when the user moves the pointer over it.
The media query adjusts the layout for smaller screens, making the search bar more comfortable to use on mobile devices.
Add Search Functionality Using JavaScript
The HTML and CSS create the search bar’s structure and appearance. JavaScript makes it functional.
Create a file named script.js and add the following code.
Understanding the JavaScript Code
Selecting HTML elements
The getElementById() method selects the form, input, results list, and message using their IDs.
Creating a list of tutorials
The tutorials array contains the tutorial titles that users can search. You can add more titles to this array whenever needed.
Reading the search query
The value property retrieves the text entered by the user. The trim() method removes unnecessary spaces, and toLowerCase() makes the search case-insensitive.
Filtering the tutorials
The filter() method checks each tutorial title against the search query. The includes() method returns true when the title contains the query.
For example, searching for css matches both CSS Selectors and CSS Flexbox.
Displaying the results
The createElement() method creates a new list item for each matching tutorial. The textContent property adds the title, and appendChild() inserts the item into the results list.
Handling form submission
The submit event runs when users click the Search button or submit the form using the keyboard. The preventDefault() method stops the form’s default page navigation.
Searching while typing
The input event runs the search function whenever the input changes. This allows the results to update automatically without requiring the user to click the Search button.
Test the Search Bar
Save all three files in the same folder and open index.html in a browser.
Try these examples:
| Search Query | Expected Results |
|---|---|
HTML | HTML Introduction, HTML Forms |
CSS | CSS Selectors, CSS Flexbox |
JavaScript | JavaScript Functions, JavaScript Events |
React | React Components |
Python | Python Basics |
Java | Java Classes and JavaScript titles containing Java |
The search works with uppercase and lowercase letters. If no tutorial matches the query, the page displays a message.
How to Add a Search Icon
You can add a magnifying glass icon using inline SVG. Place the following code inside the .search-box element, before the input field.
<svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<circle cx="11" cy="11" r="7"></circle>
<path d="m20 20-4-4"></path>
</svg>
Add this CSS to align the icon with the input.
.search-box svg {
flex-shrink: 0;
align-self: center;
margin-left: 8px;
color: #64748b;
}
The SVG draws the magnifying glass using a circle and a line. It does not require an external icon library.
Common Search Bar Mistakes
The search button does not work
Check that the form ID in the HTML matches the ID used in JavaScript. Also verify that the script file is loaded correctly.
No results appear
Check that the query matches the tutorial titles in the array. Remember that the example searches only the predefined titles.
The page reloads after searching
Make sure event.preventDefault() is included in the form submission handler.
The search bar overflows on mobile
Use flex: 1, min-width: 0, and a suitable media query to control the layout.
The search does not find every page on the website
The example searches a JavaScript array, not the entire website. A real website needs its own search index, a backend, or an existing search service.
Frequently Asked Questions
Can I create a search bar using only HTML and CSS?
Yes. HTML and CSS can create and style the search field and button. JavaScript or server-side functionality is needed to filter content dynamically.
How does a search bar work in JavaScript?
JavaScript reads the user’s query, compares it with available content, identifies matching items, and updates the results displayed on the page.
Can I create a search bar without reloading the page?
Yes. You can listen for the form’s submit event, prevent the default submission, and update the results with JavaScript.
Is a search bar responsive by default?
Not necessarily. You should use flexible layouts and CSS media queries to ensure that the search bar works properly on desktop, tablet, and mobile screens.
Can I add a search bar to WordPress?
Yes. WordPress provides built-in search functionality. You can also build a custom search interface and connect it to WordPress search endpoints to retrieve actual posts.