How to create search bar in html

HtmlHow-ToBeginner · 3 min read

How to Create a Search Bar in HTML: Simple Guide

To create a search bar in HTML, use the <input> element with type="search" inside a <form>. This creates a text box where users can type their search query and submit it.

📐

Syntax

The basic syntax for a search bar uses the <form> element to wrap an <input> of type search. The name attribute identifies the input, and the placeholder shows a hint inside the box.

<form>: Defines the area for the search input and submission.
<input type="search">: Creates the search box.
name: Gives the input a name for form data.
placeholder: Shows a light text hint inside the box.
<button>: Optional, to submit the form.

html

<form action="/search">
  <input type="search" name="query" placeholder="Search...">
  <button type="submit">Search</button>
</form>

Output

A text box labeled 'Search...' with a button labeled 'Search' next to it.

💻

Example

This example shows a simple search bar that lets users type a query and submit it. The form sends the search data to the URL specified in action.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Search Bar</title>
</head>
<body>
  <form action="/search-results">
    <label for="site-search">Search the site:</label>
    <input type="search" id="site-search" name="q" placeholder="Type your search here..." aria-label="Search through site content">
    <button type="submit">Go</button>
  </form>
</body>
</html>

Output

A labeled search box with placeholder text and a 'Go' button that submits the form.

⚠️

Common Pitfalls

Common mistakes when creating search bars include:

Not wrapping the <input> inside a <form>, so the search cannot be submitted.
Missing the name attribute, which means the search query won't be sent.
Using type="text" instead of type="search", which loses some browser search input features.
Not adding a label or aria-label for accessibility.

html

<!-- Wrong: input outside form and no name -->
<input type="search" placeholder="Search...">

<!-- Right: input inside form with name and label -->
<form action="/search">
  <label for="search-input">Search:</label>
  <input type="search" id="search-input" name="query" placeholder="Search...">
  <button type="submit">Search</button>
</form>

Output

The first input alone does not submit data; the second form works correctly with label and submission.

📊

Quick Reference

Tips for creating effective search bars:

Always use <form> to enable submission.
Use type="search" for better user experience.
Include name attribute to send data.
Add label or aria-label for accessibility.
Use placeholder to guide users.

✅

Key Takeaways

Use <input type="search"> inside a <form> to create a search bar.

Always include a name attribute on the input to send the search query.

Add a label or aria-label for accessibility.

Use placeholder to show helpful text inside the search box.

Wrap the input and button in a form so users can submit their search.