Skip to content

表单

基本用法

<form> 元素使用类 .form 类来获得表单外观,将表单控件放置在表单控件组 .form-group 内,将表单操作按钮放置在表单操作栏 .form-actions 中。

水平布局的表单

<form> 元素使用类 .form-horz 类来让表单实现水平布局。

在水平布局表单中,如果需要在一行包含多个表单控件,可以使用 .form-row 类,下面是一个更复杂的例子:

可以放在同一行的字段满足:可连着填写,字段意义上有相似性
此表单项为必填
强关联字段,有灰色底色进行连接,3个以上框的自适应宽度

网格布局

<form> 元素使用类 .form-grid 类来让表单实现网格布局。

.form-group 添加 w-* 辅助类来设置宽度
项目类型
-

帮助性文本

使用 form-tip 来显示帮助性的文本并添加到表单控件组中。

校验状态

通过为表单控件组添加 has-warninghas-errorhas-success 类即可应用相应的效验状态样式。这些样式会影响到表单控件组内的 label.form-control.form-tip 元素。

表单分组

使用fieldset 将多个表单控件放置在一起进行分组。在<fieldset> 内使用 <legend> 来定义分组标题。

账号信息
额外内容

标记必填项

标记必填项的一种通用方法是在标签上添加星标 * , 在表单控件组中只需要为表单组标签 .form-label 添加 required 类。

水平布局的表单中也可以使用:

CSS 类

表单提供了如下 CSS 类

类型作用
form-group实体类元素作为表单组件
form-label实体类元素作为表单组标签
form-control实体类元素作为表单控件组件
form-tip实体类元素作为表单控件的提示性文本
form-actions实体类元素作为表单按钮容器
form-grid修饰类为表单启用水平排列样式
required修饰类为表单控件启用必填标记样式
has-error修饰类为表单控件启用报错样式
has-warning修饰类为表单控件启用警告样式
has-success修饰类为表单控件启用成功样式

CSS 变量

变量名称变量含义
--form-label-color表单组标签颜色
--form-tip-color帮助性文本默认颜色
--form-grid-label-width水平布局时表单表单组标签宽度