/Html/How to create a search bar like google in html

How to create a search bar like google in html

Add google search bar to our website in html

<form action="https://www.google.com/search" method="get" target="_blank" id="search-form">
                <input name="q" type="text" placeholder="search..." autocomplete="off" autofocus>
                
              </form>

How to create a search bar like google in html

<!DOCTYPE html>
<html>
<head>
<style>
.searchbar{
    margin-top:25px;
   margin-left:283px;
   width:100%;
}
.bar{
    border-radius:0;
    -webkit-box-shadow: 2px 3px 0px -2px #ccc;
    padding:10px;
    border:0px;
    outline: none;
    border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #CCC;
}
.bar:hover{
    -webkit-box-shadow: 3px 6px 7px -3px #ccc;
}
</style>
</head>
<body>
                <div class="container">
        <div class="row">
            <div class="col-md-12 col-xs-12">
                <div class="searchbar">
                    <div class="form-group ">
                        <input type="text" class="bar" style="width:588px; height:44px; outline:none;" class="form-control" >
                         <a href="#"><i style="margin-left:559px; top:-30px; "class="glyphicon glyphicon-search"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Source: stackoverflow.com

Similar codes

42 votes248 views1 answer
HTML Links - Hyperlinks
Html
0 vote224 views1 answer
How to change mouse into hand icon when you hover over something in html
Html
74 votes238 views6 answers
Html media query
Html
39 votes227 views1 answer
How to make a link in hml
Html
4 votes232 views2 answers
ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.
Html
0 vote219 views1 answer
Dynamic colspan in angular
Html
4 votes236 views1 answer
How to align photos center html
Html
1 vote234 views1 answer
Line break not working html
Html
1 vote245 views1 answer
Description list html
Html
0 vote247 views1 answer
When i add img on html then it just show me the image icon not image solution
Html