怎样设计表单控件与校验？

让用户知道要填什么，出错后知道在哪里改，并能继续完成提交。

表单控件是用来填写或选择信息的部件。校验是检查输入是否符合要求；好的表单要在填写前说明要求，出错后帮助用户修正。

先记住这几件事

• 标签 说明字段是什么； 占位提示 是框里暂时显示的示例，输入后会消失，不能完全代替标签。
• 根据任务选输入框、单选、多选等控件，不强迫用户猜操作方式。
• 清楚说明必填项、格式和必要原因，避免用户填完才发现限制。
• 错误提示指出字段与修改方法，尽量保留已填内容；提交结果也要说清楚。

标签关联见 W3C：表单标签 ，输入检查与错误帮助见 W3C：表单校验 。

填写与校验流程

表单状态的示意

下面是假设联系表单。

用一个例子走一遍

用户把邮箱写成不完整地址，提交后看到字段旁的具体提示。修正后再次提交；如果服务暂时无法处理，网页说明失败并保留内容。恢复后用户重试，只有收到成功结果才显示已完成。

边界与常见误解

检查时机要按控件与任务安排，不能一输入就不断打断用户。浏览器校验不能代替服务端校验——网站后端对提交数据的检查。表单清楚也不代表必须收集更多信息，只保留任务需要的字段。