TML 的 input 標(biāo)簽是構(gòu)建網(wǎng)頁(yè)表單的基石。它提供了多種多樣的輸入字段類型，使網(wǎng)頁(yè)開(kāi)發(fā)人員能夠創(chuàng)建功能強(qiáng)大且用戶友好的表單。從簡(jiǎn)單的文本輸入到復(fù)雜的日期選擇器，input 標(biāo)簽為表單交互提供了無(wú)限的可能性。在本文中，我們將全面探索 input 標(biāo)簽的各種應(yīng)用，并揭秘一些提高用戶體驗(yàn)的技巧。

input 標(biāo)簽的類型揭秘

input 標(biāo)簽提供了豐富的類型屬性，使我們能夠創(chuàng)建不同的輸入字段。一些常見(jiàn)的類型包括：

• 文本輸入：type="text" 創(chuàng)建一個(gè)單行文本輸入字段。
• 密碼輸入：type="password" 創(chuàng)建一個(gè)隱藏用戶輸入的密碼字段。
• 復(fù)選框：type="checkbox" 創(chuàng)建一個(gè)可以選擇多個(gè)選項(xiàng)的復(fù)選框。
• 單選按鈕：type="radio" 創(chuàng)建一個(gè)只能選擇一個(gè)選項(xiàng)的單選按鈕。
• 下拉列表：type="dropdown" 或 type="select" 創(chuàng)建一個(gè)下拉列表供用戶選擇。

自定義輸入字段

input 標(biāo)簽的真正強(qiáng)大之處在于它的自定義能力。你可以利用各種屬性來(lái)定制輸入字段，滿足特定的需求。例如：

• placeholder 屬性為輸入字段提供占位符文本，指導(dǎo)用戶輸入。
• required 屬性確保輸入字段在提交表單前必須填寫。
• pattern 屬性使用正則表達(dá)式來(lái)驗(yàn)證輸入是否符合特定模式。
• min 和 max 屬性可以指定輸入字段的數(shù)值范圍。

增強(qiáng)用戶體驗(yàn)

除了基本的輸入字段類型，input 標(biāo)簽還提供了多種功能來(lái)增強(qiáng)用戶體驗(yàn)：

• 自動(dòng)完成：autocomplete 屬性可以啟用瀏覽器自動(dòng)完成功能，幫助用戶快速填寫表單。
• 輸入提示：list 屬性可以將輸入字段與 datalist 元素關(guān)聯(lián)，為用戶提供輸入提示。
• 日期和時(shí)間選擇器：type="date" 和 type="time" 允許用戶方便地選擇日期和時(shí)間。
• 文件上傳：type="file" 讓用戶可以上傳文件。

樣式化輸入字段

使用 CSS，你可以完全控制輸入字段的外觀和感覺(jué)，使其與網(wǎng)頁(yè)設(shè)計(jì)完美融合。你可以改變輸入字段的背景顏色、邊框、字體大小和圓角等。來(lái)看一個(gè)例子：

<style>
  input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
</style>

<input type="text" placeholder="輸入你的名字">

在這個(gè)例子中，我們使用 CSS 為文本輸入字段添加了內(nèi)邊距、邊框和圓角。

結(jié)論：打造動(dòng)態(tài)表單

HTML input 標(biāo)簽為網(wǎng)頁(yè)開(kāi)發(fā)人員提供了構(gòu)建動(dòng)態(tài)表單的強(qiáng)大工具。通過(guò)結(jié)合不同的輸入類型、自定義屬性和樣式化技術(shù)，你可以創(chuàng)建出引人入勝且易于使用的表單。不斷探索 input 標(biāo)簽的無(wú)限可能，讓你的網(wǎng)頁(yè)表單更加高效、直觀和視覺(jué)吸引力！釋放你的創(chuàng)造力，打造令人難忘的用戶體驗(yàn)！

文將我自己踩過(guò)的坑整理出來(lái)，目的是為了幫助那些剛邁入職場(chǎng)的設(shè)計(jì)師，對(duì)表單能有一個(gè)更好的了解，從而避免在工作中進(jìn)入誤區(qū)。

本文共計(jì)11000個(gè)字，閱讀大約需要30分鐘

前言

每個(gè)人生活中，都在和表單打交道，各種表格，表單需要填寫，而表單在產(chǎn)品中主要負(fù)責(zé)數(shù)據(jù)采集功能。作用和現(xiàn)在一樣——信息錄入。表單也是最常用的信息錄入的工具，隨著互聯(lián)網(wǎng)興起，很多表單被放到了電子屏上填寫，特別是最近幾年，隨著 B 端的興起，和表單打交道的人越來(lái)越多，那么作為設(shè)計(jì)師，我們?nèi)绻O(shè)計(jì)出一個(gè)糟糕的表單，會(huì)極大影響用戶信息的錄入的效率。

我們先看看表單的結(jié)構(gòu)，一個(gè)表單有三個(gè)組成部分：

• 表單標(biāo)簽（標(biāo)題）
• 表單域（輸入框），包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。
• 表單按鈕：包括提交按鈕、保存按鈕、復(fù)位按鈕和一般按鈕；用于將表單數(shù)據(jù)傳送到服務(wù)器上

本文主要針對(duì)表單域——輸入框部分的設(shè)計(jì)，進(jìn)行講解，會(huì)涉及一點(diǎn)代碼知識(shí)，建議查資料閱讀。

初識(shí)輸入框

常見(jiàn)的表單類別：文本輸入框、密碼輸入框、其中文本輸入框又包含中文輸入框、英文輸入框、數(shù)字輸入框等。

其中我們接觸最多的就是需要錄入信息的輸入框。

在內(nèi)容開(kāi)始之前，先來(lái)了解一下輸入框在前端開(kāi)發(fā)中的模樣。

如圖所示，輸入框分為標(biāo)簽，文本輸入框，和占位符三個(gè)最基本結(jié)構(gòu)。根據(jù)特殊場(chǎng)景，會(huì)加上幫助信息，提示信息，反饋信息等等。

輸入框如何設(shè)計(jì)

在文章開(kāi)篇我們說(shuō)到，表單結(jié)構(gòu)為：表單標(biāo)簽（標(biāo)題）、表單域（輸入框）、表單按鈕。三部分組成，但我們作為設(shè)計(jì)師在設(shè)計(jì)時(shí)，考慮的遠(yuǎn)遠(yuǎn)多于這三部分，我們更多是去做交互上的思考。

從交互層面上思考，表單在設(shè)計(jì)上的結(jié)構(gòu)有：

• 表單標(biāo)簽
• 輸入限制
• 占位符
• input 輸入框大小
• 輸入框焦點(diǎn)
• 多行文字規(guī)則
• 報(bào)錯(cuò)提醒
• 喚起鍵盤樣式（移動(dòng)端專屬）
• 幫助性信息
• 表單屬性（是否必填）
• 結(jié)果反饋
• 微文案

1. 標(biāo)簽

此處所講的標(biāo)簽，更多的是講表單的布局結(jié)構(gòu)，合理的表單結(jié)構(gòu)，能提高用戶閱讀效率，同時(shí)還能降低信息填寫時(shí)的錯(cuò)誤率。

我們常見(jiàn)的布局結(jié)構(gòu)：左右、上下、內(nèi)部。

左右和上下結(jié)構(gòu)，左右結(jié)構(gòu)常用在 pc 端，左右結(jié)構(gòu)在用戶體驗(yàn)上，視覺(jué)路徑相對(duì)較長(zhǎng)，特別是在多行信息錄入時(shí)，尤其明顯。

但在網(wǎng)頁(yè)端我們大多看到的都是左右結(jié)構(gòu)，這是因?yàn)橛锌臻g占比的元素，在 pc 端，橫向空間很大，需要考慮到協(xié)調(diào)的關(guān)系，如果采用上下結(jié)構(gòu)，在內(nèi)容過(guò)多的情況下，就會(huì)出現(xiàn)重心偏左的視覺(jué)效果。

而且，在 pc 端，視線距離屏幕較遠(yuǎn)，視覺(jué)聚焦面積更大，因此視覺(jué)路徑較長(zhǎng)的這一點(diǎn)就被中和掉了。

因此在 pc 端，如果展示內(nèi)容較多，可以選擇左右結(jié)構(gòu)。

而內(nèi)容較少，在五個(gè)或以內(nèi)，就可以選擇上下結(jié)構(gòu)。

而我們?cè)谝苿?dòng)端很少見(jiàn)到左右結(jié)構(gòu)，這是因?yàn)橐苿?dòng)端的限制——屏幕太小，一個(gè)橫屏展示不開(kāi)，特別是在標(biāo)簽名字很長(zhǎng)的時(shí)候，弊端更加明顯，因此在移動(dòng)端更多的是使用上下結(jié)構(gòu)。當(dāng)然缺點(diǎn)除了識(shí)別度會(huì)降低，視覺(jué)路徑增長(zhǎng)之外，縱向空間占比也會(huì)增加，本身一屏就能 展示完，現(xiàn)在需要兩屏甚至更多。

