基础表单
输入项
标签定位
标签主要有三个定位方式：顶部，左侧和右侧对其，不管哪一种定位方式都有自己的优缺点。
Matteo Penzo 在 Label Placement in Forms 文章中介绍了使用眼动追踪(eye traking)测试用户在面对这几种标签定位时的表现，根据数据分析来看顶部定位方式让用户更快的完成表单，其次是右侧对其的，最后是左侧对其。
| 优点 | 缺点 | |
|---|---|---|
| 顶部 | 最快的 | 占用更多的垂直空间 |
| 左侧 | 左侧对其的标签让用户在了解有多少个字段时花费较少的时间 | 输入框和标签之间的空间使用户在使用过程中带来更多的认知负担 |
| 右侧 | 输入框和标签之间的空间缩短能让用户更快的填写表单 | 锯齿形的标签排列让用户在了解有多少个字段时花费较长的时间 |
优先使用左侧对其的定位方式
xxxxxxxxx
顶部定位的标签
弹出框里的表单因为其容器通常会是固定的尺寸，因此右侧定位会让表单看起来不太对称，这时顶部定位是更合适的定位方式。
应避免在模态框中使用大型表单，5个以内的字段是合适的数量，字段太多会需要更多的垂直空间。
尺寸
一致的输入项尺寸可能在视觉上带来愉悦感，但会带来一些额外的认知负担（用户需要更多的思考才能意识到输入多少个字符是合适的），输入项尺寸应该与预期的输入长度成正比，这也能暗示用户当前输入项合适的字符长度。
为满足不同业务的适用场景，我们定义多个尺寸样式，根据字段的业务属性来设置适合的尺寸。
尺寸和适用场景
| 类名 | 尺寸 | 适用场景 | 说明 |
|---|---|---|---|
tiny | 50 ~ 60px | 0-100以内的数字，1-2个中文字符 | 极短字符的输入通常不需要太多空间 |
small | 120 ~ 160px | 人名，邮编 | 字符长度较少的业务字段，大约能容纳 |
medium | 200 ~ 260px | 手机/电话号，邮箱，组织名称 | 常见的，大约能容纳 30个左右的英文字符和 10多个中文字符 |
large | 380px ~ 500px | 文章标题 | 较长但需要限制一定长度的内容 |
textarea | auto | 描述，说明 | 大量信息需要用 textarea 来输入，这时候尺寸应该关注高度（rows） |
* | auto | modal 框内的输入项 | 在弹出框空间内，因其容器空间通常不会太大，且字段较少，因此让 |
帮助与提示
有时候仅通过字段名称无法准确的理解字段的业务背景和目的，这时候需要增加一些提示语来帮助用户理解字段的业务背景，提示语要避免使用占位符（placeholder） ，在字段下方用 .help-text 样式的标签来展示提示内容。
分组
当表单字段较多时应考虑将其分组，格式塔心理学中有多种分组原则，将字段以接近度，相似度，连续性，闭合性和连通性来分组，将数十个非结构化字段分组为几个可管理的集合将显着提高表单的可用性。
选项
在表单中我们使用多种选择组件，这些组件如下：
- Select 下拉选择框
- Radio Button 单选框
- Multiple Checkboxs 多个复选框组合
- Single Checkbox 单个复选框
- Switch 开关
Select 下拉选择框
默认选项
让选项永远有一个值，避免在程序中判断
当单选框存在需要有 null 的场景时，用《无》选项来替代，而不是没有选任何值
| Select | Radio | Multiple Checkboxs | Single Checkbox | Switch | |
|---|---|---|---|---|---|
| 选择的值类型 | 无，单个或多个任意类型 | 单个任意类型 | 无，单个或多个任意类型 | 是/否 | 是/否 |
| 值之间的独立性 | 彼此独立 | 互斥 | 彼此独立 | 互斥 | 互斥 |
| 是否有默认选项 | 否 | 是 | 否 | 是 | 是 |
| 合适生效 | 点击保存按钮 | 点击保存按钮 | 点击保存按钮 | 点击保存按钮 | 即时生效 |