整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：
此類控件有很多種類型，使用<input type="類型">語法，常見類型如下：
type 值 | 含義 |
text | 文字字段 |
password | 密碼域，用戶看不到明文，以*代替 |
radio | 單選按鈕 |
checkbox | 多選按鈕 |
button | 普通按鈕 |
submit | 提交按鈕 |
reset | 重置按鈕 |
image | 圖像域，用圖像作為背景的提交按鈕 |
hidden | 隱藏域，不可見的輸入框 |
file | 文本域，用于上傳文件等非文本數據 |
文本輸入框和密碼框
除了顯示形式不一樣，其它屬性一樣，有以下屬性：
如下是文本輸入框和密碼框制作一個登錄表單
html代碼：
<!DOCTYPE html>
<html>
<body>
<h1>用戶登錄</h1>
<form action="/demo/html/action_page.php">
<label for="fname">用戶名:</label><br>
<input type="text" id="username" name="username" value=""><br>
<label for="lname">密碼:</label><br>
<input type="password" id="pwsd" name="pwsd" value=""><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>顯示效果：
HTML5 輸入類型
除了以上幾種類型，HTML5 還增加了多個新的輸入類型：
如下代碼：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
數字類型（1 到 5 之間）：
<input type="number" name="quantity" min="1" max="5">
IE9 及早期版本不支持 type="number"。<br>
color 選擇顏色：
<input type="color" name="color"><br>
生日:
<input type="date" name="bday"><br>
年月：
<input type="month" name="bdaymonth"><br>
年周：
<input type="week" name="week_year"><br>
時間：
<input type="time" name="usr_time"><br>
一定范圍
<input type="range" name="points" min="0" max="10"><br>
E-mail:
<input type="email" name="email">
能夠在被提交時自動對電子郵件地址進行驗證<br>
搜索：
<input type="search" name="googlesearch"><br>
電話：
<input type="tel" name="usrtel">
目前只有 Safari 8 支持 tel 類型。<br>
url：
<input type="url" name="url">
提交時能夠自動驗證 url 字段<br>
<input type="submit">
</form>
</body>
</html>效果如下：
單選和多選按鈕
使用 type = “radio” 和 type =“checkbox” 定義是單選還是多選，除了name和value屬性外，單選和多選都有一個 checked屬性定義默認選擇的項，checked = “true”指選中那個選項，表單會將 checked = “true” 的選型值傳遞給后臺。
如下實例：
<!DOCTYPE html>
<html>
<body>
<h4>單選和多選</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 蘋果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陜西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 廣東
<br><br>
<input type="submit">
</form>
</body>
</html>顯示效果：
單選和多選傳遞給后臺的數據是不一樣的，如下會看到地址欄中的數據，多選會發送多個值，后臺將會獲取一個數組形式的數據。
/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi普通按鈕、提交按鈕、重置按鈕
普通按鈕：type = “button”，一般配合腳本使用，語法如下：
<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />value 值就是按鈕在頁面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時所進行的處理。
如下示例：
<!DOCTYPE html>
<html>
<body>
<form>
<input type="button" value="普通按鈕">
<input type="button" value="打開窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
</form>
</body>
</html>
單擊您好按鈕
提交按鈕：type = “submit”，用于提交表單內容，是一種特殊按鈕。
如剛才的登錄表單，提交后會返回結果：
重置按鈕：type="reset"，用于清除表單數據，也是一種特殊按鈕。
輸入數據
點擊重置按鈕后，表單數據清空
重置清空數據
HTML5 按鈕
除了使用input定義按鈕，還可以使用 html5 新增的<button> 標簽定義按鈕，button 使用語法如下：
<form action="/demo/html/action_page.php">
<button type="button">普通按鈕</button>
<button type="submit">提交按鈕</button>
</form> 其它輸入類控件
隱藏域 —— hidden
文件域 —— file
如下示例：
<form action="/demo/html/action_page.php">
<label for="fname">隱藏域:</label>
<input type="hidden" id="hidden" name="hidden" value=""><br>
<label for="lname">文件域:</label>
<input type="file" id="file" name="file" value=""><br>
<input type="submit" value="提交">
</form> 顯示效果
可以看到，隱藏域在頁面中不顯示，單擊文件域選擇文件按鈕可以選擇文件，比如word文件，電子表格文件等，會以非文本方式傳送到后臺的，常用來實現文件上傳功能。
除了input 類型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區別就是可以輸入多行文字，input 文本輸入框是單行的無法輸入多行文字。
如下示例：
<p>textarea 元素定義多行輸入字段。</p>
<form action="/demo/html/action_page.php">
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>效果如下：
rows 屬性定義文本域的高度是幾行，cols 定義文本域寬度占幾列，比如上面定義了高10行寬30列的文本域。
下拉菜單作用和單選按鈕類似，只不過它更加節省空間，當要選擇的選型很多時，就不適合使用radio空間，所以當選項很多的時候，使用下拉菜單，語法如下：
<select name="名稱">
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>多選列表和多選按鈕類似，一樣為了節省空間，當數據選項比較多時，使用多選列表，語法如下：
<select name="名稱" size="可看見的列表項數" multiple>
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>多選比下拉菜單不同之處是多了一個multiple屬性，定義多選的，且表現形式也不一樣，不是下拉而是一個列表。
如下代碼：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜單：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多選列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>顯示效果：
這里需要注意的是，多選列表多選時需要按住ctrl鍵同時鼠標單擊選擇才能多選，效果如下：
到這里，已介紹了大部分的表單控件，現在你可以使用他們制作自己的表單，表單通常在動態網站中使用，這為以后制作動態網站打下基礎。
還有許多屬性沒有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網站學習，感謝關注，學習愉快！
上篇 ： 前端入門——html 表單
下篇： 前端入門 —— 網頁中使用窗口框架
人才剛剛學習HTML不久，會慢慢通過分享學習更多HTML內容。
HTML表單中標簽<form>，作用為提交一些信息，使信息通過瀏覽器傳輸到服務器上，讓用戶與服務器之間有交互作用。
在<form>標簽中有一些屬性，action可以幫助信息提交到指定的地址（服務器）。由于要提交信息，因此必須有輸入框，創建一個輸入框，得用到<input>標簽，在<input>標簽中可以有不同類型的輸入框，而輸入框的類型用到屬性type。當type="text"，輸入框為文本框；當type="password"，輸入框為密碼框，輸入框里的密碼為*，用戶無法看見其內容；當type="radio"，輸入框為單選框；當type="checkbox"，輸入框為多選框；當type="submit"，輸入框為提交按鈕，所有框內的內容可以提交到指定的地址中。另外，<form>標簽中還有屬性為method，其中method可以選擇用get還是post，對于get方法，其作用是提交數據可見，不安全，提交數據長度有限制，但是效率高；而post方法與其相反，其作用是提交數據不可見，安全，提交數據沒有限制，但是效率低。
單設計不僅僅是把不同類型的輸入框排排版、標清楚必填非必填、哪些表單比較復雜適當的加個說明就完了，也需要有需求的支撐、嵌套使用情境、考慮用戶的心理模型。我們將在本系列文章中了解到從表單的產生到表單在頁面上如何呈現，再到使用表單時與表單之間的交互該如何思考。先進入到上篇：聊聊關于表單的基礎內容。
表單作為B端產品中最基礎通用組件，也是在各個B端產品中出現頻率最高的元素之一。表單的設計特別考驗設計師綜合能力和設計細節的。一定程度上，表單設計的好壞也決定了產品的成敗。
當我被陷入一堆表單設計中時，我開始思考，表單設計到底要遵循什么樣的規律，在設計上如何去做取舍？表單該怎么布局？表單的組成元素有哪些？表單有什么交互規范？超長表單該怎么設計？
接下來跟大家聊一聊我對表單設計的研究及日常工作經驗總結。將我自己踩過的坑整理出來，目的是為了幫助那些剛邁入職場的設計師，對表單能有一個更好的了解，從而避免在工作中進入誤區，也希望能給PM們提供一些思路。
如果你認為表單就是指的把一些不同類型的輸入框排排版、標清楚必填非必填、哪些表單比較復雜適當的加個說明就完了。
其實不是，表單設計遠遠不止這些，表單本身也是一個小產品，它也需要有需求的支撐、也需要嵌套使用情境、也需要考慮用戶的心理模型；從表單的產生到表單在頁面上如何呈現，再到使用表單時與表單之間的交互，每一步都需要投入大量的思考來做好表單。
表單的概念并非互聯網原創，在傳統行業中，紙質化的表單就占據了非常重要的工具地位；
B端產品通過為表單增加屬性，使得一個個任務表單能夠在動作——狀態機中流轉，就能夠實現業務的線上化開展和管理。
從廣義的定義來講，表單是指用于數據錄入的一切形式。
從狹義上來講，表單在大家更廣泛的認知印象中，表單則是一類包含輸入框、下拉選擇框等常見控件的組合形式的頁面才屬于表單。
表單的本質核心是提交數據，所以凡是具備采集數據并完成采集后提交數據的交互形式均可稱之為表單。
在B端產品中，表單是用戶向系統傳遞和修改數據信息的主要方式，同時也是系統獲取用戶數據、響應反饋結果的主要方式，可以說表單是人機交互中重要的數據媒介。
想要做好表單設計首先要搞清楚表單的應用場景，在商業產品應用的平臺上，表單使用場景可以粗略的歸為3大類：數據錄入、數據校驗反饋、數據展示。
1、表單設計目標
表單的設計必須優先考慮為用戶減負，提高效率并簡化填寫流程。
另外表單中組件的選擇需要依據具體的數據類型和具體的業務場景進行合理正確的選用，為用戶提供高效的數據錄入表單，降低用戶操作成本、認知負擔，并提高數據采集效率才是表單設計的根本目的。
賈里德·斯普爾曾經有一個經典案例：修改按鈕為網站年收入增加3億美元。聽起來好像是天方夜譚的事情，但是它確實是事實。
良好的設計如何能為商業創造價值，這是設計團隊一直在思考的問題。有一點是可以肯定的，我們用客觀的數據與嚴謹的實驗，去證明我們設計原則與設計模式，讓它們的設計價值最大化，達到為商業創造價值的目標。
a、減少操作，效率為先
為用戶減負為目標，在完成數據采集任務的時候盡量給用戶帶來最小的操作負擔；表單效率是衡量表單設計優劣的重要指標，通過合理的信息輸入組件與頁面布局和交互方式可以使用戶快速完成表單頁的信息填寫任務。
b、準確傳達，目標明確
表單能夠讓用戶快速定位重要信息和目標選項，表單標題、選項和提示等內容準確傳達含義，表意明確；不要讓你傳達的信息產生歧義。
c、保持對話，及時反饋
信息反饋與提示對表單來說是一種很重要的保證用戶正確填寫數據的方式，對用戶的輸入及時給予反饋，及時告知用戶行為的結果，讓用戶及時感知不同操作的前因后果，并及時響應相關操作；
d、安全可靠，操作可控
表單需要有一定的容錯性，對用戶的錯誤操作具備一定的包容性，有合理的操作后果保證機制，不至于由于意外的錯誤操作造成不可控的嚴重后果，針對復雜表單提供分布或即時保存機制，對不同場景任務提供返回、重置、取消、清空、撤銷等容錯性功能；
表單在設計上的結構有：
1、標題
表示用戶錄入和編輯信息的所屬層級，主要位于表單的左上方或者居中位置。
關于標題的設計，分為三種樣式：
標簽指每個數據輸入域前的解釋文本，用于告知用戶相對應的數據輸入字段的具體含義；
注意點：文字上要求盡量簡潔明了，避免出現有歧義、冗長且難以理解的標簽，用詞方面盡量貼近用戶的使用場景或業務場景，在同一個產品系統內或業務系統內盡量保持相同標簽的一致性。
在做標簽的時候，我們需要給標簽的行高和寬度統一。因為開發在寫這個頁面的時候，是把每一個元素放在一個class統一的div或者span標簽內。因此我們在做設計稿的時候，需要把換行元素考慮進去，即使只有一個字，避免以后二次設計和開發。
對標簽的對齊方式又包含：頂對齊，左對齊，右對齊，這個部分后面會詳細地展開說明。
可交互輸入域，是構成表單的核心內容，是表單用來采集數據的入口。輸入區是用戶交互最多也是最能影響使用體驗的區域，不同類型數據選擇與之相應的錄入方式，對提高表單操作效率和用戶體驗大有裨益。
3.1 文本錄入
文本錄入是表單中最常見的和最基礎的信息輸入方式，為用戶提供提供自定義文本信息的輸入接口。
依據文本內容長度可以分為單行文本框和多行文本域，前者適用于輸入文本字符總數較少的場景，后者適用于輸入文本字符總數較多或者不確定的場景。
3.1.1 文本框
結合不同業務場景及相關經驗，文本輸入在不同的業務場景下有一些注意點：
a、選擇適合的長度
輸入框的大小應該向用戶暗示所需輸入內容的長度，所以長度和內容長度需要相匹配，一定程度上可以減輕用戶的操作負擔；
b. 復合輸入框
輸入內容需帶單位，或可以選擇單位，使用特定前/后綴的復合輸入框。
c. 特殊格式自動匹配
對于某些特有格式的輸入內容，自動匹配內容的特有格式，例如電話號碼、密碼和銀行卡號等；
根據米勒定律（對短時記憶能力進行了定量研究，他發現人的短時記憶能力廣度為7±2個信息塊，記憶信息超過了該范圍就容易出錯），通過用戶的記憶結構來提升用戶的閱讀體驗。
d.特殊數值自動提示
對于金融類產品，在輸入金額數字的時候，當數據較大的時候，建議自動提示數量級及單位，能夠方便用戶識別數值，降低出錯率。
e. 智能補全
對于一些關聯性很強的文本輸入，可以通過智能補全的方式來減少用戶不必要的文字輸入，提高填寫速度又能減少出錯，例如地址輸入。
3.1.2 文本域
多行輸入框在 Ant design 中被定義為文本域。結合不同業務場景及相關經驗，文本域在不同的業務場景下有一些注意點：
a、明確提示限制條件
對于有輸入限制的文本輸入，給予用戶明確的輸入提示，增加用戶感知，降低用戶出錯率；
b、文本域自適應
對于多行文本框建議使用可拉伸的自適應高度的文本域，比固定高度的內滾動文本域要好，
從用戶體驗講，可變化的文本框適用于各種用戶的閱讀習慣。同時，因為固定文本框常常會出現滾動條，會使頁面出現多個滾動條，給用戶的使用操作上帶來一定困擾。
在做表單域的行內信息換行時，我們需要給出橫向字數寬度，和上下左右的間距。超出部分是自適應高度，還是顯示滾動條，需要標注出來，并且要指定最小行數，和最大行數。
3.2 選擇錄入
選擇錄入是為用戶預先提供了一定的選擇范圍，指定范圍中選擇目標選項進行錄入，依據選項類型可分為：
單選、多選、選擇器（常用的有下拉單選/多選）、級聯選擇（多層級聯動選擇）、樹選擇、穿梭框、開關。
a、單選框、復選框
一般用于選項不多且相對固定的情況，選項控制在6個以內為宜，用戶可以一眼看到所有內容。
單選框只能是其中一個選項，一般會默認一個選項選中。多選框則可以選擇其中一個或多個選項。
b、開關
使用開關控件的條件是選項的性質互斥（例如：是和否、打開和關閉、開啟和禁用等）；
c、選擇器
根據選擇類型，可以分為單選擇器、多選擇器、級聯選擇器以及樹選擇器4種類型。
優勢：占用空間小，在展開所有選項后，可以按重要程度排列。
劣勢：當選項過多時需要滾動，會放慢用戶輸入速度；不點擊下拉，用戶不知道選項都有什么，不方便比較。
適用場景：適用于選項個數較多（5個以上）的場景和有默認選項的場景；
3.2.1 下拉選擇
即下拉列表，其允許用戶從預定的列表中選擇一個或多個選項，為用戶在選項的數量上提供更多的可能性。這里注意一些 特殊類型的選擇器。
a、自定義多選選擇器
允許用戶自定義添加選項，例如在允許用戶添加自定義標簽類場景中使用。
b、彈框型選擇器
列表選項過多，在下拉面板中展示體驗感差，那么就可以選擇彈框型選擇器的彈框來承載更多的數據信息。
c、搜索型選擇器
用戶的記憶程度不同，一部分用戶可以通過主動搜索獲取選項，一部分用戶可以通過在彈窗中直接選擇獲取選項。
d、表格選擇器
單一維度信息無法讓用戶做出選擇，需要為用戶呈現更多的數據信息才能讓用戶做出合理判斷時，使用可以展示更多數據信息的表格選擇器。
對于選擇錄入，結合不同業務場景及相關經驗，選擇錄入在不同的業務場景下有如下設計要點和使用建議：
避免默認：盡量避免列表設置默認值，除非業務場景中絕大部分用戶將選擇該默認選項，尤其是必填字段，因為有默認值的表單，用戶一般會快速掃描瀏覽，過程中可能會跳過默認項，進而增加犯錯幾率；
多項搜索：當下拉選項列表中選項較多的時候建議增加關鍵字聯想檢索功能，方便查找目標選項；
提示明確：提示信息要明確，避免模糊的提示文本，讓用戶明確知道自己選擇的是什么；
3.2.2 日期/時間/日期時間選擇器
日期及時間選擇：分為日期選擇、時間選擇、日期時間選擇，可以是單個時間，也可以是時間區間；
日期時間選擇：相當于將日期和時間這兩個選擇項集為一身，在同一個選擇器里選擇（年月日時分秒）；相當于兩個下拉框切換使用，步驟1先彈出日期選擇框選擇年月日，選擇好日期后點擊“確定按鈕”旁邊的“選擇時間”，則切換為步驟2的時間選擇框。
時間段選擇：為用戶提供了一種可視化的方式去瀏覽和選擇一個日期、一個時間、一個日期時間或日期范圍。
3.2.3 級聯選擇、樹選擇
二者都屬層級選擇，區別在于級聯選好選項后框內顯示的是含層級的內容選項，且只能選擇需最子集選項（例如：廣東省/廣州市市/天河區，不能選擇廣東省，因為前面的選項只為導航至最子集）
而樹選擇框內展示的是單個選項的內容，不展示層級，但可以選擇任何層級（例如：天河區）
如何選擇呢？
3.2.4 滑塊選擇
滑動型輸入器，展示當前值和可選范圍，通過拖動滑塊在一個固定區間內進行選擇。
滑塊選擇這種交互特點使得在設置音量、亮度等某一個維度的強弱等級的時候是一個比較好的方案，依據數值特點可以分為三種類型，分別為單點連續滑塊、區間連續滑塊和單點間續滑塊。
優勢：便于用戶快速瀏覽大量的選項，提供流暢的用戶體驗。
劣勢：數值選擇具有較強的不準確性，難以精準操作
使用場景：適用于輸入結果相對模糊或不準確的業務場景。
用戶可以在一個連續或非連續的區間內，通過滑動錨點來選擇一個合適的數值或范圍。需求精度要求不高的場景下使用「連續滑塊」可得到更靈活便捷的操作；需求精度要求高的場景下可配合「數字輸入」使用。
3.3 步進器
也稱為計數器，僅允許輸入自定義范圍內標準的數字值，上下按鈕也不是每點擊一次數值±1，可以設置每點擊一次±N，N可以為任何數字，也可以為小數。
3.4 穿梭框
穿梭框較列表選擇的區別在于其將備選和已選分別置于選擇面板的左右兩欄，能夠以很直觀的方式在兩欄中移動元素完成選擇行為。
兩種特殊類型的穿梭框：
3.5 評分
當需要為內容進行評分時使用。
文件上傳為用戶提供將本地文件上傳到系統服務器上的入口，依據上傳方式可劃分為點擊上傳、縮略圖上傳、拖拽上傳三種形式
1、直接上傳
即點擊后通過桌面系統彈窗選擇文件并上傳，多用于EXCEL數據表文件、WORD文件等形式；一般用于不需要預覽效果的文件上傳，文件上傳需要提供明確的文件大小和文件格式。這種情況是上傳圖片和文件合在一個上傳控件里。
分為需要手動點擊頁面上的上傳按鈕才能完成上傳動作和自動上傳兩種
2、顯示縮略圖上傳
一般用于需要顯示預覽效果的文件上傳，同時選擇文件后直接完成上傳動作。文件上傳需要提供明確的文件大小和文件格式，多用于圖片、PDF等文件，一般還可以直接在縮略圖片上賦予其他的交互 (查看、刪除等)。
3、拖拽上傳
用戶拖拽文件到指定區域即可完成上傳，也支持點擊上傳。文件上傳需要提供明確的文件大小和文件格式。
1、選擇框優于輸入框
選擇框為用戶提供了備選的選項，用戶只需要點擊即可完成數據錄入，而輸入框則需要用戶手動自定義輸入，操作復雜度和成本明顯高于選擇框，所以優先考慮選擇代替鍵盤輸入，一方面簡化操作，另一方面也減輕用戶認知和記憶負擔；
2、量少對比優選單/復選框
單/復選框較適用于選項較少（5個以內），同時選項之間較為類似需要強調對比時，可以優先選擇單/復選框，此外當選項能見度和要求快速響應的時，也可以優先考慮單/復選框，能夠直白地提供待選選項，直接選中目標選項，提升輸入效率；
3、量大優先下拉選擇
當選項較多的時候，超過10個，甚至更多的時候，無法直接下拉展示的時候建議提供模糊匹配和排序規則，方便用戶提前預知選項位置或通過關鍵字模糊檢索目標選項；
提示信息是指在用戶輸入信息的過程中提示用戶輸入狀態的輔助信息，提示信息的設計原則：先預防、后糾錯
根據輸入流程將用戶輸入過程分為輸入前、輸入中、輸入后三個階段，依據用戶信息輸入階段，可以將提示信息分為三類：輸入前的引導類提示信息、輸入中/后的反饋類提示信息，前者則包括幫助性提示、輸入性提示，后者則包括錯誤性提示、反饋性提示。
1、輸入前-引導信息
一般是在用戶輸入數據之前就給予用戶的信息，目的是幫助和引導用戶完成數據輸入，防止用戶在輸入時出錯。
1.1 幫助性提示
在用戶填寫表單前對表單填寫內容進行解釋說明的提示信息，并將其置于表單或者某一個輸入域的前面，一般分為全局提示與單項提示。
需要注意的是，表單中應盡量減少幫助文字內容，不要依賴幫助文字來彌補表單難以理解的缺點，也避免稀釋表單重要信息。幫助文字最適合解釋用戶不熟悉或者需要特定的操作和內容。放置的位置通常在毗鄰輸入框的位置。
① 全局提示
全局提示一般位于整個表單的最開始，是對整個表單的解釋說明，包括信息的用途、安全性、保密性等，以此消除用戶不信任。
② 單項提示
單項提示對應單個輸入域，只對此項輸入域進行解釋說明，根據格式塔原理，定位精準便于用戶理解。
單項提示也可以選用不同的布局，分別有提示圖標在鼠標haver時氣泡提示、輸入框下方文字提示、輸入框后方文字提示、單機輸入框氣泡提示4種提示布局。
1.2 輸入性提示
輸入性提示信息即占位符，直接展示在輸入項中，是對某一個輸入域的內容進行提示，當用戶輸入時文本框在獲取焦點后提示文本隱藏，如果是大篇幅的解釋性內容應放在幫助性文字中。
有示例型占位符和通用型占位符兩種。屬于是一種輕量化的提示信息，與其他提示信息相比，視覺負擔較小，占用空間更小，與輸入內容的關聯性更強。
占位符設計時，需要注意的：
注意1：有效提示
提示文字最好能簡潔明了給出有效的提示信息。讓用戶能在上下文中獲取信息，幫助他完成輸入。
用戶填寫表單時最容易出現的問題就是不知道填寫什么格式，例如民族填寫“漢族”還是“漢”；生日填寫“1997-06-11”還是“199年6月11日”這里可以提示具體的填寫示例幫助用戶理解。
注意：必不可少
長期的占位符已經給用戶培養了使用習慣，沒有占位符，用戶在輸入的時候會抱著試一試的心態去點擊，會疑惑是不是應該在這里輸入，不夠直接清晰，對用戶來說是很不友好的。
2、輸入后-反饋信息
反饋提示是在用戶輸入時或輸入后對輸入內容進行的反饋，提示當前輸入域所填寫的內容是否符合填寫規則。
系統狀態的可見性 包括“用戶知道自己在做什么”、“系統在做什么”、“系統進行到了哪一步”、“用戶當前所處環節”等。應當始終為用戶提供適當且及時的反饋，避免用戶執行錯誤操作。
反饋機制的設計原則：預先提示，減少出錯；
①輕量。遵循【告知但不打擾】的基本原則；
②清晰的文案。反饋內容需要明確表達目的及操作后果，錯誤提示需要說清錯誤原因及改正方式；
③保持系統中所有相同事件反饋方式一致，利于培養用戶使用習慣和心理預期。
④就近原則。反饋出現在操作點最近的地方時，最容易被注意到且容易被操作的。
反饋類提示信息包括錯誤性提示和反饋性提示，前者專指錯誤類的信息提示，后者既可以包括錯誤類的反饋提示，也可以包括警告或者正確類的反饋提示。
2.1、錯誤性提示
在填寫表單時，用戶免不了出錯。錯誤消息讓用戶知道無法繼續進行，并且告知如何改正。
2.2、反饋類提示信息
反饋提示一般有正確、錯誤、警告三種狀態。其中，正確狀態通常不給予任何提示，也可采用圖標進行反饋，讓用戶感受更加直觀；反之當用戶錄入的內容與規則不符時，給予錯誤提示信息。警告狀態往往與文本框相結合，當字數超過規則的限制時，給出相對應的反饋。
2.3、校驗形式
在產品設計中我們還需要了解反饋信息的校驗方式，校驗方式主要分為：前端校驗、后端校驗。
2.4、觸發條件
觸發條件是說檢驗的提示信息在什么節點（填寫時、失焦時、點擊提交時）進行提示，這里分為單項觸發、提交觸發。
單項觸發-即時報錯
觸發提示的條件是每填寫完一項時，校驗用于輸入項較多，且某個輸入項有先決條件，會對接下來的輸入產生影響；
提交觸發-輸入完成后報錯
觸發條件是填寫完表單點擊“提交”時統一校驗，用于表單體量較小出錯率較低的表單頁面，給出所有不合規則的表單信息，根據具體的提示內容可以是單項提示也可以全局提示；
關于反饋信息的如何選擇位置，我們下一篇詳細聊聊。
操作按鈕常規意義上指的是“完結”表達操作的按鈕，常見在一些較簡單的表單場景，是對表單內容的反饋，包括提交或不提交。
關于按鈕的分類及各種狀態：
并且對于每一種按鈕，都可以分為常規和禁用兩種狀態。禁用狀態的出現一般是表單所呈現的內容未達到能夠觸發按鈕點擊。同時注意一個頁面只保留一個主按鈕。
1、按鈕位置
在復雜些的表單中，分別會在header區、body區、footer區放置影響全局屬性、僅影響跟隨對象、有“完結流程”屬性的按鈕。
1.1 表單頂部/表單底部
用于放置全局按鈕，兩個位置的功能按鈕是一樣的，只是出現的條件不同。默認顯示表單頂部按鈕，目的在于用戶無需上下滑動到固定位置才能對表單進行操作，省時增效。當頂部按鈕因為頁面上滑被遮蓋了，底部按鈕才懸浮在窗口底部。
1.2 跟隨表單項
需要滾動條滾動到底部顯示操作按鈕，一般用于大部分表單都可以一頁顯示的情況，為了避免編輯后忘記點確定就跳轉頁面，會給表單有修改是否保存的提示彈窗。
1.3 分組底部
對每個分組表單進行的操作按鈕，常用于只需要查看不需要經常編輯的表單。
2、主按鈕禁用策略
對于主按鈕是否采用默認禁用取決于表單的表單項數量，有兩種策略：禁用策略和校驗策略，
當表單項較少的時候，一般在3個以下時，主按鈕采用禁用策略，當有數據錄入的時候則啟用主按鈕，一來便于用戶理解，二來也是對用戶操作的一種反饋；
當表單項比較多的時候，一般超過5項，或者有必填項（必填和非必填同時存在）時，主按鈕建議采用校驗策略。
因為表單項較多的情況下，往往是必填和選填同時存在，若采用禁用原則，則必須是所有必填項全部非空才能啟用主按鈕，這時主按鈕的啟用條件不易被用戶察覺，容易造成用戶困惑，不知道該如何填寫才能啟用主按鈕，采用校驗原則可直接告知不具備操作的原因，因此采用提交時校驗反饋的做法更合適這種多表單項的場景。
3、按鈕的主次按鈕如何設計
表單的動作分為主動作和次動作。例如提交、保存或者繼續等完成表單填寫的動作屬于主動作，取消、重置等允許撤銷輸入的屬于次動作。
如果無法移除表單中的次動作，我們在設計時進行視覺區分，盡量弱化次級動作按鈕的樣式，需要注意的是，在《web表單設計》一書中，測試了幾種主動作和次動作的組合。
從閱讀順序、按鈕層級、對齊方式綜合測試，結果表明在幾種設計方案中，方案A的眼球固定時間較短，完成任務效率更高。方案B，人們的眼球定位時間最長，這是因為人們期望按鈕按照垂直視線左側排列，而不是四處尋找按鈕。方案C中，很多人誤點擊了取消按鈕。
可以發現，說明完成的路徑很重要。主動作和輸入框對齊會減少填寫表單的時間。所以若無特殊考慮，方案A是最佳選擇。
另外，表單中的微文案也很重要，無論是標簽、還是占位符，還是提示性文字，或者反饋性文字……表意都必須清晰易懂，同時需要消除用戶的疑慮，在整個流程中，做出更快更準確的抉擇。
文章很長，感謝您的耐心閱讀。表單系列第一篇，我們主要聊聊關于表單的基礎內容，希望對你有所幫助。
因為篇幅過于長，剩下的三個部分我們留在下一篇。
下期預告：表單基礎知識之：表單常見的布局樣式和交互形式
參考文獻：
1、《web表單設計》
2、來源鏈接：https://ant.design/docs/spec/research-form-cn（來源：Ant Design）
3、表單設計需要注意 http://t.cn/EhMmZPf
4、表單設計http://www.woshipm.com/pd/4147841.html
5、《Ant Design表單設計》
本文由 @三原設計 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash ，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
