初识

输入文字发帖；填写用户名、密码登录… 这些都是表单（Form）。

与常规的页面不同，表单是供用户输入信息的，输入完了要“提交”。

左图是一个表单，填写完，要点“完成”，将输入的内容提交；不想保存这次的修改，点“取消”，不提交并且离开。
右图是常规的页面，页面左上角是“后退”按钮，这里并不存在“输入的信息是否提交”的问题。

程序代码里，表单是这样的：
< form >……< /form >
装在form标签里的，form中文译为：表单。

表单里使用很多“表单原件”：文本输入框、单选按钮、复选框、下拉菜单、开关、滚轮… 通过这些表单原件，让用户输入信息。

概况一下表单（form）：

这样一个供用户输入信息用的页，其中包括一系列表单原件，“提交”按钮将输入的信息提交，“取消”按钮，放弃，离开。

提交与取消

如果一个表单是被“打开”的，比如：

这个登录窗口，是点了“登录”后弹出的，那就需要有“取消”按钮，这里的取消按钮是弹出窗口右上角的X。
如果表单是在页面里的一部分，比如：

发新微博这个模块，也是个表单，是在这个首页里的一部分，这就不需要“取消”了。

windows系统里，会出现下面这样的情况：

除了“确定”、“取消”，还有一个“应用”按钮，这按钮是什么意思？
确定-提交并关闭；
取消-不提交并关闭；
应用-提交但不关闭。
够神奇吧，我以为多数用户并不知道这个“应用”按钮的确切功能。

为什么要这么个按钮呢？
在这个表单窗口里给“计算机”换个图标，提交，在后面的电脑桌面上会看到真实的效果，如果不满意，可以再改。要方便反复的改，所以提供了这个“提交但不关闭”的功能。
但这个“应用”按钮，实在不应该有，因为没人懂。要避免掉这个问题，解决办法应该是避免掉这样的窗口。这恐怕不是三言两语能说明白的了，需要单独一个主题“模式化”再说了。

“提交”与“取消”这两个词，在不同的场合里，可以换成不同的词。
“提交”也可以换成：发送、完成、保存…
“取消”也可以换成：放弃，算了吧，我再想想… 很多时候也直接用“X”图标。

用户在表单里，单选、复选、文字输入，搞了半天，不小心按到了“取消”，全没了，这太可怕了。所以得有个“二次确认”，避免误操作。
用户的输入是操作成本比较高的，要避免这些操作前功尽弃。

以前，一些表单里还会设计一个复位（reset）按钮，按了之后，把表单里填的内容一键清空，这实在是太恐怖了。如果用户哪里输入错了，自己去改就好了，要把之前输入的全都清空，这可能性几乎没有。如果是根本不想填这个表单了，就“取消”，离开就好了。因为技术上可以很方便的实现，于是就做了这样的功能，这就不对了。做什么功能，应该是因为“用户需要”，而不是“能实现就做出来，用不用随用户的便”。

立即生效

操作了这个开关，并没有“提交”按钮，直接就生效了。这种情况怎么理解？
有右箭头的那些行，每行是一个链接，各自指向新页面。
有开关的这些行，各自是一个表单，每个表单里都只有一项“开关”表单原件，这些表单并都没有“提交”按钮，是操作了“开关”之后，自动就提交了。

即时生效，不需要额外再点一下“提交”按钮，省事儿，当然是好，但也要小心，说不定用户会反复的开关着玩。所以这种立即生效的做法，用在非网络的数据提交比较常见，比如，手机系统里，开关这个数据只是提交给了本地手机系统，这反复几次也没啥关系。如果是通过网络提交给服务器的，程序的设计上通常会做个延迟，用户不再操作了，过几分钟，再真的提交给服务器，避免不必要的数据往来。

避免表单嵌套

我们来看一个微博中如何设置职业信息：

到达图3状态时，此时有两个表单，是一个套一个的。这是就有了问题，用户点击了“确定”后，到达图4状态，可能会以为已经完成了，但其实还要点右上角的“保存”才是真的完成了。
当然技术上也可以做到，在图4状态时，即使用户没点“保存”，也将已做的修改提交到服务器，但同样有问题，另外一些用户可能会说：“我还没保存呢，怎么就生效了？”

问题的源头还在于图3时出现了“表单套表单”的状况，应该避免出现这种嵌套。怎么做？
上面的这一组截图是微博PC网页版较早一个版本的，下面的是目前（2019年8月初）的版本，目前的版本已经改好了：