初識

輸入文字發(fā)帖；填寫用戶名、密碼登錄… 這些都是表單（Form）。

與常規(guī)的頁面不同，表單是供用戶輸入信息的，輸入完了要“提交”。

左圖是一個表單，填寫完，要點“完成”，將輸入的內(nèi)容提交；不想保存這次的修改，點“取消”，不提交并且離開。
右圖是常規(guī)的頁面，頁面左上角是“后退”按鈕，這里并不存在“輸入的信息是否提交”的問題。

程序代碼里，表單是這樣的：
< form >……< /form >
裝在form標(biāo)簽里的，form中文譯為：表單。

表單里使用很多“表單原件”：文本輸入框、單選按鈕、復(fù)選框、下拉菜單、開關(guān)、滾輪… 通過這些表單原件，讓用戶輸入信息。

概況一下表單（form）：

這樣一個供用戶輸入信息用的頁，其中包括一系列表單原件，“提交”按鈕將輸入的信息提交，“取消”按鈕，放棄，離開。

提交與取消

如果一個表單是被“打開”的，比如：

這個登錄窗口，是點了“登錄”后彈出的，那就需要有“取消”按鈕，這里的取消按鈕是彈出窗口右上角的X。
如果表單是在頁面里的一部分，比如：

發(fā)新微博這個模塊，也是個表單，是在這個首頁里的一部分，這就不需要“取消”了。

windows系統(tǒng)里，會出現(xiàn)下面這樣的情況：

除了“確定”、“取消”，還有一個“應(yīng)用”按鈕，這按鈕是什么意思？
確定-提交并關(guān)閉；
取消-不提交并關(guān)閉；
應(yīng)用-提交但不關(guān)閉。
夠神奇吧，我以為多數(shù)用戶并不知道這個“應(yīng)用”按鈕的確切功能。

為什么要這么個按鈕呢？
在這個表單窗口里給“計算機”換個圖標(biāo)，提交，在后面的電腦桌面上會看到真實的效果，如果不滿意，可以再改。要方便反復(fù)的改，所以提供了這個“提交但不關(guān)閉”的功能。
但這個“應(yīng)用”按鈕，實在不應(yīng)該有，因為沒人懂。要避免掉這個問題，解決辦法應(yīng)該是避免掉這樣的窗口。這恐怕不是三言兩語能說明白的了，需要單獨一個主題“模式化”再說了。

“提交”與“取消”這兩個詞，在不同的場合里，可以換成不同的詞。
“提交”也可以換成：發(fā)送、完成、保存…
“取消”也可以換成：放棄，算了吧，我再想想… 很多時候也直接用“X”圖標(biāo)。

用戶在表單里，單選、復(fù)選、文字輸入，搞了半天，不小心按到了“取消”，全沒了，這太可怕了。所以得有個“二次確認”，避免誤操作。
用戶的輸入是操作成本比較高的，要避免這些操作前功盡棄。

以前，一些表單里還會設(shè)計一個復(fù)位（reset）按鈕，按了之后，把表單里填的內(nèi)容一鍵清空，這實在是太恐怖了。如果用戶哪里輸入錯了，自己去改就好了，要把之前輸入的全都清空，這可能性幾乎沒有。如果是根本不想填這個表單了，就“取消”，離開就好了。因為技術(shù)上可以很方便的實現(xiàn)，于是就做了這樣的功能，這就不對了。做什么功能，應(yīng)該是因為“用戶需要”，而不是“能實現(xiàn)就做出來，用不用隨用戶的便”。

立即生效

操作了這個開關(guān)，并沒有“提交”按鈕，直接就生效了。這種情況怎么理解？
有右箭頭的那些行，每行是一個鏈接，各自指向新頁面。
有開關(guān)的這些行，各自是一個表單，每個表單里都只有一項“開關(guān)”表單原件，這些表單并都沒有“提交”按鈕，是操作了“開關(guān)”之后，自動就提交了。

即時生效，不需要額外再點一下“提交”按鈕，省事兒，當(dāng)然是好，但也要小心，說不定用戶會反復(fù)的開關(guān)著玩。所以這種立即生效的做法，用在非網(wǎng)絡(luò)的數(shù)據(jù)提交比較常見，比如，手機系統(tǒng)里，開關(guān)這個數(shù)據(jù)只是提交給了本地手機系統(tǒng)，這反復(fù)幾次也沒啥關(guān)系。如果是通過網(wǎng)絡(luò)提交給服務(wù)器的，程序的設(shè)計上通常會做個延遲，用戶不再操作了，過幾分鐘，再真的提交給服務(wù)器，避免不必要的數(shù)據(jù)往來。

避免表單嵌套

我們來看一個微博中如何設(shè)置職業(yè)信息：

到達圖3狀態(tài)時，此時有兩個表單，是一個套一個的。這是就有了問題，用戶點擊了“確定”后，到達圖4狀態(tài)，可能會以為已經(jīng)完成了，但其實還要點右上角的“保存”才是真的完成了。
當(dāng)然技術(shù)上也可以做到，在圖4狀態(tài)時，即使用戶沒點“保存”，也將已做的修改提交到服務(wù)器，但同樣有問題，另外一些用戶可能會說：“我還沒保存呢，怎么就生效了？”

問題的源頭還在于圖3時出現(xiàn)了“表單套表單”的狀況，應(yīng)該避免出現(xiàn)這種嵌套。怎么做？
上面的這一組截圖是微博PC網(wǎng)頁版較早一個版本的，下面的是目前（2019年8月初）的版本，目前的版本已經(jīng)改好了：

圖3狀態(tài)時，只有一個表單了。
到達圖4時，此時剛才所做的修改是不是已經(jīng)生效了？當(dāng)然生效了。圖4的表達并不會讓人有歧義?，F(xiàn)在只不過是“職業(yè)信息”部分展開著，并不是“尚未保存”的狀態(tài)。

從2018年初到2019年中，微博PC網(wǎng)頁版的這個設(shè)置，有過多次修改。一直在與這個“表單套表單”搏斗。目前的版本，總算是處理好了。