第二十三谈：表单

本节课我们来开始学习 Bootstrap 的提供表单组件样式功能，在这里我们分为两部分来完成。

一．表单构建（上）

1. 使用.form-control、form-check-input 构建一个登录页面；

      <form action="">
          <div class="form-group">
              <label for="email">请输入邮件地址：</label>
              <input type="text" id="email" class="form-control">
          </div>
          <div class="form-group">
              <label for="password">请输入密码：</label>
              <input type="text" id="password" class="form-control">
          </div>
          <div class="form-check">
              <input type="checkbox" id="check" class="form-check-input">
              <label for="check">是否保存</label>
          </div>
      </form>

2. 表单控件中<input>、<textarea>、<select>统一采用.form-control；

      <div class="form-group">
          <label for="city">请选择去过的城市：</label>
          <select multiple name="city" id="city" class="form-control">
              <option value="1">上海</option>
              <option value="1">北京</option>
              <option value="1">深圳</option>
          </select>
      </div>
      <div class="form-group">
          <label for="info">详解资料：</label>
          <textarea name="info" id="info" class="form-control" cols="30" rows="10"></textarea>
      </div>

3. 对于 file 上传控件，单独使用.form-control-file 样式；

      <div class="form-group">
          <label for="file">上传：</label>
          <input type="file" id="file" class="form-control-file">
      </div>

4. .form-control-sm(xl,lg)支持放大和缩小操作；

      <input type="text" id="email" class="form-control form-control-lg">
      <input type="text" id="password" class="form-control form-control-sm">

5. 使用.form-control-plaintext 和只读属性 readonly 实现只读效果；
6. 使用栅格布局，再使用 label 元素下的.col-form-label 实现对齐；

      <div class="form-group row">
          <label for="email" class="col-4 col-form-label">请输入邮件地址：</label>
          <input type="text" id="email" value="bnbbs@163.com" class="col-8 form-control-plaintext">
      </div>

7. 使用.form-control-range 构建一个输入范围；

      <input type="range" class="form-control-range">

8. 使用.form-check 系列样式设计复选框和单选框；

      <form action="">
          <div class="form-check">
              <input type="checkbox" class="form-control-input" id="check">
              <label for="check" class="form-check-label">复选框</label>
          </div>
          <div class="form-check">
              <input type="radio" class="form-control-input" id="radio">
              <label for="radio" class="form-check-label">单选框</label>
          </div>
      </form>

9. 使用.form-check-inline 实现单选框和复选框水平排列；

      <form action="" class="form-check-inline">

一．表单构建（下）

1. 使用.form-row 构建一个响应式布局的表单，并使用谷歌和 opera 测试；

      <form action="" class="form-row">
          <div class="form-group col-sm-6">
              <label for="user">用户名：</label>
              <input type="text" id="user" placeholder="用户名" class="form-control">
          </div>
          <div class="form-group col-sm-6">
              <label for="password">密码：</label>
              <input type="password" id="password" placeholder="密码" class="form-control">
          </div>
          <div class="form-group col-sm-12">
              <label for="address">收货地址：</label>
              <input type="text" id="address" placeholder="收货地址" class="form-control">
          </div>
          <div class="form-group col-sm-4">
              <label for="state">国家：</label>
              <select name="" id="state" class="form-control">
                  <option value="1">中国</option>
                  <option value="2">其它</option>
              </select>
          </div>
          <div class="form-group col-sm-4">
              <label for="city">城市：</label>
              <select name="" id="city" class="form-control">
                  <option value="1">北京</option>
                  <option value="2">上海</option>
              </select>
          </div>
          <div class="form-group col-sm-4">
              <label for="zip">邮编：</label>
              <input type="text" id="zip" placeholder="邮编" class="form-control">
          </div>
      </form>

2. 在邮箱控件左侧增加一个提示标识，使用.input-group 等样式；

      <div class="form-group col-sm-6">
          <label for="email">邮箱：</label>
          <div class="input-group">
              <div class="input-group-prepend">
                  <span class="input-group-text">@</span>
              </div>
              <input type="text" id="email" placeholder="邮箱" class="form-control">
          </div>
      </div>

3. 使用.form-text 给表单控件增加提示功能，如果要一行，使用.form-inline;

      <div class="form-group col-sm-12">
          <label for="address">收货地址：</label>
          <input type="text" id="address" placeholder="收货地址" class="form-control">
          <small class="form-text text-muted">
              收货地址必须带有省市区和门牌号码！
          </small>
      </div>

4. 使用<fieldset disabled>禁用所有整体表单功能；

      <fieldset disabled class="form-row">