ZUI 3表单控件
输入框
输入框通过为 <input> 元素添加类 form-control 实现，支持通过 type 属性设置输入框类型。
选择框
通过为 <select> 元素添加 form-control 类来使用选择框，包括单选和多选模式。
单选框
多选框
TIP
使用多选框时通常需要指定多选框高度。
多行文本框
通过为 <textarea> 元素添加 form-control 类来使用多行文本框。
特殊表单控件
在浏览器支持的情况下，还可以为 type 设置一些特殊类型。
日期
设置 <input type="date">。
时间
设置 <input type="time">。
日期时间
设置 <input type="datetime-local">。
月份
设置 <input type="month">。
周数
设置 <input type="week">。
范围
设置 <input type="range">。
颜色
设置 <input type="color">。
文件
设置 <input type="file">。
尺寸
通过为表单控件添加 size-* 工具类来设置尺寸。
禁用
通过为表单控件添加 disabled 属性来禁用表单控件。
只读
通过为表单控件添加 readonly 属性来表单控件只读。
特殊状态
通过为表单控件或者其直接父级元素添加工具类 has-error、has-warning 和 has-error 来让其拥有特殊语义的状态。
CSS 类
表单控件提供了如下 CSS 类：
| 类 | 类型 | 作用 |
|---|---|---|
form-control | 实体类 | 元素作为表单控件组件 |
size-sm | 工具类 | 表单控件使用小号尺寸 |
size-lg | 工具类 | 表单控件使用大号尺寸 |
CSS 变量
表单控件提供了如下 CSS 变量，可进行全局修改。
| CSS 变量名 | 作用 |
|---|---|
--form-control-radius | 圆角 |
--form-control-border | 边框颜色 |
--form-control-focus | 激活颜色 |
--form-control-disabled | 禁用颜色 |
--form-control-readonly | 只读颜色 |