Incorporating an input or a textarea within a label and presenting it inline in a Bootstrap 3 styled form has been a challenge for me. Though the code snippet provided below is merely a sample, my original implementation is more intricate. I aim to ensure that these elements align seamlessly with the rest of the form components.
Take a look at a Bootply example.
My endeavors to unify the appearance of the label, input, and textarea with Bootstrap form styles have proven futile. I attempted integrating the control-label and form-control classes but to no avail.
How do I render the input field labeled as answer1 and the textarea labeled answer2 to mirror the Bootstrap aesthetics observed in labels such as Name and Id while ensuring they are horizontally aligned with their respective labels?
Code:
HTML
<form class="form-horizontal padding-md" id="form1">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<label class="control-label col-xs-5 col-sm-4 col-md-3" for="sName">Name</label>
<div class="controls col-xs-7 col-sm-8 col-md-9"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Name of the student."></span>
<input type="text" id="sName" name="Name" class="form-control" placeholder="Enter Name">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<label class="control-label col-xs-4 col-sm-3 col-md-3" for="sId">Id</label>
<div class="controls col-xs-8 col-sm-9 col-md-9"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Id of the student."></span>
<input type="text" id="sId" name="Id" class="form-control" placeholder="Enter Id">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label col-xs-3 col-sm-2 col-md-1" for="answer1">1.</label>
<div class="controls col-xs-9 col-sm-10 col-md-11"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Answer for first question."></span>
<div class="inline">[<div class="sname">Student</div>'s answer: "<input type="text" id="answer1" name="Answer1" placeholder="Enter Answer">"]</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label col-xs-3 col-sm-2 col-md-1" for="answer2">2.</label>
<div class="controls col-xs-9 col-sm-10 col-md-11"> <span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Answer for second question."></span>
<div class="inline">[<div class="sname">Student</div>'s answer: "<textarea id="answer2" name="Answer2" placeholder="Enter Answer"></textarea>"]</div>
</div>
</div>
</div>
<div class="row pull-right">
<button type="submit" class="btn btn-primary" id="submitAnswers">Submit Answers</button>
</div>
</form>
JavaScript
$('#sName').on('input', function() {
$('.sname').html($('#sName').val()?$('#sName').val():"Student");
});
CSS
.help {
position:absolute;
right:-5px;
top:8px;
}
.inline {
display:inline-block;
width:100%;
}
.sname {
display:inline;
}
.padding-md {
padding: 25px;
}