I have been experimenting with wrapping my text input fields in labels. While this technique works well with pickers on my form, it seems to cause issues when applied to text boxes. If I choose not to wrap the text boxes, the alignment between the label and text box appears off compared to other wrapped elements.
The following setup does not produce the desired result:
<div class="form-group">
<label>
Title:
<input type="text" class="form-control" data-bind="value: title" />
</label>
</div>
However, this configuration works as expected:
<div class="form-group">
<label>
Date:
<div class="input-group">
<input type="text" class="form-control" placeholder="mm/dd/yy" data-provide="datepicker" data-bind="value :date" id="Date" />
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</label>
</div>
In addition, the content within the text inputs should remain in regular font, without any bold formatting.