search icon with form element inside input box - html

Question

I am trying to add search image inside search box with form element.
My code is
<div class="col-xs-9">
<form action="search">
<input class="form-control" type="search" />
<span class="glyphicon glyphicon-search"></span>
<button type="submit" class="btn"><i class="glyphicon glyphicon-search"></i>
</button>
</form>
</div>
I want when user click on the search image inside search box form action should call
code is http://jsfiddle.net/chetfarley/WK3Q6/1/
Trying code from https://stackoverflow.com/a/19918345/876739

Answer 1

You can do it like this:
HTML:
<div class="col-xs-9">
<input class="form-control" type="search" />
<button type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
CSS:
.form-control + button {
position: absolute;
right: 20px;
top: 7px;
border: 0;
background-color: transparent;
box-shadow: none;
}
And a little event listener, you won't need if you just want the form to be submited:
document.getElementsByTagName("button")[0].addEventListener("click", function(){
alert("doing");
});
Here is the demo: http://jsfiddle.net/WK3Q6/275/