表单主要功能是用来与用户做交流的一个网页控件, 良好的表单设计能够让网页与用户更好的沟通.
表单中常见的元素主要包括: 文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等

表单控件

.form-control .input-lg（较大） .input-sm（较小）

文本框input

注意这里使用之前提到的栅格网格系统会更美观

<!-- Bootstrap表单-->
    <div class="row">
        <div class="col-md-3">
            <!--文本框 -->
            <input class="form-control" type="text" ><br>
            <input class="form-control input-lg" type="text" ><br>
            <input class="form-control input-sm" type="text" ><br>
        </div>
    </div>

下拉选择框 select

<!--下拉框 -->
    <div class="row">
        <div class="col-md-3">
            <select class="form-control">
                <option>请选择城市</option>
                <option>上海</option>    
                <option>北京</option>
            </select><br>
        </div>
    </div>

多行选择设置：multiple="multiple"

<!--多选下拉框 -->
    <div class="row">
        <div class="col-md-3">
            <select class="form-control" multiple="multiple">
                <option>请选择城市</option>
                <option>上海</option>    
                <option>北京</option>
            </select><br>
        </div>
    </div>

输入框text

.form-control

<!--文本域 -->
    <div class="row">
        <div class="col-md-3">
            <textarea class="form-control"></textarea>
        </div>
    </div>

复选框 checkbox

垂直显示: .checkbox
这里要使用一个div 把div的class写成checkbox，还要注意input标签外面需要使用label标签

<!--复选框 垂直显示-->
    <div class="row">
        <div class="col-md-3">
            <div class="checkbox">
                <label><input type="checkbox" name="hobby" />唱歌</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="hobby" />跳舞</label>
            </div>
        </div>
    </div>

水平显示: .checkbox-inline
这里使用label标签，class为checkbox-inline，里面再写input （和垂直显示不同！）

<!--复选框 水平显示-->
    <div class="row">
        <div class="col-md-3">
           <label class="checkbox-inline">
                <input type="checkbox" name="hobby" />唱歌
           </label>
           <label class="checkbox-inline">
                <input type="checkbox" name="hobby" />跳舞
            </label>
        </div>
    </div>

单选框 radio

垂直显示: .radio
使用一个div ，把div的class设置为radio ，input的外层需要使用label标签

<!--单选框 垂直显示-->
    <div class="row">
        <div class="col-md-3">
            <div class="radio">
                <label><input type="radio" name="sex" />男</label>
            </div>
            <div class="radio">
                <label><input type="radio" name="sex" />女</label>
            </div>
        </div>
    </div>

水平显示: .radio-inline
使用label标签 class设置为radio-inline

<!--单选框 水平显示-->
    <div class="row">
        <div class="col-md-3">
        <label class="radio-inline">
                <input type="radio" name="sex" />男
        </label>
        <label class="radio-inline">
                <input type="radio" name="sex" />女
            </label>
        </div>
    </div>

按钮

使用button实现

基础样式: btn

<!--按钮-->
<button class="btn" >按钮</button>

附加样式: btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default

<button class="btn btn-primary" >按钮</button>
    <button class="btn btn-info" >按钮</button>
    <button class="btn btn-success" >按钮</button>
    <button class="btn btn-warning" >按钮</button>
    <button class="btn btn-danger" >按钮</button>
    <button class="btn btn-link" >按钮</button>
    <button class="btn btn-default" >按钮</button>

多标签支持: 可以把别的标签也变成按钮

<a href="#" class="btn btn-warning">a标签</a>
    <span class="btn btn-danger">span标签</span>
    <div class="btn btn-primary">div标签</div>

按钮大小

使用.btn-lg(大按钮) .btn-sm(小按钮) 或.btn-xs(超小按钮)就可以获得不同尺寸的按钮

<!--设置按钮大小-->
<button class="btn btn-warning" >正常按钮</button>
<button class="btn btn-primary btn-lg" >大按钮</button>
<button class="btn btn-info btn-sm" >小按钮</button>
<button class="btn btn-success btn-xs" >超小按钮</button>

按钮禁用

方法1: 在标签中添加disabled属性

<!--禁用方法1-->
    <button class="btn btn-info" onclick="alert('Hello');" disabled="disabled">按钮</button>

方法2: 在元素标签中添加类名disabled
但是只是样式上显示禁用了, 还是可以点击成功

<!--禁用方法2-->
    <button class="btn btn-info disabled" onclick="alert('Hello');">按钮</button>