HTML5 Search Input type

Summary -

In this topic, we described about the Search Input type with detailed example.

The search input type used for creating search fields. A search field acts like a normal textbox, but in a few browsers like Apple Safari and Google Chrome, as shortly as we begin typing in a search box a little cross seems on the right side of the text box that lets speedily clear the search text box.

Syntax -

<input type="search" name="search">

Example -

Below example explains how to making search fields.

<!DOCTYPE html>
<html lang="en">
   <head>
     <title>Search Input Type</title>
       <script> 
          function getValue() { 
          var term = document.getElementById("mysearch").value;
          alert(term);
          }
       </script>
   </head>
   <body>
      <form>
         <label for="mysearch">Search Website:</label>
         <input type="search" id="mysearch" placeholder="Type....">
         <button type="button" onclick="getValue();">Get Value</button>
      </form>
   </body> 
</html>

Output-

Note! The search input (i.e. type="search") is backed by the whole main web browsers such as Opera, Safari, Firefox, Chrome, Internet Explorer 10 and above.

Browser Support

The following browsers and corresponding versions in the table that completely supports the search type.

Input Type	Chrome	Edge	Firefox	Safari	Opera
Type="search"	26.0	10.0	4.0	5.1	12.1