而我們?cè)?pc 端，如果標(biāo)簽名字太長(zhǎng)，也是可以選擇上下結(jié)構(gòu)。根據(jù)不同的使用場(chǎng)景，選擇相對(duì)最合適的方案。

除了常見(jiàn)的左右，和上下結(jié)構(gòu)，還有內(nèi)部結(jié)構(gòu)——將標(biāo)簽放在輸入框內(nèi)部，這種也常用在移動(dòng)端，它的空間占比很小，對(duì)移動(dòng)端的小屏來(lái)說(shuō)，是非常友好的，但如果在交互上處理不好，會(huì)有很大的缺陷。

內(nèi)部標(biāo)簽結(jié)構(gòu)，只有提示性文字，用作提示用戶應(yīng)該輸入什么內(nèi)容，但用戶在輸入的時(shí)候，內(nèi)部的標(biāo)簽/提示性文字就會(huì)消失，這時(shí)候，用戶會(huì)失去它是否輸入準(zhǔn)確的唯一判別標(biāo)準(zhǔn)。

而用戶如果需要判別自己是否輸入準(zhǔn)確，需要?jiǎng)h掉自己剛剛輸入的文字，看一眼提示信息，再次輸入。如果碰巧遇到有懷疑心的用戶，這種設(shè)計(jì)會(huì)讓用戶抓狂。

如圖下所示，當(dāng)字段大于三個(gè)的時(shí)候，用戶再看到這個(gè)表單，會(huì)對(duì)自己填寫表單進(jìn)行思考，思考自己填的是什么，甚至?xí)?duì)自己填寫信息的正確性進(jìn)行懷疑，這種現(xiàn)象從心理學(xué)角度來(lái)看，是因?yàn)槿说乃查g記憶局限所造成的。

人在短時(shí)間內(nèi)只能記住 5～9 個(gè)單位，即「7 加減 2」法則，這是大部分用戶的極限，但設(shè)計(jì)不是要去挑戰(zhàn)極限，而是要思考，還有一部分用戶是遠(yuǎn)遠(yuǎn)達(dá)不到「7 加減 2」這個(gè)范疇，因此，在設(shè)計(jì)的時(shí)候，就需要降低用戶的記憶門檻，采用更加適用的「2 加減 1」原則，當(dāng)用戶需要輸入的字段多余三個(gè)的時(shí)候，就必須給表單留下標(biāo)簽，用來(lái)提示用戶。

當(dāng)內(nèi)容過(guò)多，你根本不知道自己填寫的是什么。

尼爾森·諾曼集團(tuán)的凱蒂·舍溫（Katie Sherwin）在她上傳的文章中提到將標(biāo)簽替換為占位符的七個(gè)不好的原因

1. 消失的占位符文本會(huì)使用戶的短期記憶緊張
2. 沒(méi)有標(biāo)簽，用戶無(wú)法在提交表單之前檢查所填寫的內(nèi)容
3. 出現(xiàn)錯(cuò)誤消息時(shí)，人們不知道如何解決問(wèn)題
4. 當(dāng)將光標(biāo)放在表單字段中，占位符文本消失時(shí)，使用鍵盤導(dǎo)航的用戶來(lái)說(shuō)很不友好。
5. 其中包含的字段不太明顯。
6. 用戶可能會(huì)將占位符誤認(rèn)為是自動(dòng)填寫的數(shù)據(jù)
7. 有時(shí)用戶必須手動(dòng)刪除占位符文本。

對(duì)于上述觀點(diǎn)，我贊同部分，對(duì)于第六條，無(wú)論有沒(méi)有標(biāo)簽，占位符都存在，除非刪掉占位符，當(dāng)然，在占位符的文案闡述有歧義的時(shí)候，會(huì)出現(xiàn)這種情況。

第七條完全就是一個(gè) js 觸發(fā)條件的配置問(wèn)題，而且在 html 中 input 標(biāo)簽中的 placeholder 占位符的默認(rèn)屬性，在獲取焦點(diǎn)后，輸入時(shí)，占位符會(huì)自動(dòng)消失。因此一般情況下，是不存在需要手動(dòng)刪除占位符的（當(dāng)然，也許是我翻譯有誤。）文末有鏈接，感興趣的可以去看看。

在有些場(chǎng)景，因?yàn)榭臻g占比或視覺(jué)等因素，需要?jiǎng)h掉標(biāo)簽，可以采用下面兩種方案：

第一種，在內(nèi)部加入 icon，用作信息提醒，缺點(diǎn)是 icon 屬于圖畫，是一種很抽象的東西，相比文字，它的表達(dá)能力就太弱了，碰到同類信息時(shí)，識(shí)別度不是很高。比如有兩欄信息，一欄是籍貫、一欄是現(xiàn)在居住地址，很難用 icon 去區(qū)分兩者。

第二種，是谷歌的一種設(shè)計(jì)方式，用戶在輸入時(shí)內(nèi)部標(biāo)題（提示信息）進(jìn)行浮動(dòng)位移，即節(jié)省了空間，提示性信息依舊在；缺點(diǎn)是，相比普通左右或上下結(jié)構(gòu)需要一定的開(kāi)發(fā)成本。

2. 輸入限制

為什么要做輸入限制，一是為了陳列這些數(shù)據(jù)時(shí)，可以根據(jù)長(zhǎng)度來(lái)確定它的一種展現(xiàn)方式，二是為了減輕數(shù)據(jù)庫(kù)的壓力。

輸入限制有兩種，第一種是對(duì)表單域輸入的信息進(jìn)行字?jǐn)?shù)限制，比如發(fā)表 QQ 個(gè)性簽名時(shí)的字?jǐn)?shù)限制。

在用戶輸入的時(shí)候，右下角會(huì)告訴用戶已經(jīng)輸入了多少字，如果超過(guò) 80 字后會(huì)變紅色，用來(lái)警示用戶，并且此時(shí)的表單域也無(wú)法輸入新的內(nèi)容

微信在朋友圈發(fā)表時(shí)，做了字?jǐn)?shù)限制，但沒(méi)有在輸入過(guò)程中明確地告訴用戶，等到輸入過(guò)長(zhǎng)提交時(shí)，彈窗提醒用戶，內(nèi)容過(guò)長(zhǎng)提交不了，用戶精心編輯長(zhǎng)文，到了提交的時(shí)候，卻發(fā)現(xiàn)字?jǐn)?shù)過(guò)長(zhǎng)，又不得不刪掉一些自己已經(jīng)寫好的東西。因此我們?cè)谧隽讼拗频那闆r下，需提醒用戶還剩多少字。

第二種是做屬性限制，比如在數(shù)字文本框時(shí)，輸入漢字，或者字母，這就極大地增加了用戶的錯(cuò)誤率。一般情況下，開(kāi)發(fā)小哥都會(huì)寫上這個(gè)限制條件，但有些時(shí)候可能會(huì)因?yàn)橐恍┰颍容^著急，直接使用「input」框默認(rèn)的「text」類別，沒(méi)有加限制，這個(gè)時(shí)候我們?nèi)绻跍y(cè)試過(guò)程中發(fā)現(xiàn)了該問(wèn)題，就需要去提醒開(kāi)發(fā)小哥。

而且，根據(jù)不同的信息類型，要給相應(yīng)的屬性限制，比如身份證的 18 位，手機(jī)號(hào)的 11 位等。

3. 占位符

在前面，也講過(guò)占位符的一些問(wèn)題，在設(shè)計(jì)中我們要注意文字清晰明了、簡(jiǎn)短一致，在顏色選擇上，作為提示性信息，視覺(jué)層級(jí)較弱，不宜用太過(guò)突出的顏色。

為什么說(shuō)必不可少，我們不妨試一下，將占位符刪掉，是不是看著有一點(diǎn)別扭，因?yàn)殚L(zhǎng)期的占位符已經(jīng)給用戶培養(yǎng)了使用習(xí)慣，沒(méi)有占位符，用戶在輸入的時(shí)候會(huì)抱著試一試的心態(tài)去點(diǎn)擊，會(huì)疑惑是不是應(yīng)該在這里輸入，不夠直接清晰，對(duì)用戶來(lái)說(shuō)是很不友好的。

而且，在 HTML5 中，input 標(biāo)簽中有 placeholder 占位符這個(gè)屬性是有一定原因的。而我們加入占位符，用戶在填寫表單的時(shí)候，一眼看上去就知道應(yīng)該在哪里填寫，怎么填寫，清晰明了。

