Glyphicons in input field

Question

How to put glyphicons in input field? I tried a couple solutions but nothing work properly, the glyphicons of "ok" and "remove" shows up outside of input anyway. HTML:

<div class="modal-body">
            @using (Html.BeginForm("SetOneTimeDeliveryAddress", "Orders", FormMethod.Post, new { Name = "OneTimeDelivery", id = "OneTimeDelivery" }))
            {

                <div class="form-group">
                    <div>
                    <label>Nazwa:</label>
                <div>@Html.TextBoxFor(Model => Model.NazwaPelna, new { Name = "NazwaPelna", id = "Nazwa", @class = "form-control" })</div>
                </div>
                    </div>

JavaScript:

},
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            $(element).closest('.form-group').find('[class^="glyphicon"]').remove();
            $(element).closest('.form-group > div > div').append('<span class="glyphicon glyphicon-remove form-control-feedback" ' + 'aria-hidden = "true"' + ' id="statushigh">');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            $(element).closest('.form-group').find('[class^="glyphicon"]').remove();
            $(element).closest('.form-group > div > div').append('<span class="glyphicon glyphicon-ok form-control-feedback"' + ' aria-hidden="true" ' + 'id="statussun">');
        },
        success: function (element) {
            $(element).closest('.form-group').addClass('valid').closest('.control-group').removeClass('error').addClass('success');
        },

And the effect of that:

Answer 1

<form>
<div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  <input id="email" type="text" class="form-control" name="email" placeholder="Email">
</div>