關於bootstrap--表單控件（disabled表單禁用、顯示表單驗證的樣式）

1、disabled：

(1)在input中加入disabled可使表單禁用，如圖：

<input class="form-control input-lg" id="disabledInput" type="text" placeholder="表單已被禁用，不可輸入" disabled></div>

(2)如果fieldset設置了disabled屬性，整個域都將處於被禁用狀態,如圖：

<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">禁用的輸入框</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入">
</div>
<div class="form-group">
<label for="disabledSelect">禁用的下拉框</label>
<select id="disabledSelect" class="form-control">
<option>不可選擇</option>
</select>
</div>
</fieldset>

 

2、legend:如果legend中有輸入框的話，這個輸入框是無法被禁用的，如圖：

 <legend><input type="text" class="form-control" placeholder="顯然我顏色變灰了，但是我沒被禁用，不信？單擊試一下" /></legend>

3、表單驗證狀態：加上has-feedback，並且加一個

<span class="glyphiconglyphicon-ok form-control-feedback"></span>

標簽，才會出現小圖標；在<input>下面加上<span class="help-block">來顯示“你們輸入的正確信息”。

<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功狀態</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
<span class="help-block">你輸入的信息是正確的</span>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning1">警告狀態</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態">
<span class="help-block">請輸入正確信息</span>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError1">錯誤狀態</label>
<input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態">
<span class="help-block">你是輸入的信息是錯誤的</span>
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>