07 CSS通用样式---表单

mac2025-06-11 32

CSS通用样式---表单

可支持表单控件默认风格布局风格表单控件行内布局水平布局外观风格定义大小相对高度网格宽度定制不可编辑的样式控件定义帮助文本定制静态控件状态风格

可支持表单控件

Bootstrap支持所有的标准表单控件，同时对不同表单标签进行优化和扩展。

（1）输入框—input

Bootstrap支持大部分常用输入型表单控件，包括所有HTML5支持的控件，如：text-password、datetme、datetime-local、date等，使用这些表单控件时，必须指明type属性值。

（2）文本区域—textarea

对于多行文本框，则使用文本区域，该表单控件支持多行文本，可以根据需要设置rows属性，来定义多行文本框显示的行数。

（3）单选按钮和复选框单选按钮（type=“radio”）是一个圆形的选择框，多个单选按钮可以合并为一个单选按钮组，单选按钮组的name值必须相同，单选按钮同一时刻只能选中一个。一般包含默认值，否则不符合逻辑，使用checked属性可以定义选中的按钮。复选框（type=“checkbox”）可以同时选中多个，每个复选框都是一个独立的对象，且必须有一个唯一的名字（name）。与单选按钮一样，使用checked属性标识选中状态，该属性是一个boolean值。下面的案例中，分别设计了1个复选框和2个单选按钮：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>单选按钮和复选框</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body class="container"> <label class="checkbox"> <input type="checkbox" value="cb"> 复选框 </label> <label class="radio"> <input type="radio" name="gender" id="male" value="male" checked> 男 </label> <label class="radio"> <input type="radio" name="gender" id="female" value="female" checked> 女 </label> </body> </html>

默认它们是垂直顺序进行排序的，通过将.checkbox-inline或者.radio-inline可以使它们一行排列。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行排列</title> </head> <body> <label class="checkbox-inline"> <input type="checkbox" value="cb"> 复选框 </label> <label class="radio-inline"> <input type="radio" name="gender" id="male" value="male" checked> 男 </label> <label class="radio-inline"> <input type="radio" name="gender" id="female" value="female" checked> 女 </label> </body> </html>

（4）下拉框

select标签和option标签配合使用，可以用来设计下拉菜单或者列表框，select可以包含任意数量的option标签或optgroup标签，optgroup标签负责对option标签进行分组，optgroup中的内容不能被选中，它的值也不能被提交给服务器，它用于在一个层叠式选择菜单中为选项分类，label属性是必须的，在浏览器中，它的值是一个不可选的伪标题。 select标签同时定义菜单和列表，两者的区别：

菜单是节省空间的方式，正常状态下只能看到一个选项，单击下拉按钮打开菜单后能看到全部的选项列表显示一定数量的选择，如果超出了整个数量，出现滚动条 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>下拉菜单</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <h3><small>下拉菜单</small></h3> <select name="选择城市"> <optgroup label="江苏"> <option value="nj">南京</option> <option value="sz">苏州</option> </optgroup> <optgroup label="安徽"> <option value="hy">怀远</option> <option value="bb">蚌埠</option> </optgroup> </select> <h3><small>列表</small></h3> <select name="选择城市" multiple> <optgroup label="江苏"> <option value="nj">南京</option> <option value="sz">苏州</option> </optgroup> <optgroup label="安徽"> <option value="hy">怀远</option> <option value="bb">蚌埠</option> </optgroup> </select> </body> </html>

默认风格

Bootstrap根据表单设计流行趋势，优化了表单对象的默认风格。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>默认风格</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <h3><small>用户登录</small></h3> <form action="" method="post"> <label for="username">用户名：</label> <input type="text" id="username"> <label for="userPwd">密码：</label> <input type="password" id="userPwd"> <label for="validate">验证码：</label> <input type="text" id="validate"> <img src="./images/getcode.jpg" alt="验证码：3731"> <label for="keepLogin"> <input type="checkbox" id="keepLogin">记住我的登录信息 </label> <button type="submit" class="btn_login">登录</button> <a href="#" class="reg">用户注册</a> </form> </body> </html>

