Bootstrap 常用表单

蔚落 2022-03-22 13:18 327阅读 0赞

表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

**1、输入框**

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： `text`、`password`、`datetime`、`datetime-local`、`date`、`month`、`time`、`week`、`number`、`email`、`url`、`search`、`tel` 和 `color`。

<form>
                <div class="form-group">
                    <label for="username">用户名：</label>
                    <input class="form-control" placeholder="username" id="username" type="text" name="username"/>
                </div>
            </form>

![20190128154920849.png][]

**2、文本域**

支持多行文本的表单控件。可根据需要改变 rows 属性

<div class="form-group">
                    <label >备注：</label>
                    <textarea class="form-control" rows="3" id="remark" name="remark"></textarea>
                </div>

![20190128155738728.png][]

**3、单选框（radio）**

<div class="radio-inline">
                    <label>
                        <input type="radio" name="sex" value="1"> 男
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="sex" value="0"> 女
                    </label>
                </div>

![20190128160754324.png][]     ![20190128162431240.png][]

**4、多选框（checkbox）**

<div class="checkbox-inline">
                    <label>
                        <input type="checkbox" name="hobby" value="1">电影
                    </label>
                </div>
                <div class="checkbox-inline">
                    <label>
                        <input type="checkbox" name="hobby" value="2">运动
                    </label>
                </div>

**内联单选和多选框**  
       通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

**5、下拉列表**

<select class="form-control" name="sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>

![20190128163817947.png][]

**6、添加额外的图标**

只需设置相应的 .has-feedback 类并添加正确的图标即可。

<div class="form-group has-feedback">
                    <label for="username">用户名：</label>
                    <input class="form-control" placeholder="username" id="username" type="text" name="username"/>
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <label for="password">密码：</label>
                    <div class="input-group">
                        <span class="input-group-addon">@</span>
                        <input class="form-control" placeholder="password" id="password" type="password" name="username"/>
                    </div>
                    <span class="glyphicon glyphicon-cloud form-control-feedback" aria-hidden="true"></span>
                </div>

![20190128164727690.png][]

**7、常用的属性**

只读状态：添加 readonly 属性

禁用状态：添加 disabled 属性

自动获取焦点：添加 autofocus

<input class="form-control" placeholder="username" id="username" type="text" name="username" autofocus/>
    <input class="form-control" placeholder="username" id="username" type="text" name="username" readonly/>
    <input class="form-control" placeholder="username" id="username" type="text" name="username" disabled/>

**8、改变控件大小**

通过 .input-lg 类似的类可以为控件设置高度，即添加 .xxx-sm 或 .xxx-lg

通过 .col-lg-\* 类似的类可以为控件设置宽度。

<input class="form-control input-lg" placeholder="username" id="username" type="text" name="username"/>
    <input class="form-control input-sm" placeholder="username" id="username" type="text" name="username"/>

具体参考官方文档：[https://v3.bootcss.com/css/\#forms][https_v3.bootcss.com_css_forms]

也可以将表单元素和 table 结合使用，

[20190128154920849.png]: /images/20220322/37914581014b4c4387ba0070b356729e.png
[20190128155738728.png]: /images/20220322/b1eefb1bcc8d4d9abbe13ac269cb5ae3.png
[20190128160754324.png]: https://img-blog.csdnimg.cn/20190128160754324.png
[20190128162431240.png]: /images/20220322/02653e02167c4d7e941f8ebee7fc7bd1.png
[20190128163817947.png]: /images/20220322/e8df9bef448a48bdb66d81ae2a81a4c1.png
[20190128164727690.png]: /images/20220322/a3707c4f10b04fe3ab6ac902ce848d46.png
[https_v3.bootcss.com_css_forms]: https://v3.bootcss.com/css/#forms

发表评论取消回复

表情：

评论列表（有 0 条评论，327人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap表单及表单布局

Bootstrap4 支持二种表单布局方式：堆叠表单（垂直方向），内联表单（水平方向）。示例1（堆叠表单） ![在这里插入图片描述][b614b269291b45da

r囧r小猫/ 2023年09月24日 16:57/ 0 赞/ 60 阅读

相关 Bootstrap 表单

自版本 2.0 起，Bootstrap 提供了四中类型的表单布局 - 垂直（默认）搜索内联水平默认是垂直布局创建垂直表单布局 ![

痛定思痛。/ 2022年08月23日 14:00/ 0 赞/ 241 阅读

相关 Bootstrap表单

1.表单的布局垂直表单（默认），内联表单，水平表单 2.创建基本表单的步骤向父<form>元素添加role="form" 把标签和控件放在一个带有

矫情吗；*/ 2022年08月23日 03:56/ 0 赞/ 220 阅读

相关 Bootstrap 表单对齐

<form id="searchForm" class="col-md-12 col-md-offset-1 form-horizontal" role="form">

小鱼儿/ 2022年05月16日 07:28/ 0 赞/ 272 阅读

相关 Bootstrap CSS 表单

表单布局 Bootstrap 提供了下列类型的表单布局：垂直表单（默认）内联表单水平表单垂直或基本表单基本的表单结构是 Bootst

我就是我/ 2022年03月30日 05:48/ 0 赞/ 337 阅读

相关 Bootstrap 常用表单

表单单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将

蔚落/ 2022年03月22日 13:18/ 0 赞/ 328 阅读

相关 Bootstrap系列---表单

Bootstrap 表单注：本系列转载于菜鸟教程，仅用以自己学习总结和使用，只会显示自己学习使用的内容，详细内容可以查看菜鸟教程网址：[https://www.ru

痛定思痛。/ 2022年01月26日 15:29/ 0 赞/ 314 阅读

相关 bootstrap表单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

痛定思痛。/ 2022年01月15日 22:33/ 0 赞/ 303 阅读

相关 Bootstrap 表单

在本章中，我们将学习如何使用 `Bootstrap` 创建表单。`Bootstrap` 通过一些简单的 `HTML` 标签和扩展的类即可创建出不同样式的表单。表单布局

青旅半醒/ 2021年06月26日 16:06/ 0 赞/ 553 阅读

相关 Bootstrap常用表单布局（HTML）

本文介绍一下在后台管理系统中，常用的两种基于`Bootstrap`的表单布局（水平布局和垂直布局）下面是两个使用的效果图：水平布局： ![水平布局][20190

￡神魔★判官ぃ/ 2021年06月26日 16:06/ 0 赞/ 422 阅读