bootstrap之form表单

表单布局

• 垂直表单（默认）
• 内联表单
• 水平表单

垂直表单或基本表单（display:block;）

创建基本表单的步骤：

• 向父 <form> 元素添加 role="form"。
• 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
• 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

举个例子：

<form role="form">
    <div class="form-group">
        <label for="name">名称</label>
        <input type="text" class="form-control" id="name" 
               placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label for="name">密码</label>
        <input type="password" class="form-control" id="password" 
               placeholder="请输入密码">
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>

显示效果为：

内联表单（全部在同一行，display为inline-block）

内联表单即元素都是向左对齐的，标签是并排的，则向 <form> 标签添加 class .form-inline。
就刚才的例子，直接给form加一个class即可：

<form class="form-inline" role="form">
    <div class="form-group">
        <label for="name">名称</label>
        <input type="text" class="form-control" id="name" 
               placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label for="name">密码</label>
        <input type="password" class="form-control" id="password" 
               placeholder="请输入密码">
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>

则显示效果为：

水平表单（label和input等表单元素在同一行）

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。创建一个水平布局的表单的步骤为：

• 向父 <form> 元素添加 class .form-horizontal。
• 把标签和控件放在一个带有 class .form-group 的 <div> 中。
• 向标签添加 class .control-label。
• 设置label和其兄弟div的宽度（因为input等默认宽度是100%）。

举例：

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">名称</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="name" 
                 placeholder="请输入名称">
        </div>
    </div>
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-8">
            <input type="password" class="form-control" id="password" 
                placeholder="请输入密码">
        </div>
    </div>
    <div class="col-sm-2 col-sm-offset-4">
        <button type="submit" class="btn btn-default">提交</button>
    </div>
</form>

则显示效果为：