为了避免对其他插件的表单样式产生影响，Bootstrap3.0放弃了Bootstrap2.0的默认样式：统一所有表单控件垂直分布，设计标签label左侧对齐并在控件之上，添加手形光标样式；设置文本框圆角、灰边、激活时蓝色晕边，通过padding和margin属性设置表单控件的内补白和边距。

布局风格

表单控件

在默认情况下，单独的表单控件会被Bootstrap3.0自动赋予一些全局样式。如果为input、textarea和select标签添加.form-control类样式，则被默认设置为100%。将label和这些控件包裹在.form-group中可以获得最好的排列。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单控件</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <h3><small>用户登录</small></h3> <form action="" method="post"> <div class="form-group"> <label for="username">用户名：</label> <input type="text" id="username" class="form-control"> </div> <div class="form-group"> <label for="userPwd">密码：</label> <input type="password" id="userPwd" class="form-control"> </div> <div class="form-group"> <label for="validate">验证码：</label> <input type="text" id="validate" class="form-control"> <img src="./images/getcode.jpg" alt="验证码：3731"> </div> <div class="form-group"> <label for="keepLogin"> <input type="checkbox" id="keepLogin">记住我的登录信息 </label> </div> <div class="form-group"> <button type="submit" class="btn_login">登录</button> <a href="#" class="reg">用户注册</a> </div> </form> </body> </html>

在Bootstrap3.0中input、select和textarea默认被设置为100%宽度。为了使用内联样式，用户需要专门为使用到的表单控件设置宽度。如果没有为每个输入控件设置label标签，屏幕阅读器将无法正确识读。对于这些内联表单，可以通过为label设置.sr-only类样式将其隐藏。

行内布局

通过为form标签引入form-inline类，可以设计整个表格结构以行内显示。该规则只适用于浏览器窗口至少在768px宽度时，窗口宽度太小会使表单折叠。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行内布局</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <h3><small>用户登录</small></h3> <form action="" method="post" class="form-inline"> <div class="form-group"> <label for="username">用户名：</label> <input type="text" id="username" class="form-control"> </div> <div class="form-group"> <label for="userPwd">密码：</label> <input type="password" id="userPwd" class="form-control"> </div> <div class="form-group"> <label for="validate">验证码：</label> <input type="text" id="validate" class="form-control"> <img src="./images/getcode.jpg" alt="验证码：3731"> </div> <div class="form-group"> <label for="keepLogin"> <input type="checkbox" id="keepLogin">记住我的登录信息 </label> </div> <div class="form-group"> <button type="submit" class="btn_login">登录</button> <a href="#" class="reg">用户注册</a> </div> </form> </body> </html>

水平布局

为表单添加.form-horizontal，并使用Bootstrap3.0栅格列类，可以将label和控件组水平并列布局，这样讲改变.form-group的行为，使其表现为栅格系统中的行（row）效果，因此不再使用.row类。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>水平布局</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <h3><small>用户登录</small></h3> <form action="" method="post" class="form-horizontal"> <div class="form-group"> <label for="username" class="col-xs-2 text-right">用户名：</label> <div class="col-xs-10"> <input type="text" id="username" class="form-control"> </div> </div> <div class="form-group"> <label for="userPwd" class="col-xs-2 text-right">密码：</label> <div class="col-xs-10"> <input type="password" id="userPwd" class="form-control"> </div> </div> <div class="form-group"> <label for="validate" class="col-xs-2 text-right">验证码：</label> <div class="col-xs-10"> <input type="text" id="validate" class="form-control"> <img src="./images/getcode.jpg" alt="验证码：3731"> </div> </div> <div class="form-group"> <div class="col-xs-11 col-xs-offset-1"> <label for="keepLogin"> <input type="checkbox" id="keepLogin">记住我的登录信息 </label> </div> </div> <div class="form-group"> <div class="col-xs-11 col-xs-offset-1"> <button type="submit" class="btn_login">登录</button> <a href="#" class="reg">用户注册</a> </div> </div> </form> </body> </html>

