HTML input type="search"

HTML input type="search" is a useful form input element that allows users to search for content within a website or web application. This input type provides a built-in search field that can be customized using various attributes, such as placeholder text, autocomplete, and more. In this article, we'll explore how to use input type="search" in HTML and provide some code snippets as examples.

<input type="search" placeholder="Search..." autocomplete="on">
<input type="search" placeholder="Search..." results="5">
<input type="search" placeholder="Search..." autofocus>

In the above code snippet, we have used the input element with the type attribute set to "search". Additionally, we have added a placeholder attribute that displays the text "Search..." inside the search field. The autocomplete attribute is enabled for autocomplete suggestions in the search field.

While input type="search" provides built-in functionality, you can use JavaScript to further enhance your search field's functionality. For example, you can add a clear button to the field that allows users to clear their search query.

<input type="search" name="search-query" placeholder="Search..." id="search-field">
<button id="clear-btn">Clear</button>

<script>
const searchField = document.getElementById('search-field');
const clearBtn = document.getElementById('clear-btn');

clearBtn.addEventListener('click', () => {
  searchField.value = '';
});
</script>