圖中左側(cè)占位符雖然簡(jiǎn)短，但不明了，用戶在輸入時(shí)，視覺(jué)焦點(diǎn)是在輸入框，此時(shí)如果用戶忘記需要輸入什么。會(huì)做視線偏移，去看標(biāo)簽名字，再輸入，即使這個(gè)過(guò)程哪怕只需要 0.05 秒，但對(duì)用戶來(lái)說(shuō)，依舊不夠友好，如果在提示性信息就明確表示輸入什么，用戶可以一目了然。

而且，在某些場(chǎng)景中，一個(gè)輸入框可以輸入多種信息比如登錄界面，在用戶名可以輸入郵箱、手機(jī)號(hào)、用戶名，這個(gè)時(shí)候我們?nèi)绻脴?biāo)簽來(lái)提醒，顯然是不合理的，而占位符可以起到很好的提示效果。

我們常用的社交產(chǎn)品 QQ 和微信，就采用了這種樣式，另外在這里插一嘴，QQ 這個(gè)界面在按鈕處理上是不合格的，有心細(xì)的朋友嗎？

4. 輸入框大小

輸入框大小與邊距

本節(jié)涉及到一些代碼知識(shí)，建議細(xì)嚼慢咽。

我們?cè)谠O(shè)計(jì)表單域（輸入框）時(shí)，我們所畫的輸入框，并不是前端在寫的時(shí)候真實(shí)的有效輸入框，而需要考慮的其實(shí)有兩個(gè)元素的大小，其中外部我們能看到的部分為可視大小（暫稱為 input 框），內(nèi)部為有效輸入框大小（暫稱為有效輸入框）

圖中的紅色區(qū)域就是有效輸入范圍。

而前端在開(kāi)發(fā)的時(shí)候，常常采用兩種方式。

第一種：因?yàn)?input 框?qū)傩栽颍瑸榱瞬季址奖悖_(kāi)發(fā)在寫的時(shí)候，不會(huì)給描邊（border）樣式屬性，而會(huì)把放在

或者標(biāo)簽之中，給這兩個(gè)標(biāo)簽添加樣式大小。我們所見(jiàn)到的外框可視描邊屬性也是加在

或者標(biāo)簽之上。這個(gè)時(shí)候給一個(gè)外邊距（magin）。

代碼如下：

<div style="width: 512px; height: 32px; border: 1px solid#9195a3; ">

<input type="text" placeholder="請(qǐng)輸入"

style="width: 488px; font-size: 14px; line-height: 24px; border: 0; margin: 4px 12px;">

</div>

鑒于有些朋友沒(méi)有涉及代碼，做個(gè)講解：

有一個(gè)種類為 div，寬為 512px，高為 32px，描邊為 1px，且顏色為 #9195a3 的盒子。

里面裝了一個(gè)寬為 488px，描邊為 0 的輸入框。這個(gè)輸入框距離 div 盒子的上下間距為 4px；左右間距為 12px，并且這個(gè)輸入框里文字的大小為 14px，行高為 24px。

第二種：就是下面這種，給加上寬（width）、高（hight）和描邊（border）屬性，同時(shí)寫上padding，內(nèi)間距，來(lái)控制input有效輸入框的大小和位置。

代碼如下：

<input type="text" placeholder="請(qǐng)輸入"

style="width: 512px; height: 28px; border: 1px solid#9195a3; font-size: 14px; 

line-height: 24px; padding: 4px 12px;">

依舊講解：

有一個(gè)寬為 512px，高為 28px，描邊為 1px，且顏色為 9195a3 的輸入框，把他的文字輸入/顯示位置，往里面擠了上下間距為 4px，左右間距為 12px 的距離。并且這個(gè)輸入框里文字的大小為 14px，行高為 24px。

百度首頁(yè)采用的就是第二種方式

打開(kāi) F12 開(kāi)發(fā)者模式（或右鍵——檢查）

第一張圖中可以看出，灰色部分的邊框，即設(shè)計(jì)師最常需要畫的。

第二張圖和第三張圖中，藍(lán)色部分為有效輸入框，也就是我們輸入文字并顯示的地方，在這里，開(kāi)發(fā)給了框一個(gè)大小，然后給 padding 屬性，有效輸入框就會(huì)自動(dòng)往里縮，也就是圖中的藍(lán)色部分。

因此，我們?cè)诶L制設(shè)計(jì)圖的時(shí)候，需要給開(kāi)發(fā)標(biāo)有效輸入框的大小與間距。我這里設(shè)置了紅色，為了不影響視覺(jué)，我們可以將不透明度降為零，在交接到藍(lán)湖或者像素大廚，開(kāi)發(fā)都能看到 input 框的大小，可以看不見(jiàn)，但必須存在。

在 input 框中有 icon 時(shí)，也要注意 icon 與 input 框之間的間距。

如果有些朋友，因?yàn)槟承┮蛩靥^(guò)了代碼部分，不管開(kāi)發(fā)采用哪種方式，作為設(shè)計(jì)的我們，都可以用一句話來(lái)總結(jié)上邊內(nèi)容：給 input 框繪制一個(gè)有效輸入范圍。

input框尺寸大小

寬度：在做輸入框尺寸時(shí)，需要根據(jù)內(nèi)容的長(zhǎng)短，合理地設(shè)計(jì)輸入框大小

文本框的長(zhǎng)度會(huì)給輸入信息的用戶心理暗示，他們會(huì)根據(jù)文本框的長(zhǎng)度來(lái)判斷需要輸入內(nèi)容的長(zhǎng)度。

高度：在 Ant Design 上，對(duì)輸入框定義了三種尺寸大小(大、默認(rèn)、小)，40px、32px、24px、這不是固定的數(shù)據(jù)，在做項(xiàng)目的時(shí)候，可以根據(jù)自己產(chǎn)品的特性來(lái)選擇適合自己產(chǎn)品的規(guī)范。

5. 輸入框焦點(diǎn)

輸入框焦點(diǎn)，對(duì)于輸入框，當(dāng)用戶選中準(zhǔn)備輸入的時(shí)候，應(yīng)當(dāng)提供清晰的視覺(jué)定位，比如外輸入框的樣式的變動(dòng)，或者閃動(dòng)的光標(biāo)。一般情況下，選擇光標(biāo)都默認(rèn)存在，光標(biāo)的大小取決于字體的大小，因此不用對(duì)光標(biāo)進(jìn)行二次設(shè)計(jì)。

在表單內(nèi)容較多的時(shí)候，我們可以給輸入框的樣式做變動(dòng)，可以更清晰地給用戶做目標(biāo)視覺(jué)定位。

6. 多行文字規(guī)則

在表單當(dāng)中，多行文字一般出現(xiàn)在兩個(gè)地方，一是表單標(biāo)簽，二是行內(nèi)信息。

在做標(biāo)簽的時(shí)候，有時(shí)候會(huì)出現(xiàn)一個(gè)名字很長(zhǎng)的標(biāo)簽，我們給文字設(shè)定寬度和行高，我們給出規(guī)則，比如最多五個(gè)字，超出部分做換行處理，我們需要給標(biāo)簽的行高和寬度統(tǒng)一。

因?yàn)殚_(kāi)發(fā)在寫這個(gè)頁(yè)面的時(shí)候，是把每一個(gè)元素放在一個(gè) class 統(tǒng)一的 div 或者 span 標(biāo)簽內(nèi)。因此我們?cè)谧鲈O(shè)計(jì)稿的時(shí)候，需要把換行元素考慮進(jìn)去，即使只有一個(gè)字，避免以后二次設(shè)計(jì)和開(kāi)發(fā)。

在做表單域的行內(nèi)信息換行時(shí)，我們需要給出橫向字?jǐn)?shù)寬度，和上下左右的間距。也就是開(kāi)始我們要畫出 input 框的原因，開(kāi)發(fā)可以直接根據(jù) input 框進(jìn)行定位。

且當(dāng)內(nèi)容過(guò)多的時(shí)候，我們需要做隱藏處理

比如設(shè)定輸入 4 行文字以內(nèi)，隨著文字每增加一行輸入框會(huì)自動(dòng)向上撐開(kāi)。文字超過(guò) 4 行，輸入框大小就不會(huì)變動(dòng)了，4 行以上的文字會(huì)被遮擋住，但我們?cè)诮o文字做遮擋的時(shí)候，要注意提醒用戶上方有文字被遮擋。一般采用的方式是對(duì)最上方一行文字遮擋一半。

上述情況只在輸入框空間占比很小，同時(shí)多行文字出現(xiàn)較為頻繁的場(chǎng)景下才會(huì)使用。比如實(shí)時(shí)聊天界面。

而在一般情況下，只給輸入框做單行處理，同時(shí)給超出部分文字做隱藏。

