每日一bootstrap 表單

這一篇來到複習一下bootstrap的表單，表單還是比較重要的一部分，學好表單還是很重要的。

表單有幾點還是要注意的，一個是label雖然在網頁上沒什麼太多效果，但對於鼠標用戶非常友好，label可以使我們點擊label設置的文字自動就使光標出現在控件上。試一試就懂了。
在是，最好使用form-group將控件和label包裹在一起，這樣整體的佈局更好看。

form-control自動使表單表單寬度爲100%

<div class="container">
            <div class="row col-md-6">
                <form>
                  <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="email" class="form-control" id="Email" placeholder="Email">
                  </div>
                  <div class="form-group">
                    <label for="Password">Password</label>
                    <input type="password" class="form-control" id="Password" placeholder="Password">
                  </div>
                  <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>
        </div>

<!-- 文字和輸入框水平排列 -->
<form class="form-horizontal">
  <div class="form-group">
    <label for="Email2" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="Email2" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="Password2" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="Password2" placeholder="Password">
    </div>
  </div>
</form>

我們還可以給表單加上校驗顏色，我們經常會通過AJAX來判斷用戶輸入的是否符合要求，我們就可以使用bootstrap提供的校驗狀態

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