How to create search input in html

HtmlHow-ToBeginner · 3 min read

How to Create a Search Input in HTML: Simple Guide

To create a search input in HTML, use the <input> element with the attribute type="search". This creates a text box optimized for search queries, often with built-in clear buttons on some browsers.

📐

Syntax

The basic syntax for a search input uses the <input> tag with type="search". You can add attributes like name to identify the input, placeholder to show a hint, and id for labeling.

type="search": Defines the input as a search box.
name: Identifies the input when submitting a form.
placeholder: Shows a hint inside the box before typing.
id: Links the input to a label for accessibility.

html

<input type="search" name="query" id="search" placeholder="Search here...">

Output

A single-line search input box with placeholder text 'Search here...'

💻

Example

This example shows a complete search input inside a form with a label. The label improves accessibility by describing the input. The placeholder guides the user what to type.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Search Input Example</title>
</head>
<body>
  <form action="/search" method="GET">
    <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">Search</button>
  </form>
</body>
</html>

Output

A search box with label 'Search the site:', a placeholder 'Type your search here...', and a Search button

⚠️

Common Pitfalls

Common mistakes when creating search inputs include:

Using type="text" instead of type="search", which misses browser search features.
Not adding a label or aria-label, which hurts accessibility.
Forgetting the name attribute, so the search query won't be sent in a form.
Not using a placeholder or clear instructions, which can confuse users.

html

<!-- Wrong: missing label and name -->
<input type="search" placeholder="Search">

<!-- Right: with label and name -->
<label for="search">Search:</label>
<input type="search" id="search" name="query" placeholder="Search">

Output

First input: search box without label or name (not accessible, no form data). Second input: labeled and named search box.

📊

Quick Reference

Attribute	Description	Example
type	Defines input type as search
name	Name for form submission
placeholder	Hint text inside input
id	Unique identifier for label
aria-label	Accessibility label if no visible label

✅

Key Takeaways

Use to create a search box with browser support.

Always include a label or aria-label for accessibility.

Add a name attribute to send the search query in forms.

Use placeholder text to guide users on what to search.

Wrap the search input in a form with a submit button for functionality.