CodesBeautify

HTML Search Input Generator

Create a search box with the search landmark, a query parameter and an optional hidden label.

Search box HTMLSearch form (GET)
<form role="search" action="/search" method="get">
  <label for="site-search">Search the site</label>
  <input type="search" id="site-search" name="q" placeholder="Search articles" autocomplete="off" spellcheck="false">
  <button type="submit">Search</button>
</form>
Runs locally in your browser

About the HTML Search Input Generator

A search box is a small form with specific requirements. Setting type="search" gives mobile keyboards a search key and lets some browsers add a clear button inside the field, while role="search" on the form turns the whole block into a landmark that screen reader users can jump straight to. This builder writes both, along with the label, the submit button and the query parameter name your backend expects, which is conventionally q.

Many designs have no room for a visible label. Rather than deleting it, switch on the visually hidden option: the generated CSS keeps the label in the accessibility tree while clipping it to a single pixel, so assistive technology still announces the field. A placeholder is not a substitute, because it disappears at the first keystroke, usually fails contrast checks and is not reliably read out.

The form defaults to GET, which is correct for search, since the query then ends up in the URL and results can be bookmarked, shared and cached. Autocomplete and spellcheck are switched off so the browser does not cover your own suggestion list with old values or underline product names as typos. To escape a term before you build a query string by hand, the URL Encoder does the character work.

How to use

  1. Set the query parameter your search endpoint reads, usually q.
  2. Point the form action at the page that renders results.
  3. Decide whether the label is visible or clipped with the hidden class.
  4. Copy the form and wire the action to your search route.

Common questions

What does role search add?
It marks the form as a search landmark, so assistive technology can list it and move to it without hunting through the page.
Should search use GET or POST?
GET, in almost every case. The term lands in the URL, which makes results shareable, bookmarkable and cacheable.
Is type search different from type text?
Functionally it is close, but it hints at a search key on mobile keyboards and lets browsers offer a clear control.
Can I drop the label entirely?
Better to clip it with the visually hidden class. Removing it leaves screen reader users with an unnamed field.