使用引导程序，在标签中包装输入文本元素会使输入文本变为粗体而不占用整个宽度

Question

I am trying to wrap my text input with a label. I have some pickers on my form, and wrapping them in a label enables me to click on the label and activate the picker. However, when I try this with the text box it breaks the form. If I choose not to wrap the text boxes, the spacing between the label and the text box is different than the wrapped elements.

This doesn't work:

<div class="form-group">
    <label>
        Title:
        <input  type="text" class="form-control" data-bind="value: title" />
    </label>
</div>

This works:

<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>    

Also, the text inside the text inputs should not be bold.

Answer 1

You want to update your css, changing your label's to either display as block, or set their width to 100%. Then you also want to have input's inside labels set to a font-weight of normal.

label {
    display:block;
}
label input {
    font-weight:normal
}

https://jsfiddle.net/partypete25/95ygubwx/

Answer 2

As an alternative, don't need to wrap elements for activation, you can just use the for attribute:

<label for="title">Title</label>
<input id="title" type="text" class="form-control" data-bind="value: title" />

If you don't want this, then you need to understand cascading styles.

Answer 3

You don't need to wrap input inside label. for attribute of label element is doing the same thing you want to achieve.The correct way to create form control in bootstrap is :

<div class="form-group">
  <label for="title">Title:</label>
    <input type="text" class="form-control" data-bind="value: title" id="title" />      
</div>

Why input not taking full-width and text being bold : Following is the label css applied by bootstrap library.

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

In your case, if you wrap input inside label, input is inhering the font-weight: 700 px; from it's parent(label) and hence bold.

And the parent label's max-width: 100% is restricting the input width. If it could have width: 100% than, input would take full width. There is difference between max-width and width.