而明確需要多行輸入的輸入框，會(huì)在大尺寸大小上做區(qū)別，正如我前邊所提的那樣，輸入框的大小或影響用戶對(duì)該輸入框內(nèi)容輸入多少對(duì)判斷，輸入框尺寸大，在用戶潛意識(shí)里就會(huì)認(rèn)為這是可以輸入很多字的。

而多行輸入框在 ant design 中被定義為文本域。

即：

超出部分是自適應(yīng)高度，還是顯示滾動(dòng)條，需要標(biāo)注出來(lái)，并且要指定最小行數(shù)，和最大行數(shù)。

否則開(kāi)發(fā)會(huì)采用默認(rèn)的以滾動(dòng)條的形式來(lái)展示。

7. 報(bào)錯(cuò)提醒

我們有時(shí)在填寫一個(gè)表單，全部信息填寫完成，在點(diǎn)擊提交后，突然彈出一個(gè)框，被告知信息填寫錯(cuò)誤。自動(dòng)返回填寫頁(yè)面，之前的填寫好的信息全部消失不見(jiàn)，這種行為對(duì)于用戶來(lái)說(shuō)，其實(shí)是很抓狂的。脾氣暴躁一點(diǎn)的，可能會(huì)直接砸電腦。

因?yàn)橛脩粼谔顚懡Y(jié)束之后，大腦中分泌多巴胺，獲得愉悅感，但在這個(gè)時(shí)候一個(gè)報(bào)錯(cuò)，把臨到腦門的多巴胺給硬生生逼了回去，是很影響用戶心情的，無(wú)論表單中所承載的信息有哪些，都應(yīng)該讓用戶感受到引導(dǎo)感。用戶所需要的是引導(dǎo)他完成表單的填寫，而不是對(duì)他填寫表單做判斷。

因此我們?cè)谟脩糨斎氲臅r(shí)候，就應(yīng)及時(shí)針對(duì)用戶錄入的信息進(jìn)行判斷，有些前端自己就能做，有些需要掃一遍數(shù)據(jù)庫(kù)，做信息對(duì)比，然后 告知用戶信息重復(fù)，總之及時(shí)做判斷，并給出反饋，同時(shí)引導(dǎo)用戶完成正確填寫操作，不要等到用戶點(diǎn)提交按鈕后，才給用戶做出判斷。

8. 喚起鍵盤樣式

在移動(dòng)端，只要涉及到表單信息錄入，都會(huì)喚起鍵盤，根據(jù)不同的使用場(chǎng)景給用戶喚起不同的鍵盤樣式，可以很大程度上節(jié)省用戶的時(shí)間，用戶體驗(yàn)也會(huì)得到顯著提升。

如果我們?cè)诮桓对O(shè)計(jì)稿的時(shí)候，沒(méi)有標(biāo)注鍵盤類型，開(kāi)發(fā)就會(huì)使用默認(rèn)的中文鍵盤，用戶在使用的時(shí)候，就會(huì)造成不必要的困擾

有些金融類產(chǎn)品需要使用亂序的安全鍵盤，也需要額外標(biāo)注。

在移動(dòng)端輸入端時(shí)候，有時(shí)候喚起鍵盤，會(huì)遮擋掉關(guān)鍵性按鈕，我們?cè)谠O(shè)計(jì)過(guò)程中，就需要充分考慮到這一點(diǎn)，并且規(guī)避掉。

具體做法可以參考以下兩種方式：

第一種，前端不給上邊元素定位，喚起鍵盤時(shí)，鍵盤自動(dòng)頂上去。適用于內(nèi)容簡(jiǎn)單，且上方無(wú)重要內(nèi)容的頁(yè)面。

第二種，界面字段少，可以在安全區(qū)域內(nèi)設(shè)計(jì)相關(guān)內(nèi)容。

9. 幫助性信息

有時(shí)候需要幫助性信息，來(lái)輔助用戶完成表單填寫，當(dāng)文本簡(jiǎn)短的時(shí)候，可以直接放在該輸入框的附近，當(dāng)文案過(guò)長(zhǎng)的時(shí)候，就需要做氣泡框，獲取鼠標(biāo)焦點(diǎn)，則展開(kāi)信息，失去焦點(diǎn)則消失，在氣泡展開(kāi)時(shí)，切勿擋住 input 輸入框。

也有些產(chǎn)品是將幫助信息放在頁(yè)面頂部，如果是針對(duì)全局幫助性信息，則可以采用這種方式，如果只是針對(duì)某個(gè)元素提醒，則應(yīng)將兩者放在一起，讓用戶知道當(dāng)前處于什么地方，在針對(duì)什么進(jìn)行引導(dǎo)、輔助。

10. 表單屬性

用戶在面對(duì)需要錄入信息比較多的表單時(shí)，內(nèi)心是很抗拒的，而用戶所填寫的信息，又是產(chǎn)品所需要的。因此我們可以針對(duì)信息做一些篩選，將一些重要信息和非重要信息區(qū)分出來(lái)，減少用戶的錄入負(fù)擔(dān)，也減少用戶的時(shí)間成本。

11. 結(jié)果反饋

用戶在完成表單填寫，并提交后，需要及時(shí)給用戶反饋，比如完成提交時(shí)的祝賀，謝謝等，都能催發(fā)用戶體內(nèi)的多巴胺，并產(chǎn)生愉悅的情緒，無(wú)論是祝賀還是提醒，用戶都會(huì)產(chǎn)生快樂(lè)的情感。

在某些時(shí)候因?yàn)槠渌蛩兀峤皇。枰皶r(shí)反饋用戶，并且要一定要將之前所填寫好的數(shù)據(jù)保留下來(lái)，不要讓用戶輸入第二次！

12. 微文案

最后插一句，無(wú)論是標(biāo)簽、還是占位符，還是提示性文字，或者反饋性文字……表意都必須清晰易懂，同時(shí)需要消除用戶的疑慮，在整個(gè)流程中，做出更快更準(zhǔn)確的抉擇。

比如這個(gè)地方，用戶手機(jī)號(hào)錄入錯(cuò)誤，但需要詳細(xì)的提醒用戶，到底是哪里錯(cuò)誤，而不是含糊不清的去告訴他錯(cuò)了，我在前面依舊講過(guò)，用戶需要我們發(fā)現(xiàn)錯(cuò)誤，并做出正確的引導(dǎo)，而不是一味的告訴用戶他錯(cuò)了。

再比如，用戶在填完一個(gè)表單，突然要關(guān)閉，彈出彈窗，確定要取消，一個(gè)按鈕是確定，一個(gè)按鈕是取消，就很有歧義，會(huì)給用戶造成選擇困難。這個(gè)就是在提示文案中，產(chǎn)生了與按鈕會(huì)產(chǎn)生歧義的詞。

還有很多地方，能把微文案運(yùn)用好，對(duì)用戶對(duì)操作流程能起到非常大的幫助，建議廣大設(shè)計(jì)師在做微文案處理的時(shí)候，謹(jǐn)慎而為。

歷時(shí)兩月，總結(jié)出字?jǐn)?shù)10000+的微文案設(shè)計(jì)指南

10000 多字全部干貨！一篇文章就能幫你掌握微文案設(shè)計(jì)，設(shè)計(jì)師快來(lái)收藏。

不同類別的輸入框如何設(shè)計(jì)

講完表單基本結(jié)構(gòu)設(shè)計(jì)，下面來(lái)針對(duì)輸入框來(lái)講講他們?nèi)绾卧O(shè)計(jì)。

表單域包含以下內(nèi)容有：

• 文本輸入框
• 數(shù)字輸入框
• 密碼輸入框
• 郵箱/網(wǎng)址輸入框

1. 中文文本框

中文文本框，需要注意的就是基本的結(jié)構(gòu)，針對(duì)自己產(chǎn)品業(yè)務(wù)所需要的，對(duì)標(biāo)簽、輸入限制、占位符……等等最合適的設(shè)計(jì)。需要特別注意的是標(biāo)簽、輸入限制、占位符、多行文字規(guī)則。

其次就是對(duì)字體的屬性調(diào)整，比如字體大小、行高等。

2. 數(shù)字輸入框

數(shù)字輸入框

常見(jiàn)的數(shù)字輸入框有電話、身份證、銀行卡、價(jià)格、等。不同的類型在設(shè)計(jì)上也有區(qū)別。不過(guò)涉及到數(shù)字的，我們?cè)谠O(shè)計(jì)中要考慮到，要秉承清晰、易讀的原則。

電話輸入框

電話輸入框有三個(gè)結(jié)構(gòu)，國(guó)家/地區(qū)、區(qū)號(hào)、手機(jī)號(hào)。

不同國(guó)家地區(qū)區(qū)號(hào)不一樣，而國(guó)家區(qū)號(hào)存在的意義就是為了篩選不同的區(qū)號(hào)，因?yàn)椴皇撬杏脩舳寄苡涀∽约寒?dāng)?shù)氐膮^(qū)號(hào)。

