根據(jù)組件的用途，可以分為六大類，F(xiàn)eedback反饋、form表單、basic基礎(chǔ)、data數(shù)據(jù)、navigation導(dǎo)航、other其他。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供尼瀘西網(wǎng)站建設(shè)、尼瀘西做網(wǎng)站、尼瀘西網(wǎng)站設(shè)計、尼瀘西網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、尼瀘西企業(yè)網(wǎng)站模板建站服務(wù)，十余年尼瀘西做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

表單在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集功能；用戶需要填寫輸入數(shù)據(jù)并且提交到數(shù)據(jù)庫，則這種組件就是表單類。

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

一、input短文本

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

使用場景：

用戶需要輸入字符時。通過鼠標(biāo)鍵盤輸入內(nèi)容。輸入的文本通常置于輸入框。

例如網(wǎng)易考拉優(yōu)惠券兌換的表單填寫，就是短文本輸入組件，前面是標(biāo)題，后面是文本輸入框。

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

標(biāo)題和輸入框左右排列；標(biāo)題和輸入框上下排列；不需要標(biāo)題的排列。

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

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

標(biāo)題和輸入框上下排版時，存在狀態(tài)和左右排列是一致的。

當(dāng)沒有標(biāo)題時，存在狀態(tài)同左右排列的規(guī)則和邏輯。

二、InputAutocomplete短文本聯(lián)想

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

使用場景：

需要用戶輸入文本時。提供聯(lián)想匹配文本，減少用戶輸入成本。在輸入過程中根據(jù)用戶輸入的內(nèi)容，出現(xiàn)匹配選項，提交的數(shù)據(jù)是文本而非枚舉項。

例如百度搜索，在輸入框輸入關(guān)鍵詞時會出現(xiàn)對應(yīng)的聯(lián)想匹配文本。

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

標(biāo)題和輸入框左右排列時，InputAutocomplete短文本聯(lián)想組件存在的狀態(tài)有初始態(tài)、激活態(tài)、報錯態(tài)、完成態(tài)和禁用態(tài)。

上下排列的狀態(tài)和規(guī)則邏輯同左右排列。

不含標(biāo)題的狀態(tài)和規(guī)則邏輯同左右排列。

三、InputMultiline長文本

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

使用場景：

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

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

標(biāo)題和輸入框左右排列時，InputMultiline長文本存在的狀態(tài)有初始態(tài)、激活態(tài)、報錯態(tài)、完成態(tài)和禁用態(tài)。在輸入過程中一般有字?jǐn)?shù)統(tǒng)計，超過限制字?jǐn)?shù)，不允許用戶輸入。

上下排列邏輯和規(guī)則同左右排列。

不含標(biāo)題的邏輯同左右排列。

四、select選擇器

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

使用場景：

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

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

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

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

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

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

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

本文標(biāo)題：構(gòu)建Web端設(shè)計規(guī)范之文本與選擇器
本文URL：http://www.xueling.net.cn/article/cpjjic.html