本文作者主要講解表單中的文本和選擇器，enjoy~

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

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

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

input 短文本

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

使用場景：

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

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

input短文本組件的展示形式可以分為三類。第1類是標題和輸入框左右排列；第二類是標題和輸入框上下排列；第三列不需要標題的排列。

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

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

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

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

InputAutocomplete 短文本聯想

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

使用場景：

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

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

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

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

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

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

InputMultiline 長文本

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

使用場景：

1. 多段文字輸入
2. 需要換行
3. 輸入的文本通常置于輸入框中

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

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

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

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