美團(tuán)的設(shè)計(jì)中，就很好地詮釋了這一點(diǎn)。

沒(méi)有直接的國(guó)家地區(qū)選擇，而是在區(qū)號(hào)下拉框當(dāng)中，給了每個(gè)區(qū)號(hào)國(guó)家地區(qū)作為用戶區(qū)分。

我們接著聊一聊電話號(hào)碼的輸入問(wèn)題

在移動(dòng)端，手機(jī)充值輸入框內(nèi)，電話號(hào)碼需要自動(dòng)填充，避免用戶二次操作，但常見(jiàn)的手機(jī)充值業(yè)務(wù)，基本上已經(jīng)是大廠占據(jù)，用戶常用的也就那么幾個(gè)產(chǎn)品，而這些產(chǎn)品也獲取到了用戶極高的信任。

但即使是這樣，他們依舊沒(méi)有采用直接填充的方式，而是在你輸入過(guò)后會(huì)有歷史記錄，用歷史記錄填充，當(dāng)你清除歷史記錄后，再次進(jìn)入，依舊需要手動(dòng)輸入。

在這個(gè)信息透明的互聯(lián)網(wǎng)時(shí)代，用戶對(duì)自己的私人信息很看重。一個(gè)產(chǎn)品需要輸入電話號(hào)碼，不能直接做自動(dòng)填充，即使你已經(jīng)抓取到了用戶的信息，也不要告訴用戶你有他的信息，這一點(diǎn)很重要，如果你直接使用自動(dòng)填充手機(jī)號(hào)，用戶會(huì)覺(jué)得隱私泄露，用戶對(duì)這個(gè)產(chǎn)品信任感本就不足，這種做法會(huì)讓用戶信任感再一次降低。

但讓用戶手動(dòng)輸入，安全感得到了滿足，卻會(huì)增加用戶的操作負(fù)擔(dān)。

魚(yú)與熊掌不可兼得，我曾與一個(gè) B 端行業(yè)的產(chǎn)品設(shè)計(jì)師「朱進(jìn)」探討過(guò)這個(gè)問(wèn)題，最后得出的方案是，讓用戶數(shù)手動(dòng)輸入，但在輸入前三位的時(shí)候，彈出氣泡，顯示為完整的手機(jī)號(hào)，點(diǎn)擊該氣泡，就會(huì)自動(dòng)填充完整的手機(jī)號(hào)。

這樣做的好處是，用戶在輸入的時(shí)候，心理的懶惰，會(huì)讓用戶抗拒這種行為，產(chǎn)生負(fù)面情緒，點(diǎn)擊氣泡，填充了完整的手機(jī)號(hào)，用戶會(huì)認(rèn)為這個(gè)功能解決了他當(dāng)下不想輸入的痛點(diǎn)。

而在有些場(chǎng)景，需要輸入其他人的手機(jī)號(hào)，比如旅游類產(chǎn)品，酒店類產(chǎn)品。

需要加入訪問(wèn)通訊錄的權(quán)限。

而輸入手機(jī)號(hào)之后的狀態(tài)記得標(biāo)注出來(lái)，按照之前所說(shuō)的 7 加減二法則，根據(jù)用戶的記憶結(jié)構(gòu) xxx xxxx xxxx 來(lái)優(yōu)化用戶的閱讀體驗(yàn)。

身份證/銀行卡輸入框

身份證、銀行卡輸入框，跟上邊一樣，根據(jù)用戶閱讀習(xí)慣，增加可讀性，加入掃描和圖片識(shí)別，減少用戶操作。

我使用過(guò)一些產(chǎn)品，只有掃描功能，但沒(méi)有從圖片中識(shí)別，導(dǎo)致用起來(lái)很憋屈，因?yàn)殂y行卡不可能隨時(shí)在身上，有時(shí)需要綁定的時(shí)候，卻告訴我只能掃描，這個(gè)時(shí)候我只能 回到最原始的，記幾個(gè)數(shù)字，輸入幾個(gè)。來(lái)來(lái)回回折騰好幾遍，才能輸入銀行卡。

金額輸入框

在做價(jià)格輸入框的時(shí)候，有些設(shè)計(jì)師喜歡在前面加上「￥」或者「$」符號(hào)，而且還放在了同一段文字當(dāng)中，這樣做在設(shè)計(jì)上沒(méi)問(wèn)題，但對(duì)開(kāi)發(fā)不是很友好，因?yàn)殚_(kāi)發(fā)在寫頁(yè)面過(guò)程中，前面的「￥」或者「$」符號(hào)，是一個(gè)定量，也就是寫死了，不會(huì)變動(dòng)，而后邊的價(jià)格是一個(gè)變量，無(wú)論是從后臺(tái)獲取的數(shù)據(jù)，還是你新錄入的信息，都是變量，往往是按照兩個(gè)元素進(jìn)行分別設(shè)置屬性。

舉個(gè)例子吧，支付寶的充值界面，在你輸入價(jià)格之前，這個(gè)「￥」符號(hào)就是存在的，因此它是一個(gè)定量，不能和價(jià)格放在一個(gè)圖層，是需要單獨(dú)拿出來(lái)的。

更何況有些設(shè)計(jì)師，會(huì)將前面的符號(hào)設(shè)計(jì)得比價(jià)格要小，甚至小數(shù)位，也是樣式和整數(shù)位樣式也不一樣，比如京東的詳情頁(yè)。

因此，我們?cè)谠O(shè)計(jì)過(guò)程中，需要把兩個(gè)元素拆開(kāi)，符號(hào)一個(gè)圖層，價(jià)格一個(gè)圖層。如果碰到后邊小數(shù)位樣式和整數(shù)位不同時(shí)，都需要單獨(dú)分離圖層。

設(shè)計(jì)金額輸入時(shí)，很多 app 沿用了國(guó)際標(biāo)準(zhǔn)的千分位分隔符，比如我們輸入 1,345,543 金額，除了長(zhǎng)期與千分位打交道的人，大部分人是很難第一眼看出金額具體是多少，還得從「?jìng)€(gè)、十、百、千、萬(wàn)」開(kāi)始讀。

前邊有講過(guò)，雖然要遵循「7 加減 2」法則，提高內(nèi)容的可讀性，但同時(shí)也要遵循不同數(shù)字，用戶的閱讀習(xí)慣，而價(jià)格，國(guó)內(nèi)的閱讀習(xí)慣都是 「?jìng)€(gè)、十、百、千、萬(wàn)」。至于為什么采用「千分位」，是因?yàn)榕c國(guó)際對(duì)標(biāo)，國(guó)際統(tǒng)一的是千分位，而西方?jīng)]有「萬(wàn)、億」只有「千、百萬(wàn)、十億」，這三個(gè)記數(shù)單位是千進(jìn)制，因此是千分位，而中國(guó)是萬(wàn)進(jìn)制，所以千分位，在中國(guó)，使用起來(lái)并不是那么友好。

有些 app 采用了大寫金額的提示，但這種繁體字，對(duì)于信息提取還是比較吃力。

之前有個(gè)交互設(shè)計(jì)師柴維英就提到了這種現(xiàn)狀，甚至提出了一個(gè)不錯(cuò)的方案。

她的思考方案是：當(dāng)用戶輸入的金額超過(guò)千時(shí)，出現(xiàn)最高分位提示，每多輸入一位，最高分位隨之增加。閱讀速度大大提升。

還可以采用萬(wàn)分位分隔符，3,233,234 采用萬(wàn)分位即 323,3234 一眼可以看出有 323 萬(wàn)，但這個(gè)方法并沒(méi)有在國(guó)內(nèi)推行，猜測(cè)是，目前所有產(chǎn)品都采用千分位，用戶已經(jīng)形成了習(xí)慣，即使使用起來(lái)并不方便，如果改成萬(wàn)分位，會(huì)給用戶增加一定的理解成本。

當(dāng)然了，在少數(shù)場(chǎng)景中，用戶在使用轉(zhuǎn)賬這個(gè)功能時(shí)，并不會(huì)涉及到太大的金額。也就不會(huì)有金額認(rèn)知困難的情況出現(xiàn)，比如支付寶、微信、日常所涉及到的轉(zhuǎn)賬最高也才幾萬(wàn)。

3. 密碼輸入框

密碼輸入框，目前有兩種形式，第一種是 input 框——password 的默認(rèn)狀態(tài)，輸入以「 * 」展示，從開(kāi)始輸入密碼，到結(jié)束，都是以「 * 」展示，如果沒(méi)有查看密碼操作，很難知道自己輸入的到底準(zhǔn)不準(zhǔn)確。

