ZUI 3表单
基本用法
为 <form> 元素使用类 .form 类来获得表单外观，将表单控件放置在表单控件组 .form-group 内，将表单操作按钮放置在表单操作栏 .form-actions 中。
水平布局的表单
为 <form> 元素使用类 .form-horz 类来让表单实现水平布局。
在水平布局表单中，如果需要在一行包含多个表单控件，可以使用 .form-row 类，下面是一个更复杂的例子：
网格布局
为 <form> 元素使用类 .form-grid 类来让表单实现网格布局。
帮助性文本
使用 form-tip 来显示帮助性的文本并添加到表单控件组中。
校验状态
通过为表单控件组添加 has-warning、has-error、has-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 | 水平布局时表单表单组标签宽度 |