bootstrap-表单

表单

Bootstrap 提供了下列类型的表单布局：

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

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- <link rel="stylesheet" href="1.css"> -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <title>Bootstrap</title>
</head>
<body>
    <form role="form">
        <div class="form-group">
            <label for="name">姓名:</label>
            <input type="text" class="form-control" id="name" placeholder="请输入名称">  
        </div>
        <p class="page-header"></p>

        <div class="form-group">
            <label for="input-group">文件上传:</label>
            <input type="file" id="inputfile">
        </div>
        <p class="page-header"></p>

        <div class="checkbox">
            <label>
                <input type="checkbox">同意
            </label>
        </div>
        <button type="submit" class="btn btn-info">提交</button>
    </form>
</body>
</html>

这里写图片描述

内联表单
如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 < form > 标签添加 class .form-inline。

默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。
使用 class .sr-only，您可以隐藏内联表单的标签。

<form role="form" class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="name">姓名:</label> <!-- sr-only：隐藏lable标签 -->
            <input type="text" class="form-control" id="name" placeholder="请输入名称">  
        </div>

        <div class="form-group">
            <label class="sr-only" for="inputfile">文件上传</label>
            <input type="file" id="inputfile">
        </div>

        <div class="checkbox">
            <label>
                <input type="checkbox">同意
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>

这里写图片描述

水平表单
水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

1.向父 < form> 元素添加 class .form-horizontal。
2.把标签和控件放在一个带有 class .form-group的 < div> 中。
3. 向和input 标签在一个from-group组的< lable>标签添加 class .control-label。

<form role="form" class="form-horizontal">
        <div class="form-group">
            <label class="col-md-2 control-label" for="name">姓名:</label> 
            <div class="col-md-8">
                <input  type="text" class="form-control" id="name" placeholder="请输入名称"> 
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label" for="name">职业:</label> 
            <div class="col-md-8">
                <input  type="text" class="form-control" id="position" placeholder="请输入职业"> 
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label" for="inputfile">文件上传</label>
            <div class="col-md-8" >
                <input type="file" id="inputfile">
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
              <div class="checkbox">
                <label>
                  <input type="checkbox">请记住我
                </label>
              </div>
            </div>
          </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <button type="submit" class="btn btn-default">登录</button>
            </div>
        </div>
    </form>

这里写图片描述

支持表单的控件

Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。

单选和复选

<label> 单选</label>
        <div class="radio">
            <label>
                <input type="radio" name="optiom" value="r1">male
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="optiom" value="r2">female
            </label>
        </div>

        <label>多选</label>
        <div class="checkbox">
            <label>
                <input type="checkbox" name="football" value="c1">football
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" name="vallball" value="c1">vallball
            </label>
        </div>

这里写图片描述

<label for="name">内联的复选框和单选按钮的实例</label>
<div>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 选项 2
    </label>
</div>

这里写图片描述

选择框（Select）
当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。

使用 < select> 展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。
使用 multiple=”multiple” 允许用户选择多个选项。

<form action="" role="form">
            <div class="form-group">
                <label for="name">选择列表              </label>
                <select class="form-control">
                    <option>1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                </select>
                <label for="name">可多选列表</label>
                <select multiple class="form-control">
                    <option>1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                </select>
            </div>
        </form>

这里写图片描述

表单控件状态

1.禁用的输入框 input
如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

2.禁用的字段集 fieldset
对 < fieldset> 添加 disabled 属性来禁用 < fieldset> 内的所有控件。

<form class="form-horizontal" role="form">
            <!-- 1.单个输入框禁止输入 -->
            <div class="form-group">
                <label for="Noinput" class="col-md-2 control-lable">禁用</label>
                <div class="col-md-8">
                    <input type="text" class="form-control" placeholder="该输入框禁止输入。。。" disabled="disabled">
                </div>
            </div>

            <!-- 2.禁用字段集 -->
            <fieldset disabled="disabled">
                <!-- 2.1输入框 -->
                <div class="form-group">
                    <label class="col-md-2 control-lable">禁止输入框输入</label> 
                    <div class="col-md-8">
                        <input type="text" name="text1" class="form-control" placeholder="禁止输入">
                    </div>
                </div>
                <!-- 2.2选择框 -->
                <div class="form-group">
                    <label class="col-md-2 control-lable">禁止选择框</label> 
                    <div class="col-md-8">
                        <select class="form-control" >
                            <option>禁止选择</option>
                        </select> 
                    </div>
                </div>
                <!-- 2.3单选禁止 -->
                <div class="form-group">
                    <div class="col-md-offset-2 radio">
                        <label><input type="radio" name="radio ">female</label>
                        <label><input type="radio" name="radio ">male</label>
                    </div>
                </div>

            </fieldset>
        </form>

这里写图片描述

3.验证状态
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

<form class="form-horizontal" role="form">
                    <!-- 1.success -->
            <div class="form-group has-success">
                <label for="inputSuccess" class="col-sm-2 control-label">success</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control">
                </div>
            </div>

            <!-- 2.warning -->
            <div class="form-group has-warning">
                <label for="Noinput" class="col-sm-2 control-label">warning</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control">
                </div>
            </div>

            <!-- 3.error -->
            <div class="form-group has-error">
                <label class="col-sm-2 control-label">error</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="inputError">
                </div>
            </div>
        </form>

这里写图片描述

添加额外的图标

针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。

<div class="form-group has-success has-feedback">
                  <label class="control-label">Input with success</label>
                  <input type="text" class="form-control" >
                  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                </div>

                <div class="form-group has-warning has-feedback">
                  <label class="control-label" >Input with warning</label>
                  <input type="text" class="form-control" >
                  <span class="glyphicon glyphicon-warning-sign form-control-feedback" ></span>
                </div>

这里写图片描述

<div class="form-group has-success has-feedback">
                      <label class="control-label" >Input group with success</label>
                      <div class="input-group">
                        <span class="input-group-addon">@</span>
                        <input type="text" class="form-control">
                      </div>
                      <span class="glyphicon glyphicon-ok form-control-feedback" ></span>
                </div>

这里写图片描述

<div class="form-group has-success">
                      <label class="control-label" >Input group with success</label>
                      <div class="input-group">
                        <div class="input-group-btn">
                            <button class="btn btn-danger">Go!</button>
                        </div>
                        <input type="text" class="form-control">
                      </div>
                </div>

这里写图片描述

表单控件大小
分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。

设置宽度：input-lg 默认 input-sm
设置高度：在div .row的子件中：col-lg-2 ,col-lg-3….

表单帮助文本
Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 < input> 后使用 .help-block。

<form role="form">
                 <input class="form-control" type="text" placeholder="请输入密码">
                 <span class="help-block">密码建议数字和字母组合</span>
            </form>

这里写图片描述

表单

支持表单的控件

猜你喜欢