TML作為一種用來描述網頁的語言，是制作網頁必不可少的，但HTML 不是一種編程語言，而是一種標記語言 (markup language），本著為了更好的了解大數據開發的基礎，今天就帶著大家更進一步的了解HTML的使用，HTML的表格與表單。

1.HTML表格

表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的作用就不言而喻了，讓看起來更簡潔直觀有序性。

下面給大家帶來一些常用的標簽：

<table> 表格的最外層容器

<tr> 定義表格行

<th> 定義表頭

<td> 定義表格單元

<caption>定義表格表題

　　<width>:寬度。可以用像素或百分比表示。 常用960像素。

　　<border>：邊框，常用值為0。

　　<cellpadding>：內容跟邊框的距離，常用值為0。

　　<cellspacing>：單元格與單元格之間的間距，常用值為0。

　　<algin>：對齊方式。

　　<bgcolor>：背景色。

<background>：背景圖片。

<align>: 一行內容的水平對齊方式。

<valign>: 一行內容的垂直對齊方式。

<height>：行高。

創建表格

在HTML網頁中，要想創建表格，就需要使用表格相關的標簽。

創建表格的基本語法：

<table>

<tr>

<td>單元格內的文字</td>

...

</tr>

...

</table>

舉個例子

其中：table用于定義一個表格標簽。

tr標簽 用于定義表格中的行，必須嵌套在 table標簽中。

td 用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中。

字母 td 指表格數據（table data），即數據單元格的內容。

再比如說我們可以建立個有顏色的格子，如下圖

表格的作用除了可以顯示一個表格外，有的時候還可以用于輔助排版。但現在都不怎么使用了，因為時代的進步，以前的表格排版的網頁已經被淘汰了。

2. HTML表單

關于表單的制定，因為在瀏覽器中輸入的內容都必須要經過網絡提交到服務器端再處理，所以需要把所有的控件都包含在一個form表單控件中，然后一次提交給服務器，再由服務器處理用戶提交的數據。

HTML 支持有序列表(有序列表是一列項目，列表項目使用數字進行標記。

有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。)無序列表(無序列表也是一個項目的列表，此列項目使用粗體圓點“典型的小黑圓圈“進行標記。)和定義列表(自定義列表不僅僅是一列項目，而是項目及其注釋的組合。自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。)。

表單常用標簽：

form: 表單的最外層容器

input: 用于搜集用戶信息,根據不同的type屬性值,展示不同的控件

Text：普通的文本輸入框

Password：密碼輸入框

Checkbox：復選框

Radio：單選框

File：上傳文件

Submit：提交按鈕

Reset：重置按鈕

Cols：列

Rows：行

注意事項：

<form id="" name="" method="post/get" action="負責處理的服務端">--輸入系統時，必須有

Name ：定義表單的名稱；

Method: 定義表單結果從瀏覽器傳送到服務器的方式，默認參數為：get

Action ：用來指定表單處理程序的位置(服務器端腳本處理程序）

Fieldset：把表單分組；

Legend：分組名稱。

id不可重復，name可重復，get提交有長度限制，并且編碼后的內容在地址欄可見，post提交沒有長度限制，且編碼后內容不可見。

舉個例子

<form action="login.asp" method="post">

<label>用戶名: </label><input type="text" name="username" />

<label>密碼: </label><input type="password" name="password" />

</form>

得到結果如圖

本期的內容比較多，大家可以在平日里多加練習，這是大數據開發基礎的重要部分，做到能更熟練，更準確，希望大家能有所進步。

單設計不僅僅是把不同類型的輸入框排排版、標清楚必填非必填、哪些表單比較復雜適當的加個說明就完了，也需要有需求的支撐、嵌套使用情境、考慮用戶的心理模型。我們將在本系列文章中了解到從表單的產生到表單在頁面上如何呈現，再到使用表單時與表單之間的交互該如何思考。先進入到上篇：聊聊關于表單的基礎內容。

表單作為B端產品中最基礎通用組件，也是在各個B端產品中出現頻率最高的元素之一。表單的設計特別考驗設計師綜合能力和設計細節的。一定程度上，表單設計的好壞也決定了產品的成敗。

當我被陷入一堆表單設計中時，我開始思考，表單設計到底要遵循什么樣的規律，在設計上如何去做取舍？表單該怎么布局？表單的組成元素有哪些？表單有什么交互規范？超長表單該怎么設計？

接下來跟大家聊一聊我對表單設計的研究及日常工作經驗總結。將我自己踩過的坑整理出來，目的是為了幫助那些剛邁入職場的設計師，對表單能有一個更好的了解，從而避免在工作中進入誤區，也希望能給PM們提供一些思路。

如果你認為表單就是指的把一些不同類型的輸入框排排版、標清楚必填非必填、哪些表單比較復雜適當的加個說明就完了。

其實不是，表單設計遠遠不止這些，表單本身也是一個小產品，它也需要有需求的支撐、也需要嵌套使用情境、也需要考慮用戶的心理模型；從表單的產生到表單在頁面上如何呈現，再到使用表單時與表單之間的交互，每一步都需要投入大量的思考來做好表單。

PART 1 表單的基礎理論

一、表單基礎概念

表單的概念并非互聯網原創，在傳統行業中，紙質化的表單就占據了非常重要的工具地位；

B端產品通過為表單增加屬性，使得一個個任務表單能夠在動作——狀態機中流轉，就能夠實現業務的線上化開展和管理。

從廣義的定義來講，表單是指用于數據錄入的一切形式。

從狹義上來講，表單在大家更廣泛的認知印象中，表單則是一類包含輸入框、下拉選擇框等常見控件的組合形式的頁面才屬于表單。

表單的本質核心是提交數據，所以凡是具備采集數據并完成采集后提交數據的交互形式均可稱之為表單。

二、表單的應用場景

在B端產品中，表單是用戶向系統傳遞和修改數據信息的主要方式，同時也是系統獲取用戶數據、響應反饋結果的主要方式，可以說表單是人機交互中重要的數據媒介。

想要做好表單設計首先要搞清楚表單的應用場景，在商業產品應用的平臺上，表單使用場景可以粗略的歸為3大類：數據錄入、數據校驗反饋、數據展示。

三、表單設計原則與目標

1、表單設計目標

表單的設計必須優先考慮為用戶減負，提高效率并簡化填寫流程。

另外表單中組件的選擇需要依據具體的數據類型和具體的業務場景進行合理正確的選用，為用戶提供高效的數據錄入表單，降低用戶操作成本、認知負擔，并提高數據采集效率才是表單設計的根本目的。

2、表單設計原則

賈里德·斯普爾曾經有一個經典案例：修改按鈕為網站年收入增加3億美元。聽起來好像是天方夜譚的事情，但是它確實是事實。

良好的設計如何能為商業創造價值，這是設計團隊一直在思考的問題。有一點是可以肯定的，我們用客觀的數據與嚴謹的實驗，去證明我們設計原則與設計模式，讓它們的設計價值最大化，達到為商業創造價值的目標。

a、減少操作，效率為先

為用戶減負為目標，在完成數據采集任務的時候盡量給用戶帶來最小的操作負擔；表單效率是衡量表單設計優劣的重要指標，通過合理的信息輸入組件與頁面布局和交互方式可以使用戶快速完成表單頁的信息填寫任務。

b、準確傳達，目標明確

表單能夠讓用戶快速定位重要信息和目標選項，表單標題、選項和提示等內容準確傳達含義，表意明確；不要讓你傳達的信息產生歧義。

c、保持對話，及時反饋

信息反饋與提示對表單來說是一種很重要的保證用戶正確填寫數據的方式，對用戶的輸入及時給予反饋，及時告知用戶行為的結果，讓用戶及時感知不同操作的前因后果，并及時響應相關操作；

d、安全可靠，操作可控

表單需要有一定的容錯性，對用戶的錯誤操作具備一定的包容性，有合理的操作后果保證機制，不至于由于意外的錯誤操作造成不可控的嚴重后果，針對復雜表單提供分布或即時保存機制，對不同場景任務提供返回、重置、取消、清空、撤銷等容錯性功能；

PART 2 表單的基礎構成

一、基礎構成

表單在設計上的結構有：

1. 標題；
2. 表單標簽；
3. 占位符；
4. 表單域；
5. 提示信息；
6. 操作按鈕；

二、表單的形式

1、標題

表示用戶錄入和編輯信息的所屬層級，主要位于表單的左上方或者居中位置。

• 第一類：普通表單中就是對表單輸入信息的概括，是典型的表單標題，通常表現為頁面標題或彈窗標題；
• 第二類：在信息分組輸入的表單中出現的分組標題，表現為信息分組標題，源于對輸入信息的分組管理，是對分組字段的概括。

關于標題的設計，分為三種樣式：

2、標簽

標簽指每個數據輸入域前的解釋文本，用于告知用戶相對應的數據輸入字段的具體含義；

注意點：文字上要求盡量簡潔明了，避免出現有歧義、冗長且難以理解的標簽，用詞方面盡量貼近用戶的使用場景或業務場景，在同一個產品系統內或業務系統內盡量保持相同標簽的一致性。

在做標簽的時候，我們需要給標簽的行高和寬度統一。因為開發在寫這個頁面的時候，是把每一個元素放在一個class統一的div或者span標簽內。因此我們在做設計稿的時候，需要把換行元素考慮進去，即使只有一個字，避免以后二次設計和開發。

對標簽的對齊方式又包含：頂對齊，左對齊，右對齊，這個部分后面會詳細地展開說明。

3、表單域或輸入域

可交互輸入域，是構成表單的核心內容，是表單用來采集數據的入口。輸入區是用戶交互最多也是最能影響使用體驗的區域，不同類型數據選擇與之相應的錄入方式，對提高表單操作效率和用戶體驗大有裨益。

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 級聯選擇、樹選擇

二者都屬層級選擇，區別在于級聯選好選項后框內顯示的是含層級的內容選項，且只能選擇需最子集選項（例如：廣東省/廣州市市/天河區，不能選擇廣東省，因為前面的選項只為導航至最子集）

而樹選擇框內展示的是單個選項的內容，不展示層級，但可以選擇任何層級（例如：天河區）

如何選擇呢？

1. 層級不深，在2-3級之間。一級節點在5個節點左右，二、三級節點個數相對較少，使用具有樹形結構的樹選擇器。
2. 層級不深，在2-3級之間。一、二、三級節點個數都相對較多，使用樹選擇器縱向展示不利于用戶查找，建議使用節點分開展示的級聯選擇器。

3.2.4 滑塊選擇

滑動型輸入器，展示當前值和可選范圍，通過拖動滑塊在一個固定區間內進行選擇。

滑塊選擇這種交互特點使得在設置音量、亮度等某一個維度的強弱等級的時候是一個比較好的方案，依據數值特點可以分為三種類型，分別為單點連續滑塊、區間連續滑塊和單點間續滑塊。

優勢：便于用戶快速瀏覽大量的選項，提供流暢的用戶體驗。

劣勢：數值選擇具有較強的不準確性，難以精準操作

使用場景：適用于輸入結果相對模糊或不準確的業務場景。

用戶可以在一個連續或非連續的區間內，通過滑動錨點來選擇一個合適的數值或范圍。需求精度要求不高的場景下使用「連續滑塊」可得到更靈活便捷的操作；需求精度要求高的場景下可配合「數字輸入」使用。

3.3 步進器

也稱為計數器，僅允許輸入自定義范圍內標準的數字值，上下按鈕也不是每點擊一次數值±1，可以設置每點擊一次±N，N可以為任何數字，也可以為小數。

3.4 穿梭框

穿梭框較列表選擇的區別在于其將備選和已選分別置于選擇面板的左右兩欄，能夠以很直觀的方式在兩欄中移動元素完成選擇行為。

• 優點：能夠展示更多的可選項，方便用戶對比已選項與未選項以及更改已選內容，
• 缺點：控件較大，選擇面板占用空間較大
• 適用場景：備選項較多且為多選的，需要在多個可選項中進行多選；

兩種特殊類型的穿梭框：

1. 帶排序穿梭框：允許用戶將常用或者重要的元素靠前排序，自由調整元素順序。
2. 樹/表格穿梭框：元素的展現形式不同，使用不同的穿梭框形態。樹形結構使用樹穿梭框，表格類數據使用表格穿梭框。

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、錯誤性提示

在填寫表單時，用戶免不了出錯。錯誤消息讓用戶知道無法繼續進行，并且告知如何改正。

• 視覺表現：采用醒目的色彩和視覺要素來對比突出。目的只有一個即：引起關注。
• 位置：指導文字鄰近產生錯誤的輸入框，可以更快更便捷的提供改進幫助。
• 時機：確保在適當時機出現，如果過度使用，會讓人沮喪。例如：在用戶輸入進程中停止提示，確保輸入完成才出現。
• 準確：信息精準，不要讓用戶產生歧義；例如“用戶名填寫錯誤”要提示用戶名具體錯誤的原因“用戶名不能添加符號”“用戶名重復”“用戶名不能超過8個字符”等具體原因，讓用戶明確修改意圖。

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是最佳選擇。

8、微文案

另外，表單中的微文案也很重要，無論是標簽、還是占位符，還是提示性文字，或者反饋性文字……表意都必須清晰易懂，同時需要消除用戶的疑慮，在整個流程中，做出更快更準確的抉擇。

小結

文章很長，感謝您的耐心閱讀。表單系列第一篇，我們主要聊聊關于表單的基礎內容，希望對你有所幫助。

因為篇幅過于長，剩下的三個部分我們留在下一篇。

下期預告：表單基礎知識之：表單常見的布局樣式和交互形式

參考文獻：

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 協議

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。

版規則

縮進

使用2個空格縮進

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>

.example {
  color: blue;
}

大小寫

只允許使用小寫。

所有的代碼都用小寫字母：適用于元素名，屬性，屬性值（除了文本和CDATA）， 選擇器，特性，特性值（除了字符串）。

<!-- 不推薦 -->
<A HREF="/">Home</A>

<!-- 推薦 -->
<img src="google.png"
alt="Google">

行為空格

建議刪除行尾白空格。

<!-- 不推薦 -->
<p>What?  </p>

<!-- 推薦 -->
<p>Yes please.</p>

常規Meta規則

編碼

如果沒有特殊需求，一般采用utf-8編碼。如果是cms站點，則遵守該站點的編碼規則。

<!-- 網頁編碼 -->
<meta charset="utf-8">

注釋

盡可能的去解釋你寫的代碼。說明該代碼包括什么、目的是什么、能做什么、為什么使用它等。

注釋是否需要詳盡，取決于項目的復雜程度。

一般單行注釋：

<!-- col -->

模塊間注釋：

<!-- news -->
<div class="news">
  <h2>News</h2>
  <p>...</p>
</div>
<!--/ news -->

循環注釋：

<ul>
  <!-- loop: new list -->
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
  <!-- /loop: new list -->
</ul>

cms輸出注釋：

<!-- cms: news list -->
<ul>
  <li>new's title 1</li>
  <li>new's title 2</li>
  <li>new's title 3</li>
  <li>new's title 4</li>
  <li>new's title 5</li>
</ul>
<!-- /cms: news list -->

Tab選項卡內容注釋：

<!-- tab: news list -->
<div class="tab"></div>
<!-- /tab: news list -->

常規HTML設計規則

文檔類型

使用html5文檔聲明，不再使用XHTML（application/xhtml+xml）。

HTML5是目前所有HTML文檔類型中的首選：

<!DOCTYPE html>

HTML 的正確性

編寫有效、正確的HTML代碼，否則很難達到性能上的提升。

可以使用一些工具驗證你的代碼，如 W3C HTML validator

HTML 的語義性

根據HTML各個元素的用途而去使用它們。

<!-- 不推薦 -->
<div class="col">
  <div class="title">
news</div>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

<!-- 推薦 -->
<div class="col">
  <h2 class="title">
news</h2>
  <p>list1</p>
  <p>list2</p>
  <p>list3</p>
</div>

部分標簽說明：

• div 主要用于布局，分割頁面的結構;
• ul/ol 主要用于無序/有序列表;
• dl/dt/dd 當頁面中出現第一行為類似標題/簡述，然后下面為詳細描述的內容時應該使用該標簽;
• span 沒有特殊的意義，可以用作排版的輔助，然后在css中定義span;
• h1-h6 標題, 根據重要性依次遞減;
• h1 最重要的標題;
• label 使表單更有親和力而且能輔助表單排版;

不推薦使用的標簽：

• font 文字的外觀，大小和顏色;
• u 文本下劃線;
• center 居中對齊;
• s 刪除線;
• strike 刪除線;
• noframes 無視框時的內容;
• iframe 定義嵌入視圖;
• isindex 不建議使用（可搜尋，使用input代替）;
• dir 目錄式列舉;
• menu 菜單列表;
• basefont 定義基本字體;
• applet 定義java程序;
• frame 定義個別視框;
• frameset 視框格式總定義;

多媒體元素降級處理

給多媒體元素，比如canvas、videos、 images增加alt屬性，提高可用性（特別是常用的img標簽，盡可量得加上alt屬性，提供圖片的描述信息）。

<!-- 不推薦 -->
<img src="world.jpg">

<!-- 推薦 -->
<img src="world.jpg"
alt="our world images">

type屬性

在樣式表和腳本的標簽中忽略type屬性。

HTML5默認type為text/css和text/javascript類型，所以沒必要指定。即便是老瀏覽器也是支持的。

<!-- 不推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css"
 type="text/css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js"
 type="text/javascript">
 </script>

<!-- 推薦 -->
<link rel="stylesheet"
 href="//www.google.com/css/maia.css">
<script src="
 //www.google.com/
 js/gweb/analytics/autotrack.js">
 </script>

HTML代碼格式規則

每個塊元素、列表元素或表格元素都獨占一行，每個子元素都相對于父元素進行縮進。按設計稿劃分模塊，盡量使頁面模塊化，模塊與模塊之前要有清晰的注釋。

如上面頁面框架，推薦寫法：

<!-- hader -->
<div class="header">header</div>
<!-- /hader -->
<!-- nav -->
<div class="nav">nav</div>
<!-- /nav -->
<!-- main -->
<div class="main">
  <!-- container -->
  <div class="container">
    <!--news-->
    <div class="news">
      <h2>news<h2>
      <p>...</p>
    </div>
    <!--news-->
  </div>
  <!--/container-->
  <!--sidebar-->
  <div class="sidebar">
sidebar</div>
  <!--sidebar-->
</div>
<!--/main-->
<!--footer-->
<div class="footer">
footer</div>
<!--/footer-->

HTML與SEO

頁面良好層次

保證整個頁面在未加載樣式表時仍有較好的層次清晰的頁面結構。

<!-- 不推薦 -->
<div class="logo">My Site</div>
<div class="nav">
  <a href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Mobile</a>
</div>
<div class="news">
  <div>News</div>
  <a href="#">
news list 1</a>
  <a href="#">
news list 2</a>
  <a href="#">
news list 3</a>
</div>

<!-- 推薦 -->
<h1 class="logo">My Site</h1>
<ul class="nav">
  <li><a href="#">
Home</a></li>
  <li><a href="#">
News</a></li>
  <li><a href="#">
Mobile</a></li>
</ul>
<div class="news">
  <h2>News</h2>
  <ul>
    <li><a href="#">
news list 1</a>
</li>
    <li><a href="#">
news list 2</a>
</li>
    <li><a href="#">
news list 3</a>
</li>
  </ul>
</div>

權重標簽使用

H標簽使用

• h1 權重高，體現當前網頁中相對比較重要的信息，但不宜過多，建議一個頁面只放一個;
• h2 可以做副標題;
• h3 可以做新聞列表;
• h4-h6 可做相關新聞的列表標簽屬性完整;

strong、b使用

將需要加粗的文字使用b標簽來顯示。

將需要強調的文字（主要指包含關鍵詞的信息）使用strong標簽來強調主要內容。

注：b是粗體標簽，屬于實體標簽，它所包圍的字符將被設為bold（粗體）；strong 是加重語氣標簽，屬于邏輯標簽，它的作用是加強字符語氣。

標簽屬性使用

在很多情況下，a都要使用title來說明該鏈接的相關說明或目的意義。

例如：當使用overflow隱藏掉a中的溢出文字時，該a中的title是必不可少的，它可以告訴用戶被隱藏掉的文字內容是什么；又或者當一個圖片型鏈接出現時，該a中的title同樣是必不可少的，它可以告訴用戶這個圖片鏈接是做什么用的。

注：僅在img里添加alt標簽在火狐提示文字是出不來的，alt是圖片加載失敗或未加載完全時顯示出來的提示文字，要想鼠標移上去顯示提示信息應該用title，嚴謹的寫法是img里加入alt和title這兩個標簽。

精簡代碼

代碼保持精簡，最優化，這樣搜索引擎才更喜歡。