因此還有一種方式，就是在輸入的時(shí)候，最新的字符，顯示 1～2s，這樣，用戶可以看清楚自己輸入的內(nèi)容，能減少部分用戶，進(jìn)行點(diǎn)擊查看密碼操作。

一旦涉及到密碼，必須有確認(rèn)密碼，為用戶輸入做校正，減少用戶輸入的錯(cuò)誤率。

4. 郵箱網(wǎng)址輸入框

郵箱輸入

在做郵箱輸入的時(shí)候，適當(dāng)加上主機(jī)名選擇，也就是我們所謂的后綴選擇。目的是為了減少用戶輸入。

但你可不要就認(rèn)為只是加上幾個(gè)常用的郵箱選擇就萬(wàn)事大吉了。

舉個(gè)例子，有些用戶的郵箱為 chetchan@aliyun.mou.com 怎么去處理，還有些用戶的子域是經(jīng)過(guò)自定義的，比如子域會(huì)換成公司名字：chetchan@taobao.com。

針對(duì)不同的場(chǎng)景不同的用戶去進(jìn)一步考量，因此我們可以選擇這種設(shè)計(jì)方案

在用戶輸入時(shí)，自動(dòng)彈出下拉列表，同時(shí)匹配常用郵箱，如果用戶使用的是 qq 郵箱，即可直接點(diǎn)擊選擇。如果用戶找不到自己想要輸入的郵箱，則會(huì)繼續(xù)輸入完整郵箱。

網(wǎng)址輸入

網(wǎng)址輸入在輸入框中使用頻率不是很高，但還是提一下。

在講網(wǎng)址輸入之前，我們先看網(wǎng)址的結(jié)構(gòu)，網(wǎng)址由協(xié)議（http/https）、服務(wù)器類別（www 就是 web 服務(wù)器）、名稱、域名（com、cn、net……等等）四部分構(gòu)成。

我們經(jīng)常在輸入的時(shí)候，幾乎都是從 www 開(kāi)始的，而瀏覽器又會(huì)自動(dòng)補(bǔ)充協(xié)議。因此無(wú)需我們輸入?yún)f(xié)議。

而大多時(shí)候，我們?cè)谟洃浘W(wǎng)址的時(shí)候，是不會(huì)去記它前面的協(xié)議的，因?yàn)槲覀兊臑g覽器默認(rèn)是隱藏掉協(xié)議的，有些甚至?xí)逊?wù)器類別也隱藏掉。

有些產(chǎn)品在記錄網(wǎng)址/鏈接的時(shí)候，會(huì)在前面加上協(xié)議選擇，讓用戶選擇 http 或者 https。

但是，除了特定的網(wǎng)頁(yè)，比如百度、淘寶、京東，其它網(wǎng)頁(yè)我們是很難記住它的完整網(wǎng)址的，因此更多是在使用復(fù)制粘貼的操作，而你一旦復(fù)制，就會(huì)將網(wǎng)址前面的協(xié)議一同復(fù)制，也就不存在上述問(wèn)題了。

后記

以上就是《設(shè)計(jì)師必不可少的表單設(shè)計(jì)（上篇）》全部?jī)?nèi)容，感謝大家百忙之中抽出時(shí)間看完，下一篇會(huì)繼續(xù)對(duì)表單設(shè)計(jì)的其它模塊，如選擇器、步進(jìn)器等模塊進(jìn)行分享我的理解。

TML 中使用 <input> 元素表示單行輸入框和 <textarea> 元素表示多行文本框。

HTML中使用的 <input> 元素在 JavaScript 中對(duì)應(yīng)的是 HTMLInputElement 類型。HTMLInputElement 繼承自 HTMLElement 接口：

interface HTMLInputElement extends HTMLElement {
    ...
}

HTMLInputElement 類型有一些獨(dú)有的屬性和方法：

• name：表示 <input> 元素的名稱。
• disabled：表示 <input> 元素是否禁止使用。在表單提交時(shí)不會(huì)包含被禁止的 <input> 元素。
• autofocus：表示頁(yè)面加載時(shí)，該元素是否會(huì)自動(dòng)獲得焦點(diǎn)。
• required：表示表單提交時(shí)，該 <input>元素是否為必填。
• value：表示該 <input> 元素的值。
• validity：返回一個(gè) ValidityState 對(duì)象，表示 <input> 元素的校驗(yàn)狀態(tài)。是只讀屬性。
• validationMessage：表示 <input> 元素校驗(yàn)失敗時(shí)，用戶看到的報(bào)錯(cuò)信息。如果該元素不需要校驗(yàn)，或者通過(guò)校驗(yàn)，該屬性為空字符串。是只讀屬性。
• willValidate：表示表單提交時(shí)，<input> 元素是否會(huì)被校驗(yàn)。是只讀屬性。
• select()：選中 <input> 元素內(nèi)部的所有文本。
• click()：模擬鼠標(biāo)點(diǎn)擊當(dāng)前的 <input> 元素。

而在上述介紹 HTMLInputElement 類型中的屬性時(shí)，type 屬性要特別關(guān)注一下，因?yàn)楦鶕?jù) type 屬性的改變，可以改變<input>的屬性。

省略 type 屬性與 type="text"效果一樣， <input> 元素顯示為文本框。

當(dāng) type 的值為text/password/number/時(shí)，會(huì)有以下屬性對(duì) <input> 元素有效。

下面創(chuàng)建一個(gè) type="text" ，一次顯示 25 個(gè)字符，但最多允許顯示 50 個(gè)字符的文本框：

<input type="text" size="25" maxlength="50" value="initial value">

HTML 使用的 <textarea> 元素在 JavaScript 中對(duì)應(yīng)的是 HTMLTextAreaElement 類型。HTMLTextAreaElement類型繼承自 HTMLElement 接口：

interface HTMLTextAreaElement extends HTMLElement {
    ...
}

HTMLTextAreaElement 類型有一些獨(dú)有的屬性和方法：

• form：只讀屬性，返回對(duì)父表單元素的引用。如果此元素未包含在表單元素中，則它可以是同一文檔中 id 屬性同 form 值的 <form> 元素，如果沒(méi)有，該值為 null。
• type：只讀屬性，返回字符串textarea。
• value：string類型，返回/設(shè)置控件中包含的原始值。
• textLength：只讀屬性，long類型，返回<textarea>元素的value值的長(zhǎng)度。與 value.length 相同。
• defaultValue：string類型，返回/設(shè)置textarea元素的默認(rèn)值。
• placeholder：string類型，返回/設(shè)置 textarea 元素的占位符，作為對(duì)輸入內(nèi)容的提示。
• rows：unsigned long類型，返回/設(shè)置textarea元素的可見(jiàn)文本行數(shù)。
• cols：unsigned long類型，返回/設(shè)置 textarea 元素的可見(jiàn)寬度。
• autofocus：boolean類型，返回/設(shè)置textarea元素在頁(yè)面加載時(shí)自動(dòng)獲取焦點(diǎn)。
• name：返回/設(shè)置 textarea 元素的名稱。
• disabled：boolean類型，返回/設(shè)置 textarea 元素是否應(yīng)當(dāng)被禁用。
• HTMLTextAreaElement.labels：NodeList類型，返回與此select元素關(guān)聯(lián)的標(biāo)簽元素列表。
• maxLength：long類型，返回/設(shè)置元素可以輸入的最大字符數(shù)。僅在值更改時(shí)才評(píng)估此約束。
• minLength：long類型，返回/設(shè)置元素可以輸入的最小字符數(shù)。僅在值更改時(shí)才評(píng)估此約束。
• accessKey：boolean類型，返回/設(shè)置訪問(wèn) textarea 的鍵盤快捷鍵。
• readOnly：boolean類型，返回/設(shè)置 textarea 元素是否為只讀。
• required：boolean 類型，返回/設(shè)置 textarea 元素是否為必填項(xiàng)。
• tabIndex：long類型，返回/設(shè)置 textarea 元素的 tab 鍵導(dǎo)航順序中元素的位置。

下面創(chuàng)建一個(gè)高度為 25，寬度為 5 的 <textarea> 多行文本框。它與 <input> 不同的是，初始值顯示在 <textarea>...</textarea> 之間：

<textarea rows="25" cols="5">initial value</textarea>

注意：處理文本框值的時(shí)候最好不要使用 DOM 方法，而應(yīng)該使用 value 屬性。

選擇文本

<input> 與 <textarea> 都支持 select() 方法，該方法用于選中文本框中的所有內(nèi)容。該方法的語(yǔ)法為：

select(): void

下面看一個(gè)示例：

let textbox = document.forms[0].elements["input-box"];
textbox.select();

也可以在文本框獲得焦點(diǎn)時(shí)，選中文本框的內(nèi)容：

textbox.addEventListener("focus", (event) => {
    event.target.select();
});

