Inputs are used to gather short text responses from a user. A non-editable text boxes can serve the purpose of simply displaying text.
There are four main stylizations for a text input box: normal, disabled, required and error. In most cases a normal input box is the default style. A disabled text input box is used if the field should be viewed but cannot be edited. The required text input box is used when the field is required to be filled in. The error text input box is visible when text input is a required action and the wrong data is entered or data is missing all together.
Not all text inputs are required to have placeholder text. It should be used to better describe the input required if a label does not accompany it or it can add value to what the label is describing.
<div class="form-group">
<label for="field1" class="control-label col-sm-3">Normal</label>
<span class="col-sm-9 form-field">
<input id="field1" class="col-sm-9 form-control" type="text" placeholder="Placeholder Text" name="field1" />
</span>
</div>
<div class="form-group">
<label for="field2" class="control-label col-sm-3">Value Entered</label>
<span class="col-sm-9 form-field">
<input value="Value Entered" id="field2" class="form-control" type="text" placeholder="Placeholder Text" name="field2"/>
</span>
</div>
<div class="form-group">
<label for="field3" class="control-label col-sm-3">Disabled</label>
<span class="col-sm-9 form-field">
<input id="field3" placeholder="Placeholder Text" name="field3" value="Value Entered" class="form-control" type="text" disabled="disabled">
</span>
</div>
<div class="form-submitted">
<div class="form-group has-error">
<label for="field4" class="control-label col-sm-3">Invalid/Error</label>
<span class="col-sm-9 form-field">
<input id="field4" aria-describedby="field4_invalidmessage" placeholder="Placeholder Text" name="field4" aria-invalid="true" value="Value Entered" class="form-control" type="text">
<span id="field4_invalidmessage" class="help-block">The value entered is incorrect</span>
</span>
</div>
</div>
<div class="form-submitted">
<div class="form-group is-required">
<label for="field5" class="control-label col-sm-3">
<span class="required-marker"></span>Required
</label>
<span class="col-sm-9 form-field">
<input id="field5" placeholder="Placeholder Text" name="field5" class="form-control" required="required" type="text" aria-required="true">
</span>
</div>
</div>
<div class="form-group is-prefilled">
<label for="field7" class="control-label col-sm-4">
<span class="required-marker"></span>
Required - previously filled
</label>
<span class="col-sm-8 form-field">
<input id="field7" placeholder="Placeholder Text" name="field7" value="Value Entered" class="form-control" required="required" type="text" aria-required="true">
</span>
</div>