表單，主要用于數(shù)據(jù)采集的功能。通過表單，用戶可實(shí)現(xiàn)數(shù)據(jù)的增/刪/改，這是展現(xiàn)層一個(gè)非常核心的部分。表單暴露給用戶有兩部分：
表單域：包含文本框、選擇框、上傳框等用戶編輯數(shù)據(jù)區(qū)域。
表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕。用于數(shù)據(jù)提交、取消輸入、數(shù)據(jù)填充。
此文旨在歸納表單元件、各元件表現(xiàn)形式、使用場(chǎng)景以及總結(jié)表單應(yīng)用的注意點(diǎn)。
一、表單域
如上所述，表單域包括文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等組成，用于數(shù)據(jù)的輸入、選擇、上傳。以下將按照輸入、選擇、上傳三種操作方式，分別對(duì)各種元件進(jìn)行說明。
1、文本框
文本框用于收集用戶輸入數(shù)據(jù)，按照數(shù)據(jù)類型的不同，可分為單行文本、多行文本、密碼框三種。
-單行文本：一個(gè)單行輸入框，一般會(huì)約束兩個(gè)方面：一是對(duì)字?jǐn)?shù)的約束，一般不超過50個(gè)字符（25個(gè)漢字）。二是對(duì)數(shù)據(jù)類型的約束，比如只允許輸入數(shù)字或字母，如QQ登錄界面QQ號(hào)輸入框只允許純數(shù)字。其表現(xiàn)形式如下：
-多行文本：顧名思義，就是允許多行輸入，應(yīng)用于需要輸入大量數(shù)據(jù)的場(chǎng)景，比如發(fā)微博、微信對(duì)話輸入框等。單純的數(shù)據(jù)輸入，不涉及任何數(shù)據(jù)加工編輯，如字號(hào)字體等。同時(shí)它允許輸入較長(zhǎng)的文字，一般不超過2000個(gè)字符。其表現(xiàn)形式如下：
-密碼框：此元件應(yīng)用于密碼的輸入，一般為單行形式。它可保護(hù)某些敏感信息不為在場(chǎng)其他人所看到。對(duì)于密碼框，用于輸入真實(shí)的數(shù)據(jù)，而顯示到界面則用*字符表示，表現(xiàn)形式為：
2、選擇框
選擇框提供有限的選項(xiàng)供用戶選擇，相比于文本框，它更能讓用戶接受。根據(jù)要收集數(shù)據(jù)屬性和數(shù)據(jù)量多寡，可分為單選、復(fù)選、下拉選擇三種。
-單選：?jiǎn)芜x框可用于處理一些諸如性別、學(xué)歷、開關(guān)等具有唯一性的場(chǎng)景。單選的選項(xiàng)一般不超過7個(gè)，4個(gè)以內(nèi)最佳。它的表現(xiàn)形式如下：
-復(fù)選：它允許選擇不定數(shù)量的選擇。和單選一樣，復(fù)選的數(shù)量也有所約束，正常情況不會(huì)有超過10個(gè)選項(xiàng)的情況。它的表現(xiàn)形式如下：
-下拉選擇：當(dāng)可供選擇的數(shù)據(jù)大于一定量時(shí)，頁(yè)面無法全部展現(xiàn)出來，則下拉選擇就登場(chǎng)了。它可以應(yīng)付省市縣、民族、出生日期等信息的場(chǎng)景。它的表現(xiàn)形式如下：
3、文件上傳框：可用于圖片、文檔、音頻、視頻上傳的場(chǎng)景。上傳是較敏感的操作，因此對(duì)文件的大小、格式要有嚴(yán)格的限制。它的表現(xiàn)形式如下：
二、表單按鈕
表單按鈕有提交按鈕、復(fù)位按鈕、一般按鈕三種，其表現(xiàn)為一個(gè)帶邊框的文字區(qū)域，用于提交、重置表單內(nèi)容，以及其他表單執(zhí)行命令。
1、提交按鈕
顧名思義，就是將輸入數(shù)據(jù)提交給系統(tǒng)。關(guān)于提交按鈕，要注意三個(gè)點(diǎn)：一是數(shù)據(jù)校驗(yàn)，確保數(shù)據(jù)無誤；二是數(shù)據(jù)校驗(yàn)需要一定時(shí)間，要有良好的“校驗(yàn)中，請(qǐng)等待”的提示；三是數(shù)據(jù)提交結(jié)果要有反饋，“提交成功”或“提交失敗”，以及相關(guān)的返回頁(yè)面。
2、復(fù)位按鈕
復(fù)位按鈕不是清空，而是將表單域的數(shù)據(jù)恢復(fù)到最初的狀態(tài)。它可以是一個(gè)按鈕，也可以是幾個(gè)文字，甚至是一個(gè)“x”。
3、一般按鈕
一般按鈕是執(zhí)行提交、復(fù)位操作外的其他表單操作，可應(yīng)用于發(fā)送驗(yàn)證碼、數(shù)據(jù)填充等場(chǎng)景。
三、總結(jié)
以上只是歸納了表單元件的基礎(chǔ)知識(shí)，在實(shí)際使用中，這些只能滿足基本使用，若要有要良好體驗(yàn)，還要考慮元件的選擇、元件多變的形式、數(shù)據(jù)同異步傳輸、數(shù)據(jù)安全的問題。
1、元件的選擇要素
-盡量少的字段。初級(jí)產(chǎn)品經(jīng)理總想要盡可滿足多種用戶、多種場(chǎng)景，導(dǎo)致一份表單字段極多，用戶容易產(chǎn)生厭倦。因此必須將字段分層級(jí)，核心字段，次要字段，邊緣字段，對(duì)于核心字段可設(shè)置為必填項(xiàng)，次要字段可設(shè)置為非必填項(xiàng)，邊緣字段可設(shè)置一個(gè)默認(rèn)值，并不暴露給用戶。例如一個(gè)下單操作，用戶需要填寫收貨人信息（姓名、地址、聯(lián)系方式）、商品信息（數(shù)量、規(guī)格）、優(yōu)惠信息（優(yōu)惠券）、支付（在線支付、貨到付款）、收貨信息（備注、收貨時(shí)間）。用戶需要同時(shí)操作這么多字段才能完成下單操作，因此必須精簡(jiǎn)，將字段根據(jù)產(chǎn)品特性的劃分優(yōu)先級(jí)，如收貨人信息為核心字段必填，商品信息可在商品頁(yè)面選擇，所以可不做，設(shè)為默認(rèn)值等。
-選擇大于輸入。相比于選擇，輸入要使用到鍵盤，而且操作所需時(shí)間過長(zhǎng)，因此在能提供選擇的情況下，盡量提供選擇。
-默認(rèn)輸入。這種情況常見于信息編輯頁(yè)面，在表單被編譯出來后，數(shù)據(jù)就已經(jīng)被填充在框中。將可能性最大的內(nèi)容填充到表單域中，這樣可以減少用戶輸入、選擇成本，提交操作效率。
-合理的約束，良好的提示。關(guān)于字段約束，一定要符合產(chǎn)品場(chǎng)景，例如用戶聯(lián)系方式，一定要確定是手機(jī)號(hào)還是座機(jī)號(hào)，手機(jī)號(hào)為11位純數(shù)字，若是有涉及到跨國(guó)，還要考慮區(qū)號(hào)的問題。關(guān)于這些字段，要以一個(gè)合理的方式告知用戶，用戶在不知情的情況下，錯(cuò)誤輸入會(huì)導(dǎo)致用戶對(duì)產(chǎn)品印象變差。
2、表單的表現(xiàn)形式一直在變化
基礎(chǔ)的表單已經(jīng)可以滿足大部分場(chǎng)景了，但有時(shí)一些特殊場(chǎng)景，以及為了更好的用戶體驗(yàn)，會(huì)將表單的表現(xiàn)形式進(jìn)行調(diào)整。具體可分別兩種情況：
-單個(gè)表單域的優(yōu)化。對(duì)單一類型的表單域進(jìn)行優(yōu)化，具體表現(xiàn)形式為調(diào)整文字、添加圖片、視頻、音頻等形式。以下為boss直聘的一個(gè)選擇身份的功能，本質(zhì)上是一個(gè)單選表單域：
-組合表單。將多個(gè)表單域組合成一個(gè)表單域來實(shí)現(xiàn)復(fù)雜的功能。例如選擇地區(qū)的級(jí)聯(lián)菜單、下拉多選框等等。以下為淘寶運(yùn)費(fèi)模板中選擇地區(qū)的一個(gè)功能，包含復(fù)選，級(jí)聯(lián)等
3、同步與異步
同步和異步，是軟件開發(fā)的名詞，執(zhí)行提交操作后，在這個(gè)操作執(zhí)行期間頁(yè)面直接卡住不能操作，并且執(zhí)行后頁(yè)面刷新或進(jìn)行新頁(yè)面，那就是同步，否則就是異步。通俗地理解是，同步是只有一個(gè)服務(wù)員在服務(wù)你，異步是當(dāng)你有多個(gè)需求時(shí)，就會(huì)有對(duì)應(yīng)多個(gè)服務(wù)員服務(wù)，確保多個(gè)服務(wù)能同時(shí)進(jìn)行。目前的開發(fā)方式，異步的使用場(chǎng)景也越來越多。
4、數(shù)據(jù)安全
表單是采集用戶數(shù)據(jù)的功能，用戶中有優(yōu)質(zhì)用戶，當(dāng)然也就有劣質(zhì)用戶，也可以叫做黑客。這部分人一般都使用表單來達(dá)成入侵破壞系統(tǒng)的目的。以下介紹兩種預(yù)防方法：
-SQL注入：這種情況要對(duì)輸入框，特別是用戶名和密碼有嚴(yán)格的約束，不允許輸入敏感字符；
-利用文件上傳功能注入病毒或木馬。這種情況要對(duì)上傳文件的格式有限制，文檔只允許doc或docx，音頻可限制為mp3，視頻可限制為mp4等。
