表单设计的小事儿

最近在做一个功能，功能点很简单，就是让用户在进行某些操作之前，先读一份协议。

图片一是最初拿到的原型，看了第一眼，怪。网上常见的是第二种，也有第三种形式。

为什么第一种不可以？

form表单的作用是实现前后端的数据交互，本质上是和后端数据库的交互（增删改查）。浏览器中的表单系统的设计有三部分：

1、form元素

2、输入类控件

3、按钮类控件

为什么要这么分？

form元素就像一个张纸，那些输入类控件负责往这张纸上写东西，而按钮类控件则负责将这个写满信息的是否要发送出去。

这个功能的大致流程是：

1、用户阅读

2、用户确认阅读与否

3、提交用户的阅读状态

这个流程结合form系统的设计初衷，也就能理解方案一怪在哪里了。

对比方案二和方案三，方案二更符合功能流程和form系统的设计。方案三将2和3两步合成一步，用户操作起来方便一些，但是也有问题，提交用户的阅读状态其实是二次确认 ，方案三少了那一步总感觉有些草率。