在上面代码中，我们可以把<form class=“form-horizontal” >视为栅格系统的外包含框（<div class=“container” >），把< div class=“form-group”>视为栅格系统的行（<div class=“row”>），然后在<div class=“form-group”>中添加多列布局。

外观风格

Bootstrap通过各种样式类，为用户提供了更多定制表单样式的途径和方法。

定义大小

Bootstrap提供了两种指定表单控件大小的途径：相对高度和网格宽度。

相对高度

相对高度是一组与关键字相关联的类：.input-lg和.input-sm将创建大一些或者小一些的表单控件以匹配按钮尺寸：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>相对高度</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <label><input type="text" class="form-control input-sm" placeholder="input-sm"></label> <label><input type="text" class="form-control" placeholder="正常大小"></label> <label><input type="text" class="form-control input-lg" placeholder="input-lg"></label> </body> </html>

网格宽度

使用栅格系统中的列包裹input或者其任何父元素，都可以很容易地为其设置宽度。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网格宽度</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <div class="row"> <div class="col-sm-2"> <input type="text" class="form-control" placeholder=".col-sm-2"> </div> <div class="col-sm-4"> <input type="text" class="form-control" placeholder=".col-sm-4"> </div> <div class="col-sm-6"> <input type="text" class="form-control" placeholder=".col-sm-6"> </div> </div> </body> </html>

定制不可编辑的样式控件

通过设置disabled属性，可以设计不可编辑的表单控件，防止用户输入，并能改变外观：

当为fieldset设置disabled属性时，可以禁用fieldset中包含的所有控件。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>禁止表单组</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <fieldset class="row" disabled> <div class="col-xs-2"> <input type="text" placeholder="col-xs-2" class="form-control"> </div> <div class="col-xs-4"> <input type="text" placeholder="col-xs-4" class="form-control"> </div> <div class="col-xs-6"> <input type="text" placeholder="col-xs-6" class="form-control"> </div> </fieldset> </body> </html>

a标签的连接功能不受影响，这个class只改变<a class=“btn btn-default”>按钮的外观，并不能禁用其功能，建议通过JavaScript代码禁用链接功能。另外，IE9及以下浏览器中的fieldset并不支持disable属性，建议在这些浏览器上通过JavaScript代码来禁用fieldset。

定义帮助文本

为提示框引入help-block类样式，可用于表单控件的块级帮助文本。

定制静态控件

在水平布局的表单中，如果需要将一行纯文本放置于label的同一行，为p元素添加.form-control-static即可：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>静态控件</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <form role="form" class="form-horizontal"> <div class="form-group"> <label class="col-xs-2 control-label">邮箱地址：</label> <div class="col-xs-10"> <p class="form-control-static">example@163.com</p> </div> </div> <div class="form-group"> <label class="col-xs-2 control-label">用户名：</label> <div class="col-xs-10"> <input type="password" class="form-control"> </div> </div> </form> </body> </html>

状态风格

表单控件存在多种状态：读写、焦点、禁止、有效、验证等，针对不同的状态，提供不同的样式类，以方便用户辨析。Bootstrap增设了验证状态类样式，主要包括：

error：错误warning：警告success：成功

使用时，添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在次元素之内的.control-label、.from-control和.help-block都将接收这些校验状态的样式。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>状态风格</title> <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <form action="" class="form"> <div class="form-group has-success"> <label for="inputSuccess" class="control-label">成功</label> <input type="text" class="form-control" id="inputSuccess"> </div> <div class="form-group has-warning"> <label class="control-form" id="inputWarning">警告</label> <input id="inputWarning" type="text" class="form-control"> </div> <div class="form-group has-error"> <label for="inputError" class="control-label">错误</label> <input type="text" id="inputError" class="form-control"> </div> </form> </body> </html>

代码地址

最新回复(0)