本文主要講解表單中的文本和選擇器，其中文本分為input短文本、InputAutocomplete短文本聯(lián)想和InputMultiline長文本。
一、input短文本
定義：用于用戶文本輸入，并以字符串的方式提交到數(shù)據(jù)庫。
使用場景：
用戶需要輸入字符時(shí)。通過鼠標(biāo)鍵盤輸入內(nèi)容。輸入的文本通常置于輸入框。
例如網(wǎng)易考拉優(yōu)惠券兌換的表單填寫，就是短文本輸入組件，前面是標(biāo)題，后面是文本輸入框。
input短文本組件的展示形式可以分為三類：
標(biāo)題和輸入框左右排列；標(biāo)題和輸入框上下排列；不需要標(biāo)題的排列。
標(biāo)題和輸入框左右排列時(shí)，短文本組件存在的狀態(tài)有初始態(tài)、激活態(tài)、報(bào)錯(cuò)態(tài)、完成態(tài)和禁用態(tài)。
常見的表單類排版都是左右排版，同時(shí)表單之間，標(biāo)題采用左對齊，輸入框左對齊的情況比較多。有時(shí)候標(biāo)題名字過長的話，左右排列就不夠好，這時(shí)候需要采用上下排列。
標(biāo)題和輸入框上下排版時(shí)，存在狀態(tài)和左右排列是一致的。
當(dāng)沒有標(biāo)題時(shí)，存在狀態(tài)同左右排列的規(guī)則和邏輯。
二、InputAutocomplete短文本聯(lián)想
定義：用戶用于文本輸入，在輸入過程中會(huì)聯(lián)想匹配文本選項(xiàng)，并以字符串的方式提交到數(shù)據(jù)庫。
使用場景：
需要用戶輸入文本時(shí)。提供聯(lián)想匹配文本，減少用戶輸入成本。在輸入過程中根據(jù)用戶輸入的內(nèi)容，出現(xiàn)匹配選項(xiàng)，提交的數(shù)據(jù)是文本而非枚舉項(xiàng)。
例如百度搜索，在輸入框輸入關(guān)鍵詞時(shí)會(huì)出現(xiàn)對應(yīng)的聯(lián)想匹配文本。
和input短文本組件相比，InputAutocomplete短文本聯(lián)想唯一的不同就是新增了聯(lián)想匹配選項(xiàng)，并且提交的是文本而非枚舉項(xiàng)。
標(biāo)題和輸入框左右排列時(shí)，InputAutocomplete短文本聯(lián)想組件存在的狀態(tài)有初始態(tài)、激活態(tài)、報(bào)錯(cuò)態(tài)、完成態(tài)和禁用態(tài)。
上下排列的狀態(tài)和規(guī)則邏輯同左右排列。
不含標(biāo)題的狀態(tài)和規(guī)則邏輯同左右排列。
三、InputMultiline長文本
定義：用戶用于長文本輸入，并以文本的方式提交到數(shù)據(jù)庫。
使用場景：
多段文字輸入。需要換行。輸入的文本通常置于輸入框中。
例如新浪微博，在輸入框發(fā)微博時(shí)，就是長文本輸入，可以換行。
標(biāo)題和輸入框左右排列時(shí)，InputMultiline長文本存在的狀態(tài)有初始態(tài)、激活態(tài)、報(bào)錯(cuò)態(tài)、完成態(tài)和禁用態(tài)。在輸入過程中一般有字?jǐn)?shù)統(tǒng)計(jì)，超過限制字?jǐn)?shù)，不允許用戶輸入。
上下排列邏輯和規(guī)則同左右排列。
不含標(biāo)題的邏輯同左右排列。
四、select選擇器
定義：用戶通過選擇枚舉項(xiàng)，提交到服務(wù)器。后端存儲為枚舉項(xiàng)。
使用場景：
彈出一個(gè)下拉選項(xiàng)給用戶選擇操作。當(dāng)選項(xiàng)少時(shí)（少于5項(xiàng)），建議直接將選項(xiàng)平鋪，使用Radio是更好的選擇。
例如淘寶賣家后臺篩選訂單的狀態(tài)時(shí)，點(diǎn)擊選擇器，出現(xiàn)下拉列表。這就是一個(gè)常見的選擇器，選擇器分為多選和單選兩大類。
下圖為選擇器基本樣式，就是簡單的下拉選項(xiàng)，不可進(jìn)行關(guān)鍵詞的搜索。
下圖是可以搜索的選擇器，當(dāng)輸入框處于激活態(tài)時(shí)，浮出下拉列表。在輸入過程中，出現(xiàn)匹配枚舉項(xiàng)，點(diǎn)擊枚舉項(xiàng)，則輸入的關(guān)鍵詞清空，同時(shí)下拉選項(xiàng)收起。輸入框出現(xiàn)選擇的選項(xiàng)。
有時(shí)候存在一個(gè)場景，用戶對需要填寫的選項(xiàng)設(shè)為空選項(xiàng)，則需要空值的選項(xiàng)。
有時(shí)候存在一個(gè)場景，用戶選擇了一個(gè)選項(xiàng)，但是后面想去掉選擇的選項(xiàng)，不進(jìn)行選擇。
選擇器多選組件中需要注意的一點(diǎn)就是，用戶在輸入關(guān)鍵詞中，選擇對應(yīng)下拉選項(xiàng)，則輸入的字符串清空，同時(shí)出現(xiàn)該選項(xiàng)tag。
Normal
0
7.8 磅
0
2
false
false
false
EN-US
ZH-CN
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:Calibri,sans-serif;}
更多關(guān)于云服務(wù)器，域名注冊，虛擬主機(jī)的問題，請?jiān)L問西部數(shù)碼官網(wǎng)：www.ps-sw.cn
