表单页开发指南
输入项
标签定位
标签主要有三个定位方式：顶部，左侧和右侧对其，不管哪一种定位方式都有自己的优缺点。
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 | |
|---|---|---|---|---|---|
| 选择的值类型 | 无，单个或多个任意类型 | 单个任意类型 | 无，单个或多个任意类型 | 是/否 | 是/否 |
| 值之间的独立性 | 彼此独立 | 互斥 | 彼此独立 | 互斥 | 互斥 |
| 是否有默认选项 | 否 | 是 | 否 | 是 | 是 |
| 合适生效 | 点击保存按钮 | 点击保存按钮 | 点击保存按钮 | 点击保存按钮 | 即时生效 |
文件上传
多重/嵌套表单
大型表单
大型表单很常见，将大型信息
引导式表单
将大型表单拆解成以引导的方式输入的表单，整个表单需要一并上传的场景，适合复杂信息的创建/设置页面，常见的场景包括软件系统初始化，阿里云服务购买，企业级协作产品的注册页等。
交互特点
分步骤输入，引导式的输入体验会让用户更有耐心。
要注意的问题
内容依旧很庞大，操作繁琐，在浏览器刷新，误点击其他导航链接等行为时处理不当反而会让用户体验变差。
如果可以，应该用默认值设置更多非开始就要填写的信息。
技术特点
多个子表单一起维护一个大表单，最终提交这个大表单，需要考虑浏览器刷新时的对应逻辑，最好将原来提交的内容保存住，这样就能在用户误操作时也不会丢失原来的内容，避免重新填写带来的麻烦，sessionStorage 是比较理想的持久化 API
渐进式表单
与引导式的表单类似，不同的地方在于，渐进式表单无需将整个表单提交，以累积填写的方式来完善内容，适合信息保存周期长且信息的不完整性不影响系统使用的业务，常见的业务场景有简历的填写，购物车（相似）。
tabs 布局是渐进式表单的一种实现
交互特点
写多少算多少的输入方式能带来更灵活的用户体验。
要注意的问题
信息散落在多处会让人在填写时容易忘记已输入的内容，因此需要考虑显示当前完成度让用户了解当前信息表的完整性。
在创建新的信息时如果采用渐进式表单可能会带来一些挑战，渐进式表单的特点是将信息散落在各处，UI 之间可能分布在不同的文件中。
技术特点
与渐进式表单不同的是渐进式表单是将单个实例信息拆分成多个 UI 组件或页面，他们各自处理 submit 事件，每次都会请求服务器来更新部分信息。