Search Form Template

Add powerful search functionality to your site with this clean and modern search form.

This template provides a simple yet elegant search input and button, complete with an SVG icon, that can be easily dropped into any website header, sidebar, or dedicated search page.

Screenshot of a search form with an input field and a search button containing a magnifying glass icon.

Get Source Code → Preview →

About this Search Form

A good search form should be immediately recognizable and easy to use. This template achieves that with a classic combination of a text input and a search button. For clear visual communication, the search button contains a universally understood magnifying glass icon. This icon is an embedded SVG, which means it requires no external images or font libraries, scales perfectly, and can be styled with CSS.

For accessibility, this form correctly uses a visually hidden label to describe the input field to screen reader users, while a placeholder attribute serves as a visual cue for sighted users. The button also includes an aria-label for screen readers, as its content is purely visual.

Features

Icon-driven Design: The embedded SVG icon makes the button's purpose instantly clear.
Accessible: Includes a hidden label and an aria-label for screen reader compatibility.
Clean & Compact: A simple, inline layout that fits easily into navigation bars and headers.
Ready to Customize: The CSS is straightforward and can be easily adapted to your site's color scheme.

Dependencies

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the search form template:

.search-form {
    display: flex; /* Aligns input and button on the same line */
    width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 6px;
    overflow: hidden; /* Ensures child border-radius conforms */
    font-family: sans-serif;
}
.search-form-input {
    flex-grow: 1; /* Makes the input field take up all available space */
    border: 1px solid #ccc;
    padding: 12px 15px;
    font-size: 1rem;
    color: #333;
}
.search-form-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    z-index: 1;
    position: relative;
}

/* Visually-hidden label for accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
.search-form-button {
    background-color: #007bff;
    border: none;
    color: white;
    padding: 12px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}
.search-form-button:hover {
    background-color: #0056b3;
}
.search-form-button svg {
    width: 20px;
    height: 20px;
}
</style>

<div class="search-form-container">
    <form class="search-form" action="#" method="get">
        <label for="search-input" class="sr-only">Search</label>
        <input class="search-form-input" type="search" id="search-input" name="q" placeholder="Search this site...">
        <button class="search-form-button" type="submit" aria-label="Search">
            
            <svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
            </svg>
        </button>
    </form>
</div>

View Output