HTML Search Input

HTML search inputs allow users to enter search terms into a web form. They are commonly used on websites, blogs, online stores, documentation portals, and web applications. HTML provides the <input type="search"> element to create a field specifically designed for search queries.

What Is an HTML Search Input?

An HTML search input is a form control that allows users to type keywords, phrases, or other search terms. Depending on the browser, it may include a clear button that lets users remove the entered text quickly.

For example, a tutorial website can use a search field to help visitors find articles about HTML, CSS, JavaScript, and other technologies.

To understand form controls, explore HTML Input and HTML Input Types.

HTML Search Input Example

The following example demonstrates how to create a simple search form.

<form action="/search" method="get">
  <label for="search">Search Articles:</label>

  <input
    type="search"
    id="search"
    name="q"
    placeholder="Enter keywords"
    required
  >

  <button type="submit">Search</button>
</form>

In this example:

• <input type="search"> creates the search field.
• id="search" identifies the input element.
• name="q" defines the query parameter submitted with the form.
• placeholder displays a hint inside the field.
• required prevents submission when the field is empty.
• action="/search" specifies the example URL that receives the search request.

The /search endpoint must be implemented by the website to process the submitted query.

Important Attributes of HTML Search Input

HTML search inputs support several useful attributes.

• placeholder displays a short hint.
• name identifies the submitted search value.
• required makes the field mandatory.
• minlength specifies the minimum number of characters.
• maxlength limits the number of characters.
• autocomplete controls browser autocomplete behavior.

For example:

<label for="site-search">Find a Tutorial:</label>

<input
  type="search"
  id="site-search"
  name="q"
  placeholder="Search tutorials..."
  minlength="2"
  maxlength="100"
  autocomplete="off"
>

This example accepts search terms between 2 and 100 characters under normal browser validation. The autocomplete="off" attribute requests that the browser not provide autocomplete suggestions, although browser behavior can vary.

Learn more about HTML Form Attributes and the HTML Required Attribute.

Creating a Search Field with JavaScript

JavaScript can respond when users type into a search input. The following example displays the entered search term on the page.

<label for="query">Search:</label>
<input type="search" id="query" placeholder="Type something">

<p>Search term: <span id="result">Nothing entered</span></p>

<script>
  const searchInput = document.getElementById("query");
  const result = document.getElementById("result");

  searchInput.addEventListener("input", function () {
    result.textContent = searchInput.value || "Nothing entered";
  });
</script>

When users type or clear the field, the displayed text updates immediately. This example demonstrates input handling; it does not search a real database or filter website articles.

Styling HTML Search Inputs with CSS

CSS can make a search field fit your website’s design.

<style>
  input[type="search"] {
    width: 100%;
    max-width: 400px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
  }

  input[type="search"]:focus {
    border-color: #007bff;
    outline: 2px solid #cce5ff;
  }
</style>

The field expands up to 400 pixels, while the focus style helps users identify the active input.

HTML Search Input vs Text Input

Both search and text inputs accept text. However, type="search" communicates that the field is intended for search queries and may provide browser-specific search controls. A regular text input is designed for general text entry.

Use a search input for website search bars and a text input for fields such as names or other general information.

Frequently Asked Questions

Does an HTML search input search a website automatically?

No. It collects search terms. A server-side endpoint or JavaScript search function must process those terms to find matching content.

Can I add a search button?

Yes. Place a button with type="submit" inside the form to let users submit their search.

Can I clear the search field?

Yes. Users can delete the text manually, and some browsers provide a built-in clear control for search inputs.

Is HTML search input mobile-friendly?

Yes. It works on mobile browsers, and its layout can be adapted with CSS to fit smaller screens.