Bootstrap學習之四：表單

@(Bootstrap)[網頁] ##導言

關於表單的應用天然不須要多說，只要您的的網站能夠用戶登陸，那麼不可能不用到表單！表單主要功能是用來與用戶作交流的一個網頁控件，JavaScript發明之初最大的做用也就是用來進行表單操做。因此表單是每個前端開發者必需要熟練掌握的東西。

[toc]

##1.基礎表單 表單控件會被自動賦予全局樣式，設置了foem-control類的的input,textarea,select元素都被默認設置寬度屬性width：100%。 將 label 元素和前面提到的控件包裹在 .form-group 中能夠得到最好的排列。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">郵箱：</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="快輸入郵箱地址，否則我打你了">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密碼：</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="請輸入密碼，放心我會偷看的">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

<form> <div class="form-group"> <label for="exampleInputEmail1">郵箱：</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="快輸入郵箱地址，否則我打你了"> </div> <div class="form-group"> <label for="exampleInputPassword1">密碼：</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="請輸入密碼，放心我會偷看的"> </div> <div class="form-group"> <label for="exampleInputFile">File `input`</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>

直接在MarkDown放代碼顯示，輸入框的提示沒有顯示出來，在html文檔中編輯會顯示出來

##2.內聯表單 爲 <form> 元素添加 .form-inline 類可以使其內容左對齊而且表現爲 inline-block 級別的控件。只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單摺疊）。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

顯示效果以下

3.水平表單

Bootstrap框架默認的表單是 垂直顯示風格 ，除了上面的內聯表達以外，不少時候咱們須要的是 水平表單風格 。在Bootstrap框架中要實現水平表單效果，必須知足如下兩個條件：

在 <form> 元素是使用類名 .form-horizontal ，做用以下： 設置表單控件padding和margin值。 改變「form-group」的表現形式，相似於柵格系統的「row」。 配合Bootstrap框架的柵格系統。 例如：使用 <div class="col-sm-6"></div> 將咱們的input進行包裹

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">我是密碼</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <`input` type="checkbox"> 不記住我你就死定了
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">登錄</button>
    </div>
  </div>
</form>

<form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">郵箱</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">我是密碼</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <`input` type="checkbox"> 不記住我你就死定了 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登錄</button> </div> </div> </form>

##4.輸入框 包括大部分表單控件、文本輸入域控件，還支持全部 HTML5 類型的輸入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。 實例：

<input type="text" class="form-control" placeholder="Text input">

<input type="text" class="form-control" placeholder="Text input"> ##5.文本域 文本域和原始使用方法同樣，設置 rows可定義其高度 ，設置 cols能夠設置其寬度 。但若是textarea元素中添加了類名 form-control 類名，則無需設置cols屬性。由於Bootstrap框架中的 form-control 樣式的表單控件寬度爲100%或auto。

<textarea class="form-control" rows="3"></textarea>

6.多選框和單選框

Bootstrap對於這兩個按鈕進行了一些優化，要想達到最佳顯示效果，有着以下說明：

無論是 checkbox 仍是 radio 都使用 label 包起來了。 checkbox 按鈕連同 label 標籤放置在一個名爲 .checkbox 的容器內， radio 連同 label 標籤放置在一個名爲 .radio 的容器內。 在Bootstrap框架中，主要藉助 .checkbox 和 .radio 樣式，來處理複選框、單選按鈕與標籤的對齊方式。 只須要將 checkbox 換成 checkbox-inline 就能夠了，你能夠添加在label上也能夠添加在外部的容器上。 ##7.靜態控件 在水平佈局的表單中，若是須要將一行純文本放置於label的同一行，爲< p>元素添加.form-control-static便可。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

##8.禁用狀態 爲輸入框設置 disabled 屬性能夠禁止其與用戶有任何交互（焦點、輸入等）。被禁用的輸入框顏色更淺，而且還添加了 not-allowed 鼠標狀態。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

##9.校驗狀態 Bootstrap對錶單控件的校驗狀態，如error、warning和success狀態，都定義了樣式。使用時，添加.has-warning、.has-error或.has-success到這些控件的父元素便可。任何包含在此元素以內的.control-label、.form-control和.help-block都將接受這些校驗狀態的樣式。

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError">Input with error</label>
  <input type="text" class="form-control" id="inputError">
</div>

<div class="form-group has-success"> <label class="control-label" for="inputSuccess">Input with success</label> <input type="text" class="form-control" id="inputSuccess"> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning">Input with warning</label> <input type="text" class="form-control" id="inputWarning"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError">Input with error</label> <input type="text" class="form-control" id="inputError"> </div> ## 10.高度尺寸 經過.input-lg之類的class能夠爲控件設置高度，經過.col-lg-*之類的class能夠爲控件設置寬度。 建立大一些或小一些的表單控件以匹配按鈕尺寸。

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

<input class="form-control input-lg" type="text" placeholder=".input-lg"> <input class="form-control" type="text" placeholder="Default input"> <input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select> <select class="form-control">...</select> <select class="form-control input-sm">...</select>

參考： Bootstrap官方文檔 推酷文章