Echo ：根據組件的用途，可以分為六大類，Feedback 反饋、form 表單、basic 基礎、data 數據 、navigation 導航、other 其他。

表單在網頁中主要負責數據采集功能；用戶需要填寫輸入數據并且提交到數據庫，則這種組件就是表單類。

本文主要講解表單中的文本和選擇器，其中文本分為 input 短文本、InputAutocomplete 短文本聯想和 InputMultiline 長文本。

一、input 短文本

定義：用于用戶文本輸入，并以字符串的方式提交到數據庫。

使用場景：

• 用戶需要輸入字符時。
• 通過鼠標鍵盤輸入內容。
• 輸入的文本通常置于輸入框。

例如網易考拉優惠券兌換的表單填寫，就是短文本輸入組件，前面是標題，后面是文本輸入框。

input 短文本組件的展示形式可以分為三類：

• 標題和輸入框左右排列；
• 標題和輸入框上下排列；
• 不需要標題的排列。

標題和輸入框左右排列時，短文本組件存在的狀態有初始態、激活態、報錯態、完成態和禁用態。

常見的表單類排版都是左右排版，同時表單之間，標題采用左對齊，輸入框左對齊的情況比較多。有時候標題名字過長的話，左右排列就不夠好，這時候需要采用上下排列。

標題和輸入框上下排版時，存在狀態和左右排列是一致的。

當沒有標題時，存在狀態同左右排列的規則和邏輯。

二、InputAutocomplete 短文本聯想

定義：用戶用于文本輸入，在輸入過程中會聯想匹配文本選項，并以字符串的方式提交到數據庫。

使用場景：

• 需要用戶輸入文本時。
• 提供聯想匹配文本，減少用戶輸入成本。
• 在輸入過程中根據用戶輸入的內容，出現匹配選項，提交的數據是文本而非枚舉項。

例如百度搜索，在輸入框輸入關鍵詞時會出現對應的聯想匹配文本。

和 input 短文本組件相比，InputAutocomplete 短文本聯想唯一的不同就是新增了聯想匹配選項，并且提交的是文本而非枚舉項。

標題和輸入框左右排列時，InputAutocomplete 短文本聯想組件存在的狀態有初始態、激活態、報錯態、完成態和禁用態。

上下排列的狀態和規則邏輯同左右排列。

不含標題的狀態和規則邏輯同左右排列。

三、InputMultiline 長文本

定義：用戶用于長文本輸入，并以文本的方式提交到數據庫。

使用場景：

• 多段文字輸入。
• 需要換行。
• 輸入的文本通常置于輸入框中。

例如新浪微博，在輸入框發微博時，就是長文本輸入，可以換行。

標題和輸入框左右排列時，InputMultiline 長文本存在的狀態有初始態、激活態、報錯態、完成態和禁用態。在輸入過程中一般有字數統計，超過限制字數，不允許用戶輸入。

上下排列邏輯和規則同左右排列。

不含標題的邏輯同左右排列。

四、select 選擇器

定義：用戶通過選擇枚舉項，提交到服務器。后端存儲為枚舉項。

使用場景：

• 彈出一個下拉選項給用戶選擇操作。
• 當選項少時（少于5項），建議直接將選項平鋪，使用 Radio 是更好的選擇。

例如淘寶賣家后臺篩選訂單的狀態時，點擊選擇器，出現下拉列表。這就是一個常見的選擇器，選擇器分為多選和單選兩大類。

下圖為選擇器基本樣式，就是簡單的下拉選項，不可進行關鍵詞的搜索。

下圖是可以搜索的選擇器，當輸入框處于激活態時，浮出下拉列表。在輸入過程中，出現匹配枚舉項，點擊枚舉項，則輸入的關鍵詞清空，同時下拉選項收起。輸入框出現選擇的選項。

有時候存在一個場景，用戶對需要填寫的選項設為空選項，則需要空值的選項。

有時候存在一個場景，用戶選擇了一個選項，但是后面想去掉選擇的選項，不進行選擇。

選擇器多選組件中需要注意的一點就是，用戶在輸入關鍵詞中，選擇對應下拉選項，則輸入的字符串清空，同時出現該選項 tag。

歡迎關注作者的微信公眾號：「UEDC」

「文本框的細節設計」

• 《「這個控件叫什么」系列之輸入框/文本框/Text fields》
• 《講真，你真的懂得文本輸入框設計的那些潛規則么？》
• 《全面實用！如何設計移動端的文本輸入框？》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com