Ghlyphicons outside form inputs and removing form background

Question

I have a form in bootstrap and I have added glyphicons to the inputs but the glyphicons appear outside the inputs, I tried applying solutions from a similar question but after I do that then the glyphicons disappear.

I also have a nice fullscreen image on the page but when I added the form, its white background covers the part of the image where the form is. I have tried looking for a solution but I just cant find anything, please help.

<style>
body {
margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using    .navbar-static-top. Change if height of navigation changes. */
}

input.transparent-input{
   background-color:transparent !important;
   border:none !important;
}

form, label, p, h3 {
    color: white !important;
}

.full {
background:url(../images/holiday_resort3-1920x1080.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

</style>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
    </div>
</nav>

<form class="form-horizontal">
    <fieldset>

    <!-- Form Name -->
    <legend>Book A Hotel...</legend>

    <!-- Search input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="searchinput">Search</label>
      <div class="col-md-4">
        <input id="searchinput" name="searchinput" type="search" placeholder="" class="form-control input-md">
        <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
      </div>
    </div>

    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="checkindate">Check-in:</label>  
      <div class="col-md-2">
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      <input id="checkindate" name="checkindate" type="text" placeholder="" class="form-control input-md">
      </div>
    </div>

</fieldset>
</form>

<!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

This is what the page looks like

I would like something along these lines instead

Answer 1

you have to add the class .input-group in the div parent of the input and the icon

Html code becomes like this:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
    </div>
</nav>

<form class="form-horizontal">
    <fieldset>

    <!-- Form Name -->
    <legend>Book A Hotel...</legend>

    <!-- Search input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="searchinput">Search</label>

         <div class="input-group col-md-4">

             <input id="searchinput" name="searchinput" type="search" placeholder="" class="form-control input-md">
            <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
        </div>
    </div>


    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="checkindate">Check-in:</label>  
      <div class="input-group col-md-2">
         <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
         <input id="checkindate" name="checkindate" type="text" placeholder="" class="form-control input-md">

        </div>
    </div>



</fieldset>
</form>

Working demo