Create a Search Bar using HTML and CSS

18 May, 2022
To create a search bar in the navigation bar is easy, just like creating another option in the navbar that will search the database. You need to be careful about the timing of placing the search bar. Make sure separately placed in the navbar. To create a navbar containing a search bar you will need HTML and CSS. The below explanation will guide you stepwise on how to create a search bar. This article contains 2 sections in the first section we will attach the CDN link for icon and will make a basic structure. The second section will design the navbar and the search bar in it.
Creating Structure: In this section, we will just create the basic site structure and also attach the CDN link of the Font-Awesome for the icons which will be used as a search icon in the bar. 
CDN links for the Icons from the Font Awesome:  
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
HTML code: The HTML code is used to create a structure of navigation bar containing search bar. Since it does not contain CSS so it is just a simple structure. We will use some CSS property to make it attractive.  
html
<!DOCTYPE html><html> <head>    <title>        Create a Search Bar using HTML and CSS    </title>    <meta name="viewport"        content="width=device-width, initial-scale=1"></head> <body>         <!-- Navbar items -->    <div id="navlist">        <a href="#">Home</a>        <a href="#">Our Products</a>        <a href="#">Careers</a>        <a href="#">About Us</a>        <a href="#">Contact Us</a>                 <!-- search bar right align -->        <div class="search">            <form action="#">                <input type="text"                    placeholder=" Search Courses"                    name="search">                <button>                    <i class="fa fa-search"                        style="font-size: 18px;">                    </i>                </button>            </form>        </div>    </div>         <!-- logo with tag -->    <div class="content">        <h1 style="color:green; padding-top:40px;">            GeeksforGeeks        </h1>                 <b>            A Computer Science            Portal for Geeks        </b>                   <p>            How many times were you frustrated while            looking out for a good collection of            programming/algorithm/interview questions?            What did you expect and what did you get?            This portal has been created to provide            well written, well thought and well            explained solutions for selected questions.        </p>      </div></body> </html>              
Designing Structure: In the previous section, we created the structure of the basic site where we are going to use the Navigation bar with the search bar with the icon. We will design the structure and attach the icons for each navbar.  
CSS code: CSS code is used to make the attractive website. This CSS property is used to make the style on navigation bar containing search bar . 
html
<style>             /* styling navlist */    #navlist {        background-color: #0074D9;        position: absolute;        width: 100%;    }             /* styling navlist anchor element */    #navlist a {        float:left;        display: block;        color: #f2f2f2;        text-align: center;        padding: 12px;        text-decoration: none;        font-size: 15px;    }         .navlist-right{        float:right;    }     /* hover effect of navlist anchor element */    #navlist a:hover {        background-color: #ddd;        color: black;    }             /* styling search bar */    .search input[type=text]{        width:300px;        height:25px;        border-radius:25px;        border: none;    }             .search{        float:right;        margin:7px;    }             .search button{        background-color: #0074D9;        color: #f2f2f2;        float: right;        padding: 5px 10px;        margin-right: 16px;        font-size: 12px;        border: none;        cursor: pointer;    }</style>
Combining HTML and CSS Code: This is the final code that is the combination of the above two sections. It will be displaying the navigation bar containing search bar.  
html
<!DOCTYPE html><html> <head>    <title>        Create a Search Bar using HTML and CSS    </title>         <meta name="viewport"        content="width=device-width, initial-scale=1">         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">     <style>                 /* styling navlist */        #navlist {            background-color: #0074D9;            position: absolute;            width: 100%;        }                 /* styling navlist anchor element */        #navlist a {            float:left;            display: block;            color: #f2f2f2;            text-align: center;            padding: 12px;            text-decoration: none;            font-size: 15px;        }        .navlist-right{            float:right;        }         /* hover effect of navlist anchor element */        #navlist a:hover {            background-color: #ddd;            color: black;        }                 /* styling search bar */        .search input[type=text]{            width:300px;            height:25px;            border-radius:25px;            border: none;         }                 .search{            float:right;            margin:7px;         }                 .search button{            background-color: #0074D9;            color: #f2f2f2;            float: right;            padding: 5px 10px;            margin-right: 16px;            font-size: 12px;            border: none;            cursor: pointer;        }    </style></head> <body>         <!-- Navbar items -->    <div id="navlist">        <a href="#">Home</a>        <a href="#">Our Products</a>        <a href="#">Careers</a>        <a href="#">About Us</a>        <a href="#">Contact Us</a>                 <!-- search bar right align -->        <div class="search">                         <form action="#">                <input type="text"                    placeholder=" Search Courses"                    name="search">                <button>                    <i class="fa fa-search"                        style="font-size: 18px;">                    </i>                </button>            </form>        </div>    </div>         <!-- logo with tag -->    <div class="content">        <h1 style="color:green; padding-top:40px;">            GeeksforGeeks        </h1>                 <b>            A Computer Science            Portal for Geeks        </b>                   <p>            How many times were you frustrated while            looking out for a good collection of            programming/algorithm/interview questions?            What did you expect and what did you get?            This portal has been created to provide            well written, well thought and well            explained solutions for selected questions.        </p>      </div></body> </html>                
Output: 
HTML and CSS both are foundation of webpages. HTML is used for webpage development by structuring websites, web apps and CSS used for styling websites and webapps. You can learn more about HTML and CSS from the links given below:
HTML Tutorial and HTML Examples
CSS Tutorial and CSS Examples
arorakashish0911
hardikkoriintern
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property