## 焦點狀態 我們將某些表單控件的默認`outline`樣式移除，然后對`:focus`狀態賦予`box-shadow`屬性。  ## 禁用狀態 為輸入框設置`disabled`屬性可以禁止其與用戶有任何交互（焦點、輸入等）。被禁用的輸入框顏色更淺，并且還添加了`not-allowed`鼠標狀態。  ~~~html <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> ~~~ ### 被禁用的`fieldset` 為`<fieldset>`設置`disabled`屬性,可以禁用`<fieldset>`中包含的所有控件。 #### `<a>`標簽的鏈接功能不受影響 默認情況下，瀏覽器會將`<fieldset disabled>`內所有的原生的表單控件（`<input>`、`<select>`和`<button>`元素）設置為禁用狀態，防止鍵盤和鼠標與他們交互。然而，如果表單中還包含`<a ... class="btn btn-*">`元素，這些元素將只被賦予`pointer-events: none`屬性。正如在關于[禁用狀態的按鈕](https://v3.bootcss.com/css/#buttons-disabled)章節中（尤其是關于錨點元素的子章節中）所描述的那樣，該 CSS 屬性尚不規范，并且在 Opera 18 及更低版本的瀏覽器或 Internet Explorer 11 總沒有得到全面支持，并且不會阻止鍵盤用戶能夠獲取焦點或激活這些鏈接。所以為了安全起見，建議使用自定義 JavaScript 來禁用這些鏈接。 #### 跨瀏覽器兼容性 雖然 Bootstrap 會將這些樣式應用到所有瀏覽器上，Internet Explorer 11 及以下瀏覽器中的`<fieldset>`元素并不完全支持`disabled`屬性。因此建議在這些瀏覽器上通過 JavaScript 代碼來禁用`<fieldset>`。  ~~~html <form> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput">Disabled input</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> </div> <div class="form-group"> <label for="disabledSelect">Disabled select menu</label> <select id="disabledSelect" class="form-control"> <option>Disabled select</option> </select> </div> <div class="checkbox"> <label> <input type="checkbox"> Can't check this </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </fieldset> </form> ~~~ ## 只讀狀態 為輸入框設置`readonly`屬性可以禁止用戶修改輸入框中的內容。處于只讀狀態的輸入框顏色更淺（就像被禁用的輸入框一樣），但是仍然保留標準的鼠標狀態。  ## 校驗狀態 Bootstrap 對表單控件的校驗狀態，如 error、warning 和 success 狀態，都定義了樣式。使用時，添加`.has-warning`、`.has-error`或`.has-success`類到這些控件的父元素即可。任何包含在此元素之內的`.control-label`、`.form-control`和`.help-block`元素都將接受這些校驗狀態的樣式。 #### 將驗證狀態傳達給輔助設備和盲人用戶 使用這些校驗樣式只是為表單控件提供一個可視的、基于色彩的提示，但是并不能將這種提示信息傳達給使用輔助設備的用戶 - 例如屏幕閱讀器 - 或者色盲用戶。 為了確保所有用戶都能獲取正確信息，Bootstrap 還提供了另一種提示方式。例如，你可以在表單控件的`<label>`標簽上以文本的形式顯示提示信息（就像下面代碼中所展示的）；包含一個[Glyphicon 字體圖標](https://v3.bootcss.com/components/#glyphicons)（還有賦予`.sr-only`類的文本信息 - 參考[Glyphicon 字體圖標實例](https://v3.bootcss.com/components/#glyphicons-examples)）；或者提供一個額外的[輔助信息](https://v3.bootcss.com/css/#forms-help-text)塊。另外，對于使用輔助設備的用戶，無效的表單控件還可以賦予一個`aria-invalid="true"`屬性。  ~~~html <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">Input with success</label> <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2"> <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">Input with warning</label> <input type="text" class="form-control" id="inputWarning1"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError1">Input with error</label> <input type="text" class="form-control" id="inputError1"> </div> <div class="has-success"> <div class="checkbox"> <label> <input type="checkbox" id="checkboxSuccess" value="option1"> Checkbox with success </label> </div> </div> <div class="has-warning"> <div class="checkbox"> <label> <input type="checkbox" id="checkboxWarning" value="option1"> Checkbox with warning </label> </div> </div> <div class="has-error"> <div class="checkbox"> <label> <input type="checkbox" id="checkboxError" value="option1"> Checkbox with error </label> </div> </div> ~~~