Adding a Search Box to a Form

You must have noticed on various websites that contain search box on their Web pages however, they mark up with the <input type=”text”> tag to provide a search box on a Web page. These search boxes are mainly used to perform a site search or a Google search. The new <input type=”search”> tag is used to add a search box to a form. This search box behaves similar to a text box. However, when you start typing in the search box, the search box provide hints (one word or short phrases) that with some of the predefined words that you provide in your HTML script.

Let’s do the following steps to add search box:


<!DOTYPE html>
<head>
    <title>Showing the list of values in the search box Field</title>
</head>
<body>
<center>
    <h2>Example of Search box Field </h2>
    <img src=”search.jpg” alt=”search” />
    <form>
        <input type=”search” autofocus list=”vehicles” />
        <datalist id=”vehicles”>
        <option label=”TR” value=”Truck” >
        <option label=”CR” value=”Car” >
        <option label=”ST” value=”Scooter” >
        <option label=”TN” value=”Train” >
        <option label=”CL” value=”Bicycle” >
        </datalist>
    </form>
</center>
</body>
</html>

Save the document with the name AddingSearch.html and open on browser.

Note: in HTML 5, the search input type attribute is not support in Internet Explorer.

PRV MENU NEXT

Adding a Search Box to a Form

Latest Post