select 事件

當(dāng)選中文本框中的文本或使用 select() 方法時(shí)，會(huì)觸發(fā) select 事件。

let textbox = document.forms[0].elements["textbox1"];
textbox.addEventListener("select", (event) => {
    console.log(`Text selected: ${textbox.value}`);
});

取得選中的文本

HTML5 對(duì) select 事件進(jìn)行了擴(kuò)展，通過(guò) selectionStart 和 selectionEnd 屬性獲取文本選區(qū)的起點(diǎn)偏移量和終點(diǎn)偏移量。如下所示：

function getSelectedText(textbox){
    return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
}

注意：在 IE8 及更早版本不支持這兩個(gè)屬性。

選中部分文本

HTML5 提供了 setSelectionRange() 方法用于選中部分文本：

setSelectionRange(start, end, direction): void;

• start：被選中的第一個(gè)字符的位置索引，從 0 開(kāi)始。如果這個(gè)值比元素的 value 長(zhǎng)度還大，則會(huì)被看做 value 最后一個(gè)位置的索引。
• end：被選中的最后一個(gè)字符的下一個(gè)位置索引。如果這個(gè)值比元素的 value 長(zhǎng)度還大，則會(huì)被看做 value 最后一個(gè)位置的索引。
• direction：該參數(shù)是可選的字符串類型，表示選擇方向，可以傳入 “forward”/“backward”/“none” 三個(gè)值。

下面看一個(gè)例子：

<input type="text" id="text-sample" size="20" value="Hello World!">
<button onclick="selectText()">選中部分文本</button>
<script>
    function selectText() {
        let input = document.getElementById("text-sample");
        input.focus();
        input.setSelectionRange(4, 8);    // o Wo
    }
</script>

如果想要看到選中效果，必須讓文本框獲得焦點(diǎn)。

輸入過(guò)濾

不同文本框經(jīng)常需要保證輸入特定類型或格式的數(shù)據(jù)，或許數(shù)據(jù)需要包含特定字符或必須匹配某個(gè)特定模式。而文本框并未提供驗(yàn)證功能，因此要配合 JavaScript 腳本實(shí)現(xiàn)輸入過(guò)濾功能。

屏蔽字符

有些輸入框需要出現(xiàn)或不出現(xiàn)特定字符。如果想要將輸入框變成只讀的，只需要使用 preventDefault()方法將按鍵都屏蔽：

input.addEventListener("keypress", (event) => {
    event.preventDefault();
});

而要屏蔽特定字符，就需要檢查事件的 charCode 屬性。如下所示，使用正則表達(dá)式實(shí)現(xiàn)只允許輸入數(shù)字的輸入框：

input.addEventListener("keypress", (event) => {
    if (!/\d/.test(event.key)) {
        event.preventDefault();
    }
});

還有一個(gè)問(wèn)題需要處理：復(fù)制、粘貼及涉及Ctrl 鍵的其他功能。在除IE 外的所有瀏覽器中，前面代碼會(huì)屏蔽快捷鍵Ctrl+C、Ctrl+V 及其他使用Ctrl 的組合鍵。因此，最后一項(xiàng)檢測(cè)是確保沒(méi)有按下Ctrl鍵，如下面的例子所示：

textbox.addEventListener("keypress", (event) => {
if (!/\d/.test(String.fromCharCode(event.charCode)) &&
event.charCode > 9 &&
!event.ctrlKey){
event.preventDefault();
}
});

最后這個(gè)改動(dòng)可以確保所有默認(rèn)的文本框行為不受影響。這個(gè)技術(shù)可以用來(lái)自定義是否允許在文本框中輸入某些字符。

處理剪貼板

IE 是第一個(gè)實(shí)現(xiàn)了剪切板相關(guān)的事件以及通過(guò)JavaScript訪問(wèn)剪切板數(shù)據(jù)的瀏覽器，其它瀏覽器在后來(lái)也都支持了相同的事件和剪切板的訪問(wèn)，后來(lái) HTML5 將其納入了規(guī)范。以下是與剪切板相關(guān)的 6 個(gè)事件：

• beforecopy：發(fā)生復(fù)制操作前觸發(fā)。
• copy：發(fā)生復(fù)制操作時(shí)觸發(fā)。
• beforecut：發(fā)生剪切操作前觸發(fā)。
• cut：發(fā)生剪切操作時(shí)觸發(fā)。
• beforepaste：發(fā)生粘貼操作前觸發(fā)。
• paste：發(fā)生粘貼操作時(shí)觸發(fā)。

剪切板事件的行為及相關(guān)對(duì)象會(huì)因?yàn)g覽器而異。在 Safari、Chrome 和 Firefox 中，beforecopy、beforecut 和 beforepaste 事件只會(huì)在顯示文本框的上下文菜單時(shí)觸發(fā)，但 IE 不僅在這種情況下觸發(fā)，也會(huì)在 copy、cut 和 paste 事件在所有瀏覽器中都會(huì)按預(yù)期觸發(fā)。

在實(shí)際的事件發(fā)生之前，通過(guò)beforecopy、beforecut 和 beforepaste 事件可以在向剪貼板發(fā)送或從中檢索數(shù)據(jù)前修改數(shù)據(jù)。不過(guò)，取消這些事件并不會(huì)取消剪貼板操作。要阻止實(shí)際的剪貼板操作，必須取消 copy、cut和 paste 事件。

剪貼板的數(shù)據(jù)通過(guò) clipboardData 對(duì)象來(lái)獲取，且clipboardData 對(duì)象提供 3 個(gè)操作數(shù)據(jù)的方法：

• getData(format)：從剪貼板獲取指定格式的數(shù)據(jù)，接收的參數(shù)為指定獲取的數(shù)據(jù)格式，如果沒(méi)有指定數(shù)據(jù)格式或指定數(shù)據(jù)格式不存在，則此方法返回一個(gè)空字符串。
• setData(format, data)：給剪貼板賦予指定格式的數(shù)據(jù)，第一個(gè)參數(shù)指定數(shù)據(jù)格式，第二個(gè)參數(shù)為第一個(gè)參數(shù)賦予數(shù)據(jù)。如果指定數(shù)據(jù)格式不存在，則將其添加到數(shù)據(jù)存儲(chǔ)的末尾；如果指定數(shù)據(jù)格式存在，則將數(shù)據(jù)替換在指定數(shù)據(jù)格式的位置。
• clearData(format)：刪除指定格式的數(shù)據(jù)，接收的參數(shù)為指定要?jiǎng)h除的數(shù)據(jù)格式，如果指定格式不存在，則此方法不執(zhí)行任何操作；如果此參數(shù)為空字符串或未提供，則將刪除所有格式的數(shù)據(jù)。

而 clipboardData 對(duì)象在 IE 中使用 window 獲取，在 Firefox、Safari 和 Chrome 中使用 event 獲取。為防止未經(jīng)授權(quán)訪問(wèn)剪貼板，只能在剪貼板事件期間訪問(wèn) clipboardData 對(duì)象；IE 會(huì)在任何時(shí)候都暴露 clipboardData 對(duì)象。因此，要兼容兩者，最好在剪貼板事件期間使用該對(duì)象。

function getClipboardText(event){
    var clipboardData = (event.clipboardData || window.clipboardData);
    return clipboardData.getData("text");
}
function setClipboardText (event, value){
    if (event.clipboardData){
        return event.clipboardData.setData("text/plain", value);
    } else if (window.clipboardData){
        return window.clipboardData.setData("text", value);
    }
}

如果文本框只有數(shù)字，那剪貼時(shí)，就需要使用paste事件檢查剪貼板上的文本是否無(wú)效。如果無(wú)效，可以取消默認(rèn)行為：

input.addEventListener("paste", (event) => {
    let text = getClipboardText(event);
    if (!/^\d*$/.test(text)){
        event.preventDefault();
    }
});

注意：Firefox、Safari和Chrome只允許在onpaste事件中訪問(wèn)getData()方法。

自動(dòng)切換

在 JavaScript 中，可以用在當(dāng)前字段完成時(shí)自動(dòng)切換到下一個(gè)字段的方式來(lái)增強(qiáng)表單字段的易用性。比如，常用手機(jī)號(hào)分為國(guó)家好加手機(jī)號(hào)。因此，我們?cè)O(shè)置 2 個(gè)文本框：

<form>
    <input type="text" name="phone1" id="phone-id-1" maxlength="4">
    <input type="text" name="phone2" id="phone-id-2" maxlength="11">
</form>

當(dāng)文本框輸入到最大允許字符數(shù)后，就把焦點(diǎn)移到下一個(gè)文本框，這樣可以增加表單的易用性并加速數(shù)據(jù)輸入。如下所示：

