填寫(xiě)時(shí)輸入框底色變成橙色

輸入框填寫(xiě)時(shí)出現(xiàn)列表提示

輸入框反饋時(shí)框變成紅色，框外有紅色提示字樣

用途

　　用于搜集用戶信息。

類(lèi)型

　　輸入框根據(jù)屬性可以分為以下幾種類(lèi)型：

１文本框

　　文本輸入框又可以分為單行文本輸入框和多行文本輸入框。單行文本輸入框有單行的文本域／密碼域／手機(jī)和電子郵箱。單行文本輸入框有長(zhǎng)度限制，密碼又有大小寫(xiě)和文字?jǐn)?shù)字之分，而手機(jī)和電子郵箱有有效和無(wú)效之分。多行文本輸入框有長(zhǎng)度和高度兩個(gè)限制，還有默認(rèn)高度和最大高度以及超過(guò)最大高度出現(xiàn)垂直滾動(dòng)條，還有在頁(yè)面占位的實(shí)際高度。

單行的文本輸入框

密碼輸入框

手機(jī)輸入框

郵箱輸入框

多行文本輸入框

２.單選框

　　多個(gè)單選框可以組成一組，在這一組當(dāng)中，只能有一個(gè)被選中。

單選框１

單選框２

３.多選框

　　多選框就是在一組當(dāng)中可以有多個(gè)選擇

多選框

QQ標(biāo)簽的多選框

４.下拉列表框

　　下拉列表式的輸入框一般是有很多個(gè)選項(xiàng)時(shí)才歸列，最右側(cè)會(huì)有提示展開(kāi)的三角按鈕，點(diǎn)擊展開(kāi)后會(huì)有垂直滾動(dòng)條。一種是沒(méi)有默認(rèn)選擇的，還有一種是有默認(rèn)選擇，用戶也可以做更改的。也有循環(huán)滾動(dòng)的列表，多在手機(jī)上使用。

下拉列表式輸入框

下拉列表式輸入框帶默認(rèn)選項(xiàng)

循環(huán)滾動(dòng)列表輸入框

　　輸入框在設(shè)計(jì)時(shí)時(shí)常還要考慮到很多交互上的細(xì)節(jié)，比如在手機(jī)號(hào)的填寫(xiě)時(shí)，為了便于用戶識(shí)別要采用３－４－４的格式顯示；在金額輸入時(shí)要采用千位分隔符；移動(dòng)端輸入時(shí)如果是文字要彈出文字的輸入法，如果是手機(jī)就要彈出數(shù)字的輸入法等等。一切以用戶有更愉快的體驗(yàn)為目標(biāo)。