<script>
    function tabForward(event){
        let target = event.target;
        if (target.value.length == target.maxLength){
            let form = target.form;
            for (let i = 0, len = form.elements.length; i < len; i++) {
                if (form.elements[i] == target) {
                    if (form.elements[i+1]) {
                        form.elements[i+1].focus();
                    }
                    return;
                }
            }
        }
    }
    let inputIds = ["phone-id-1", "phone-id-2"];
    for (let id of inputIds) {
        let textbox = document.getElementById(id);
        textbox.addEventListener("keyup", tabForward);
    }
</script>

這里，tabForward() 函數(shù)通過(guò)比較用戶輸入文本的長(zhǎng)度與 maxLength 屬性的值來(lái)檢測(cè)輸入是否達(dá)到了最大長(zhǎng)度。如果兩者相等，就通過(guò)循環(huán)表中的元素集合找到當(dāng)前文本框，并把焦點(diǎn)設(shè)置到下一個(gè)元素。

注意：上面的代碼只適用于之前既定的標(biāo)記，沒(méi)有考慮可能存在的隱藏字段。

HTML5

HTML5 新增了一些表單提交前，瀏覽器會(huì)基于指定的規(guī)則進(jìn)行驗(yàn)證，并在出錯(cuò)時(shí)顯示適當(dāng)?shù)腻e(cuò)誤信息。而驗(yàn)證會(huì)基于某些條件應(yīng)用到表單字段中。

必填字段

表單字段中添加 required 屬性，用于標(biāo)注該字段是必填項(xiàng)，不填則無(wú)法提交。該屬性適用于<input>、<textarea>和<select>。如下所示：

<input type="text" name="account" required>

也可以通過(guò) JavaScript 檢測(cè)對(duì)應(yīng)元素的 required 屬性來(lái)判斷表單字段是否為必填項(xiàng)：

let isRequired = document.forms[0].elements["account"].required;

也可以檢測(cè)瀏覽器是否支持 required 屬性：

let isRequiredSupported = "required" in document.createElement("input");

注意：不同瀏覽器處理必填字段的機(jī)制不同。Firefox、Chrome、IE 和Opera 會(huì)阻止表單提交并在相應(yīng)字段下面顯示有幫助信息的彈框，而Safari 什么也不做，也不會(huì)阻止提交表單。

更多輸入類型

HTML5 為 <input> 元素增加了幾個(gè)新的 type 值。如下所示：

這些輸入表名字段應(yīng)該輸入的數(shù)據(jù)類型，并且提供了默認(rèn)驗(yàn)證。如下所示：

<input type="email" name="email">
<input type="url" name="homepage">

要檢測(cè)瀏覽器是否支持新類型，可以在 JavaScript 中創(chuàng)建 <input> 并設(shè)置 type 屬性，之后讀取它即可。老版本中會(huì)將我只類型設(shè)置為 text，而支持的會(huì)返回正確的值。如下所示：

let input = document.createElement("input");
input.type = "email";
let isEmailSupported = (input.type == "email");

數(shù)值范圍

而上面介紹的幾個(gè)如 number/range/datetime/datetime-local/date/month/week/time 幾個(gè)填寫數(shù)字的類型，都可以指定 min/max/step 等幾個(gè)與數(shù)值有關(guān)的屬性。step 屬性用于規(guī)定合法數(shù)字間隔，如 step="2"，則合法數(shù)字應(yīng)該為 0、2、4、6，依次類推。如下所示：

<input type="number" min="0" max="100" step="5" name="count">

上面的例子是<input>中只能輸入從 0 到 100 中 5 的倍數(shù)。

也可以使用 stepUp() 和 stepDown() 方法對(duì) <input> 元素中的值進(jìn)行加減，它倆會(huì)接收一個(gè)可選參數(shù)，用于表示加減的數(shù)值。如下所示：

input.stepUp(); // 加1
input.stepUp(5); // 加5
input.stepDown(); // 減1
input.stepDown(10); // 減10

輸入模式

HTML5 還為文本添加了 pattern 屬性，用于指定一個(gè)正則表達(dá)式。這樣就可以自己設(shè)置 <input> 元素的輸入模式了。如下所示：

<input type="text" pattern="\d+" name="count">

注意模式的開(kāi)頭和末尾分別假設(shè)有^和$。這意味著輸入內(nèi)容必須從頭到尾都嚴(yán)格與模式匹配。

與新增的輸入類型一樣，指定 pattern 屬性也不會(huì)阻止用戶輸入無(wú)效內(nèi)容。模式會(huì)應(yīng)用到值，然后瀏覽器會(huì)知道值是否有效。通過(guò)訪問(wèn) pattern 屬性可以讀取模式：

let pattern = document.forms[0].elements["count"].pattern;

使用如下代碼可以檢測(cè)瀏覽器是否支持pattern 屬性：

let isPatternSupported = "pattern" in document.createElement("input");

檢測(cè)有效性

HTML5 新增了 checkValidity() 方法，用來(lái)檢測(cè)表單中任意給定字段是否有效。而判斷的條件是約束條件，因此必填字段如果沒(méi)有值會(huì)被視為無(wú)效，字段值不匹配 pattern 屬性也會(huì)被視為無(wú)效。如下所示：

if (document.forms[0].elements[0].checkValidity()){
    // 字段有效，繼續(xù)
} else {
    // 字段無(wú)效
}

要檢查整個(gè)表單是否有效，可以直接在表單上調(diào)用checkValidity()方法。這個(gè)方法會(huì)在所有字段都有效時(shí)返回true，有一個(gè)字段無(wú)效就會(huì)返回false：

if(document.forms[0].checkValidity()){
    // 表單有效，繼續(xù)
} else {
    // 表單無(wú)效
}

validity 屬性會(huì)返回一個(gè)ValidityState 對(duì)象，表示 <input> 元素的校驗(yàn)狀態(tài)。返回的對(duì)象包含一些列的布爾值的屬性：

• customError：如果設(shè)置了 setCustomValidity() 就返回 true，否則返回false。
• patternMismatch：如果字段值不匹配指定的 pattern 屬性則返回true。
• rangeOverflow：如果字段值大于 max 的值則返回true。
• rangeUnderflow：如果字段值小于 min 的值則返回true。
• stepMisMatch：如果字段值與 min、max 和 step 的值不相符則返回true。
• tooLong：如果字段值的長(zhǎng)度超過(guò)了 maxlength 屬性指定的值則返回true。
• typeMismatch：如果字段值不是 "email" 或"url" 要求的格式則返回true。
• valid：如果其他所有屬性的值都為false 則返回true。與checkValidity()的條件一致。
• valueMissing：如果字段是必填的但沒(méi)有值則返回true。

因此，通過(guò) validity 屬性可以檢查表單字段的有效性，從而獲取更具體的信息，如下所示：

if (input.validity && !input.validity.valid){
    if (input.validity.valueMissing){
        console.log("請(qǐng)指定值.")
    } else if (input.validity.typeMismatch){
        console.log("請(qǐng)指定電子郵件地址.");
    } else {
        console.log("值無(wú)效.");
    }
}

禁用驗(yàn)證

通過(guò)指定 novalidate 屬性可以禁止對(duì)表單進(jìn)行任何驗(yàn)證：

<form method="post" action="/signup" novalidate>
    <!-- 表單元素 -->
</form>

也可以在 JavaScript 通過(guò) noValidate 屬性設(shè)置，為 true 表示屬性存在，為 false 表示屬性不存在：

document.forms[0].noValidate = true; // 關(guān)閉驗(yàn)證

如果一個(gè)表單中有多個(gè)提交按鈕，那么可以給特定的提交按鈕添加formnovalidate 屬性，指定通過(guò)該按鈕無(wú)需驗(yàn)證即可提交表單：

<form method="post" action="/foo">
    <!-- 表單元素 -->
    <input type="submit" value="注冊(cè)提交">
    <input type="submit" formnovalidate name="btnNoValidate"
value="沒(méi)有驗(yàn)證的提交按鈕">
</form>

也可以使用 JavaScript 設(shè)置 formNoValidate 屬性：

// 關(guān)閉驗(yàn)證
document.forms[0].elements["btnNoValidate"].formNoValidate = true;

總結(jié)

以上總結(jié)了 <input> 和 <textarea> 兩個(gè)元素的一些功能，主要是 <input> 元素可以通過(guò)設(shè)置 type 屬性獲取不同類型的輸入框，可以通過(guò)監(jiān)聽(tīng)鍵盤事件并檢測(cè)要插入的字符來(lái)控制文本框的內(nèi)容。

還有一些與剪貼板相關(guān)的事件，并對(duì)剪貼的內(nèi)容進(jìn)行檢測(cè)。還介紹了一些 HTML5 新增的屬性和方法和新增的更多的 <input> 元素的類型，和一些與驗(yàn)證相關(guān)的屬性和方法。