整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
TML 的 input 標簽是構(gòu)建網(wǎng)頁表單的基石。它提供了多種多樣的輸入字段類型，使網(wǎng)頁開發(fā)人員能夠創(chuàng)建功能強大且用戶友好的表單。從簡單的文本輸入到復(fù)雜的日期選擇器，input 標簽為表單交互提供了無限的可能性。在本文中，我們將全面探索 input 標簽的各種應(yīng)用，并揭秘一些提高用戶體驗的技巧。
input 標簽的類型揭秘
input 標簽提供了豐富的類型屬性，使我們能夠創(chuàng)建不同的輸入字段。一些常見的類型包括：
自定義輸入字段
input 標簽的真正強大之處在于它的自定義能力。你可以利用各種屬性來定制輸入字段，滿足特定的需求。例如：
增強用戶體驗
除了基本的輸入字段類型，input 標簽還提供了多種功能來增強用戶體驗：
樣式化輸入字段
使用 CSS，你可以完全控制輸入字段的外觀和感覺，使其與網(wǎng)頁設(shè)計完美融合。你可以改變輸入字段的背景顏色、邊框、字體大小和圓角等。來看一個例子：
<style>
input[type="text"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
<input type="text" placeholder="輸入你的名字">
在這個例子中，我們使用 CSS 為文本輸入字段添加了內(nèi)邊距、邊框和圓角。
結(jié)論：打造動態(tài)表單
HTML input 標簽為網(wǎng)頁開發(fā)人員提供了構(gòu)建動態(tài)表單的強大工具。通過結(jié)合不同的輸入類型、自定義屬性和樣式化技術(shù)，你可以創(chuàng)建出引人入勝且易于使用的表單。不斷探索 input 標簽的無限可能，讓你的網(wǎng)頁表單更加高效、直觀和視覺吸引力！釋放你的創(chuàng)造力，打造令人難忘的用戶體驗！
文將我自己踩過的坑整理出來，目的是為了幫助那些剛邁入職場的設(shè)計師，對表單能有一個更好的了解，從而避免在工作中進入誤區(qū)。
本文共計11000個字，閱讀大約需要30分鐘
每個人生活中，都在和表單打交道，各種表格，表單需要填寫，而表單在產(chǎn)品中主要負責(zé)數(shù)據(jù)采集功能。作用和現(xiàn)在一樣——信息錄入。表單也是最常用的信息錄入的工具，隨著互聯(lián)網(wǎng)興起，很多表單被放到了電子屏上填寫，特別是最近幾年，隨著 B 端的興起，和表單打交道的人越來越多，那么作為設(shè)計師，我們?nèi)绻O(shè)計出一個糟糕的表單，會極大影響用戶信息的錄入的效率。
我們先看看表單的結(jié)構(gòu)，一個表單有三個組成部分：
本文主要針對表單域——輸入框部分的設(shè)計，進行講解，會涉及一點代碼知識，建議查資料閱讀。
常見的表單類別：文本輸入框、密碼輸入框、其中文本輸入框又包含中文輸入框、英文輸入框、數(shù)字輸入框等。
其中我們接觸最多的就是需要錄入信息的輸入框。
在內(nèi)容開始之前，先來了解一下輸入框在前端開發(fā)中的模樣。
如圖所示，輸入框分為標簽，文本輸入框，和占位符三個最基本結(jié)構(gòu)。根據(jù)特殊場景，會加上幫助信息，提示信息，反饋信息等等。
在文章開篇我們說到，表單結(jié)構(gòu)為：表單標簽（標題）、表單域（輸入框）、表單按鈕。三部分組成，但我們作為設(shè)計師在設(shè)計時，考慮的遠遠多于這三部分，我們更多是去做交互上的思考。
從交互層面上思考，表單在設(shè)計上的結(jié)構(gòu)有：
此處所講的標簽，更多的是講表單的布局結(jié)構(gòu)，合理的表單結(jié)構(gòu)，能提高用戶閱讀效率，同時還能降低信息填寫時的錯誤率。
我們常見的布局結(jié)構(gòu)：左右、上下、內(nèi)部。
左右和上下結(jié)構(gòu)，左右結(jié)構(gòu)常用在 pc 端，左右結(jié)構(gòu)在用戶體驗上，視覺路徑相對較長，特別是在多行信息錄入時，尤其明顯。
但在網(wǎng)頁端我們大多看到的都是左右結(jié)構(gòu)，這是因為有空間占比的元素，在 pc 端，橫向空間很大，需要考慮到協(xié)調(diào)的關(guān)系，如果采用上下結(jié)構(gòu)，在內(nèi)容過多的情況下，就會出現(xiàn)重心偏左的視覺效果。
而且，在 pc 端，視線距離屏幕較遠，視覺聚焦面積更大，因此視覺路徑較長的這一點就被中和掉了。
因此在 pc 端，如果展示內(nèi)容較多，可以選擇左右結(jié)構(gòu)。
而內(nèi)容較少，在五個或以內(nèi)，就可以選擇上下結(jié)構(gòu)。
而我們在移動端很少見到左右結(jié)構(gòu)，這是因為移動端的限制——屏幕太小，一個橫屏展示不開，特別是在標簽名字很長的時候，弊端更加明顯，因此在移動端更多的是使用上下結(jié)構(gòu)。當(dāng)然缺點除了識別度會降低，視覺路徑增長之外，縱向空間占比也會增加，本身一屏就能 展示完，現(xiàn)在需要兩屏甚至更多。
而我們在 pc 端，如果標簽名字太長，也是可以選擇上下結(jié)構(gòu)。根據(jù)不同的使用場景，選擇相對最合適的方案。
除了常見的左右，和上下結(jié)構(gòu)，還有內(nèi)部結(jié)構(gòu)——將標簽放在輸入框內(nèi)部，這種也常用在移動端，它的空間占比很小，對移動端的小屏來說，是非常友好的，但如果在交互上處理不好，會有很大的缺陷。
內(nèi)部標簽結(jié)構(gòu)，只有提示性文字，用作提示用戶應(yīng)該輸入什么內(nèi)容，但用戶在輸入的時候，內(nèi)部的標簽/提示性文字就會消失，這時候，用戶會失去它是否輸入準確的唯一判別標準。
而用戶如果需要判別自己是否輸入準確，需要刪掉自己剛剛輸入的文字，看一眼提示信息，再次輸入。如果碰巧遇到有懷疑心的用戶，這種設(shè)計會讓用戶抓狂。
如圖下所示，當(dāng)字段大于三個的時候，用戶再看到這個表單，會對自己填寫表單進行思考，思考自己填的是什么，甚至?xí)ψ约禾顚懶畔⒌恼_性進行懷疑，這種現(xiàn)象從心理學(xué)角度來看，是因為人的瞬間記憶局限所造成的。
人在短時間內(nèi)只能記住 5～9 個單位，即「7 加減 2」法則，這是大部分用戶的極限，但設(shè)計不是要去挑戰(zhàn)極限，而是要思考，還有一部分用戶是遠遠達不到「7 加減 2」這個范疇，因此，在設(shè)計的時候，就需要降低用戶的記憶門檻，采用更加適用的「2 加減 1」原則，當(dāng)用戶需要輸入的字段多余三個的時候，就必須給表單留下標簽，用來提示用戶。
當(dāng)內(nèi)容過多，你根本不知道自己填寫的是什么。
尼爾森·諾曼集團的凱蒂·舍溫（Katie Sherwin）在她上傳的文章中提到將標簽替換為占位符的七個不好的原因
對于上述觀點，我贊同部分，對于第六條，無論有沒有標簽，占位符都存在，除非刪掉占位符，當(dāng)然，在占位符的文案闡述有歧義的時候，會出現(xiàn)這種情況。
第七條完全就是一個 js 觸發(fā)條件的配置問題，而且在 html 中 input 標簽中的 placeholder 占位符的默認屬性，在獲取焦點后，輸入時，占位符會自動消失。因此一般情況下，是不存在需要手動刪除占位符的（當(dāng)然，也許是我翻譯有誤。）文末有鏈接，感興趣的可以去看看。
在有些場景，因為空間占比或視覺等因素，需要刪掉標簽，可以采用下面兩種方案：
第一種，在內(nèi)部加入 icon，用作信息提醒，缺點是 icon 屬于圖畫，是一種很抽象的東西，相比文字，它的表達能力就太弱了，碰到同類信息時，識別度不是很高。比如有兩欄信息，一欄是籍貫、一欄是現(xiàn)在居住地址，很難用 icon 去區(qū)分兩者。
第二種，是谷歌的一種設(shè)計方式，用戶在輸入時內(nèi)部標題（提示信息）進行浮動位移，即節(jié)省了空間，提示性信息依舊在；缺點是，相比普通左右或上下結(jié)構(gòu)需要一定的開發(fā)成本。
為什么要做輸入限制，一是為了陳列這些數(shù)據(jù)時，可以根據(jù)長度來確定它的一種展現(xiàn)方式，二是為了減輕數(shù)據(jù)庫的壓力。
輸入限制有兩種，第一種是對表單域輸入的信息進行字數(shù)限制，比如發(fā)表 QQ 個性簽名時的字數(shù)限制。
在用戶輸入的時候，右下角會告訴用戶已經(jīng)輸入了多少字，如果超過 80 字后會變紅色，用來警示用戶，并且此時的表單域也無法輸入新的內(nèi)容
微信在朋友圈發(fā)表時，做了字數(shù)限制，但沒有在輸入過程中明確地告訴用戶，等到輸入過長提交時，彈窗提醒用戶，內(nèi)容過長提交不了，用戶精心編輯長文，到了提交的時候，卻發(fā)現(xiàn)字數(shù)過長，又不得不刪掉一些自己已經(jīng)寫好的東西。因此我們在做了限制的情況下，需提醒用戶還剩多少字。
第二種是做屬性限制，比如在數(shù)字文本框時，輸入漢字，或者字母，這就極大地增加了用戶的錯誤率。一般情況下，開發(fā)小哥都會寫上這個限制條件，但有些時候可能會因為一些原因，比較著急，直接使用「input」框默認的「text」類別，沒有加限制，這個時候我們?nèi)绻跍y試過程中發(fā)現(xiàn)了該問題，就需要去提醒開發(fā)小哥。
而且，根據(jù)不同的信息類型，要給相應(yīng)的屬性限制，比如身份證的 18 位，手機號的 11 位等。
在前面，也講過占位符的一些問題，在設(shè)計中我們要注意文字清晰明了、簡短一致，在顏色選擇上，作為提示性信息，視覺層級較弱，不宜用太過突出的顏色。
為什么說必不可少，我們不妨試一下，將占位符刪掉，是不是看著有一點別扭，因為長期的占位符已經(jīng)給用戶培養(yǎng)了使用習(xí)慣，沒有占位符，用戶在輸入的時候會抱著試一試的心態(tài)去點擊，會疑惑是不是應(yīng)該在這里輸入，不夠直接清晰，對用戶來說是很不友好的。
而且，在 HTML5 中，input 標簽中有 placeholder 占位符這個屬性是有一定原因的。而我們加入占位符，用戶在填寫表單的時候，一眼看上去就知道應(yīng)該在哪里填寫，怎么填寫，清晰明了。
圖中左側(cè)占位符雖然簡短，但不明了，用戶在輸入時，視覺焦點是在輸入框，此時如果用戶忘記需要輸入什么。會做視線偏移，去看標簽名字，再輸入，即使這個過程哪怕只需要 0.05 秒，但對用戶來說，依舊不夠友好，如果在提示性信息就明確表示輸入什么，用戶可以一目了然。
而且，在某些場景中，一個輸入框可以輸入多種信息比如登錄界面，在用戶名可以輸入郵箱、手機號、用戶名，這個時候我們?nèi)绻脴撕瀬硖嵝眩@然是不合理的，而占位符可以起到很好的提示效果。
我們常用的社交產(chǎn)品 QQ 和微信，就采用了這種樣式，另外在這里插一嘴，QQ 這個界面在按鈕處理上是不合格的，有心細的朋友嗎？
輸入框大小與邊距
本節(jié)涉及到一些代碼知識，建議細嚼慢咽。
我們在設(shè)計表單域（輸入框）時，我們所畫的輸入框，并不是前端在寫的時候真實的有效輸入框，而需要考慮的其實有兩個元素的大小，其中外部我們能看到的部分為可視大小（暫稱為 input 框），內(nèi)部為有效輸入框大小（暫稱為有效輸入框）
圖中的紅色區(qū)域就是有效輸入范圍。
而前端在開發(fā)的時候，常常采用兩種方式。
第一種：因為 input 框?qū)傩栽颍瑸榱瞬季址奖悖_發(fā)在寫的時候，不會給描邊（border）樣式屬性，而會把放在或者標簽之中，給這兩個標簽添加樣式大小。我們所見到的外框可視描邊屬性也是加在
或者標簽之上。這個時候給一個外邊距（magin）。
代碼如下：
<div style="width: 512px; height: 32px; border: 1px solid#9195a3; ">
<input type="text" placeholder="請輸入"
style="width: 488px; font-size: 14px; line-height: 24px; border: 0; margin: 4px 12px;">
</div>鑒于有些朋友沒有涉及代碼，做個講解：
有一個種類為 div，寬為 512px，高為 32px，描邊為 1px，且顏色為 #9195a3 的盒子。
里面裝了一個寬為 488px，描邊為 0 的輸入框。這個輸入框距離 div 盒子的上下間距為 4px；左右間距為 12px，并且這個輸入框里文字的大小為 14px，行高為 24px。
第二種：就是下面這種，給加上寬（width）、高（hight）和描邊（border）屬性，同時寫上padding，內(nèi)間距，來控制input有效輸入框的大小和位置。
代碼如下：
<input type="text" placeholder="請輸入"
style="width: 512px; height: 28px; border: 1px solid#9195a3; font-size: 14px;
line-height: 24px; padding: 4px 12px;">依舊講解：
有一個寬為 512px，高為 28px，描邊為 1px，且顏色為 9195a3 的輸入框，把他的文字輸入/顯示位置，往里面擠了上下間距為 4px，左右間距為 12px 的距離。并且這個輸入框里文字的大小為 14px，行高為 24px。
百度首頁采用的就是第二種方式
打開 F12 開發(fā)者模式（或右鍵——檢查）
第一張圖中可以看出，灰色部分的邊框，即設(shè)計師最常需要畫的。
第二張圖和第三張圖中，藍色部分為有效輸入框，也就是我們輸入文字并顯示的地方，在這里，開發(fā)給了框一個大小，然后給 padding 屬性，有效輸入框就會自動往里縮，也就是圖中的藍色部分。
因此，我們在繪制設(shè)計圖的時候，需要給開發(fā)標有效輸入框的大小與間距。我這里設(shè)置了紅色，為了不影響視覺，我們可以將不透明度降為零，在交接到藍湖或者像素大廚，開發(fā)都能看到 input 框的大小，可以看不見，但必須存在。
在 input 框中有 icon 時，也要注意 icon 與 input 框之間的間距。
如果有些朋友，因為某些因素跳過了代碼部分，不管開發(fā)采用哪種方式，作為設(shè)計的我們，都可以用一句話來總結(jié)上邊內(nèi)容：給 input 框繪制一個有效輸入范圍。
input框尺寸大小
寬度：在做輸入框尺寸時，需要根據(jù)內(nèi)容的長短，合理地設(shè)計輸入框大小
文本框的長度會給輸入信息的用戶心理暗示，他們會根據(jù)文本框的長度來判斷需要輸入內(nèi)容的長度。
高度：在 Ant Design 上，對輸入框定義了三種尺寸大小(大、默認、小)，40px、32px、24px、這不是固定的數(shù)據(jù)，在做項目的時候，可以根據(jù)自己產(chǎn)品的特性來選擇適合自己產(chǎn)品的規(guī)范。
輸入框焦點，對于輸入框，當(dāng)用戶選中準備輸入的時候，應(yīng)當(dāng)提供清晰的視覺定位，比如外輸入框的樣式的變動，或者閃動的光標。一般情況下，選擇光標都默認存在，光標的大小取決于字體的大小，因此不用對光標進行二次設(shè)計。
在表單內(nèi)容較多的時候，我們可以給輸入框的樣式做變動，可以更清晰地給用戶做目標視覺定位。
在表單當(dāng)中，多行文字一般出現(xiàn)在兩個地方，一是表單標簽，二是行內(nèi)信息。
在做標簽的時候，有時候會出現(xiàn)一個名字很長的標簽，我們給文字設(shè)定寬度和行高，我們給出規(guī)則，比如最多五個字，超出部分做換行處理，我們需要給標簽的行高和寬度統(tǒng)一。
因為開發(fā)在寫這個頁面的時候，是把每一個元素放在一個 class 統(tǒng)一的 div 或者 span 標簽內(nèi)。因此我們在做設(shè)計稿的時候，需要把換行元素考慮進去，即使只有一個字，避免以后二次設(shè)計和開發(fā)。
在做表單域的行內(nèi)信息換行時，我們需要給出橫向字數(shù)寬度，和上下左右的間距。也就是開始我們要畫出 input 框的原因，開發(fā)可以直接根據(jù) input 框進行定位。
且當(dāng)內(nèi)容過多的時候，我們需要做隱藏處理
比如設(shè)定輸入 4 行文字以內(nèi)，隨著文字每增加一行輸入框會自動向上撐開。文字超過 4 行，輸入框大小就不會變動了，4 行以上的文字會被遮擋住，但我們在給文字做遮擋的時候，要注意提醒用戶上方有文字被遮擋。一般采用的方式是對最上方一行文字遮擋一半。
上述情況只在輸入框空間占比很小，同時多行文字出現(xiàn)較為頻繁的場景下才會使用。比如實時聊天界面。
而在一般情況下，只給輸入框做單行處理，同時給超出部分文字做隱藏。
而明確需要多行輸入的輸入框，會在大尺寸大小上做區(qū)別，正如我前邊所提的那樣，輸入框的大小或影響用戶對該輸入框內(nèi)容輸入多少對判斷，輸入框尺寸大，在用戶潛意識里就會認為這是可以輸入很多字的。
而多行輸入框在 ant design 中被定義為文本域。
即：
超出部分是自適應(yīng)高度，還是顯示滾動條，需要標注出來，并且要指定最小行數(shù)，和最大行數(shù)。
否則開發(fā)會采用默認的以滾動條的形式來展示。
我們有時在填寫一個表單，全部信息填寫完成，在點擊提交后，突然彈出一個框，被告知信息填寫錯誤。自動返回填寫頁面，之前的填寫好的信息全部消失不見，這種行為對于用戶來說，其實是很抓狂的。脾氣暴躁一點的，可能會直接砸電腦。
因為用戶在填寫結(jié)束之后，大腦中分泌多巴胺，獲得愉悅感，但在這個時候一個報錯，把臨到腦門的多巴胺給硬生生逼了回去，是很影響用戶心情的，無論表單中所承載的信息有哪些，都應(yīng)該讓用戶感受到引導(dǎo)感。用戶所需要的是引導(dǎo)他完成表單的填寫，而不是對他填寫表單做判斷。
因此我們在用戶輸入的時候，就應(yīng)及時針對用戶錄入的信息進行判斷，有些前端自己就能做，有些需要掃一遍數(shù)據(jù)庫，做信息對比，然后 告知用戶信息重復(fù)，總之及時做判斷，并給出反饋，同時引導(dǎo)用戶完成正確填寫操作，不要等到用戶點提交按鈕后，才給用戶做出判斷。
在移動端，只要涉及到表單信息錄入，都會喚起鍵盤，根據(jù)不同的使用場景給用戶喚起不同的鍵盤樣式，可以很大程度上節(jié)省用戶的時間，用戶體驗也會得到顯著提升。
如果我們在交付設(shè)計稿的時候，沒有標注鍵盤類型，開發(fā)就會使用默認的中文鍵盤，用戶在使用的時候，就會造成不必要的困擾
有些金融類產(chǎn)品需要使用亂序的安全鍵盤，也需要額外標注。
在移動端輸入端時候，有時候喚起鍵盤，會遮擋掉關(guān)鍵性按鈕，我們在設(shè)計過程中，就需要充分考慮到這一點，并且規(guī)避掉。
具體做法可以參考以下兩種方式：
第一種，前端不給上邊元素定位，喚起鍵盤時，鍵盤自動頂上去。適用于內(nèi)容簡單，且上方無重要內(nèi)容的頁面。
第二種，界面字段少，可以在安全區(qū)域內(nèi)設(shè)計相關(guān)內(nèi)容。
有時候需要幫助性信息，來輔助用戶完成表單填寫，當(dāng)文本簡短的時候，可以直接放在該輸入框的附近，當(dāng)文案過長的時候，就需要做氣泡框，獲取鼠標焦點，則展開信息，失去焦點則消失，在氣泡展開時，切勿擋住 input 輸入框。
也有些產(chǎn)品是將幫助信息放在頁面頂部，如果是針對全局幫助性信息，則可以采用這種方式，如果只是針對某個元素提醒，則應(yīng)將兩者放在一起，讓用戶知道當(dāng)前處于什么地方，在針對什么進行引導(dǎo)、輔助。
用戶在面對需要錄入信息比較多的表單時，內(nèi)心是很抗拒的，而用戶所填寫的信息，又是產(chǎn)品所需要的。因此我們可以針對信息做一些篩選，將一些重要信息和非重要信息區(qū)分出來，減少用戶的錄入負擔(dān)，也減少用戶的時間成本。
用戶在完成表單填寫，并提交后，需要及時給用戶反饋，比如完成提交時的祝賀，謝謝等，都能催發(fā)用戶體內(nèi)的多巴胺，并產(chǎn)生愉悅的情緒，無論是祝賀還是提醒，用戶都會產(chǎn)生快樂的情感。
在某些時候因為其它因素，提交失敗，需要及時反饋用戶，并且要一定要將之前所填寫好的數(shù)據(jù)保留下來，不要讓用戶輸入第二次！
最后插一句，無論是標簽、還是占位符，還是提示性文字，或者反饋性文字……表意都必須清晰易懂，同時需要消除用戶的疑慮，在整個流程中，做出更快更準確的抉擇。
比如這個地方，用戶手機號錄入錯誤，但需要詳細的提醒用戶，到底是哪里錯誤，而不是含糊不清的去告訴他錯了，我在前面依舊講過，用戶需要我們發(fā)現(xiàn)錯誤，并做出正確的引導(dǎo)，而不是一味的告訴用戶他錯了。
再比如，用戶在填完一個表單，突然要關(guān)閉，彈出彈窗，確定要取消，一個按鈕是確定，一個按鈕是取消，就很有歧義，會給用戶造成選擇困難。這個就是在提示文案中，產(chǎn)生了與按鈕會產(chǎn)生歧義的詞。
還有很多地方，能把微文案運用好，對用戶對操作流程能起到非常大的幫助，建議廣大設(shè)計師在做微文案處理的時候，謹慎而為。
10000 多字全部干貨！一篇文章就能幫你掌握微文案設(shè)計，設(shè)計師快來收藏。
講完表單基本結(jié)構(gòu)設(shè)計，下面來針對輸入框來講講他們?nèi)绾卧O(shè)計。
表單域包含以下內(nèi)容有：
中文文本框，需要注意的就是基本的結(jié)構(gòu)，針對自己產(chǎn)品業(yè)務(wù)所需要的，對標簽、輸入限制、占位符……等等最合適的設(shè)計。需要特別注意的是標簽、輸入限制、占位符、多行文字規(guī)則。
其次就是對字體的屬性調(diào)整，比如字體大小、行高等。
數(shù)字輸入框
常見的數(shù)字輸入框有電話、身份證、銀行卡、價格、等。不同的類型在設(shè)計上也有區(qū)別。不過涉及到數(shù)字的，我們在設(shè)計中要考慮到，要秉承清晰、易讀的原則。
電話輸入框
電話輸入框有三個結(jié)構(gòu)，國家/地區(qū)、區(qū)號、手機號。
不同國家地區(qū)區(qū)號不一樣，而國家區(qū)號存在的意義就是為了篩選不同的區(qū)號，因為不是所有用戶都能記住自己當(dāng)?shù)氐膮^(qū)號。
美團的設(shè)計中，就很好地詮釋了這一點。
沒有直接的國家地區(qū)選擇，而是在區(qū)號下拉框當(dāng)中，給了每個區(qū)號國家地區(qū)作為用戶區(qū)分。
我們接著聊一聊電話號碼的輸入問題
在移動端，手機充值輸入框內(nèi)，電話號碼需要自動填充，避免用戶二次操作，但常見的手機充值業(yè)務(wù)，基本上已經(jīng)是大廠占據(jù)，用戶常用的也就那么幾個產(chǎn)品，而這些產(chǎn)品也獲取到了用戶極高的信任。
但即使是這樣，他們依舊沒有采用直接填充的方式，而是在你輸入過后會有歷史記錄，用歷史記錄填充，當(dāng)你清除歷史記錄后，再次進入，依舊需要手動輸入。
在這個信息透明的互聯(lián)網(wǎng)時代，用戶對自己的私人信息很看重。一個產(chǎn)品需要輸入電話號碼，不能直接做自動填充，即使你已經(jīng)抓取到了用戶的信息，也不要告訴用戶你有他的信息，這一點很重要，如果你直接使用自動填充手機號，用戶會覺得隱私泄露，用戶對這個產(chǎn)品信任感本就不足，這種做法會讓用戶信任感再一次降低。
但讓用戶手動輸入，安全感得到了滿足，卻會增加用戶的操作負擔(dān)。
魚與熊掌不可兼得，我曾與一個 B 端行業(yè)的產(chǎn)品設(shè)計師「朱進」探討過這個問題，最后得出的方案是，讓用戶數(shù)手動輸入，但在輸入前三位的時候，彈出氣泡，顯示為完整的手機號，點擊該氣泡，就會自動填充完整的手機號。
這樣做的好處是，用戶在輸入的時候，心理的懶惰，會讓用戶抗拒這種行為，產(chǎn)生負面情緒，點擊氣泡，填充了完整的手機號，用戶會認為這個功能解決了他當(dāng)下不想輸入的痛點。
而在有些場景，需要輸入其他人的手機號，比如旅游類產(chǎn)品，酒店類產(chǎn)品。
需要加入訪問通訊錄的權(quán)限。
而輸入手機號之后的狀態(tài)記得標注出來，按照之前所說的 7 加減二法則，根據(jù)用戶的記憶結(jié)構(gòu) xxx xxxx xxxx 來優(yōu)化用戶的閱讀體驗。
身份證/銀行卡輸入框
身份證、銀行卡輸入框，跟上邊一樣，根據(jù)用戶閱讀習(xí)慣，增加可讀性，加入掃描和圖片識別，減少用戶操作。
我使用過一些產(chǎn)品，只有掃描功能，但沒有從圖片中識別，導(dǎo)致用起來很憋屈，因為銀行卡不可能隨時在身上，有時需要綁定的時候，卻告訴我只能掃描，這個時候我只能 回到最原始的，記幾個數(shù)字，輸入幾個。來來回回折騰好幾遍，才能輸入銀行卡。
金額輸入框
在做價格輸入框的時候，有些設(shè)計師喜歡在前面加上「￥」或者「$」符號，而且還放在了同一段文字當(dāng)中，這樣做在設(shè)計上沒問題，但對開發(fā)不是很友好，因為開發(fā)在寫頁面過程中，前面的「￥」或者「$」符號，是一個定量，也就是寫死了，不會變動，而后邊的價格是一個變量，無論是從后臺獲取的數(shù)據(jù)，還是你新錄入的信息，都是變量，往往是按照兩個元素進行分別設(shè)置屬性。
舉個例子吧，支付寶的充值界面，在你輸入價格之前，這個「￥」符號就是存在的，因此它是一個定量，不能和價格放在一個圖層，是需要單獨拿出來的。
更何況有些設(shè)計師，會將前面的符號設(shè)計得比價格要小，甚至小數(shù)位，也是樣式和整數(shù)位樣式也不一樣，比如京東的詳情頁。
因此，我們在設(shè)計過程中，需要把兩個元素拆開，符號一個圖層，價格一個圖層。如果碰到后邊小數(shù)位樣式和整數(shù)位不同時，都需要單獨分離圖層。
設(shè)計金額輸入時，很多 app 沿用了國際標準的千分位分隔符，比如我們輸入 1,345,543 金額，除了長期與千分位打交道的人，大部分人是很難第一眼看出金額具體是多少，還得從「個、十、百、千、萬」開始讀。
前邊有講過，雖然要遵循「7 加減 2」法則，提高內(nèi)容的可讀性，但同時也要遵循不同數(shù)字，用戶的閱讀習(xí)慣，而價格，國內(nèi)的閱讀習(xí)慣都是 「個、十、百、千、萬」。至于為什么采用「千分位」，是因為與國際對標，國際統(tǒng)一的是千分位，而西方?jīng)]有「萬、億」只有「千、百萬、十億」，這三個記數(shù)單位是千進制，因此是千分位，而中國是萬進制，所以千分位，在中國，使用起來并不是那么友好。
有些 app 采用了大寫金額的提示，但這種繁體字，對于信息提取還是比較吃力。
之前有個交互設(shè)計師柴維英就提到了這種現(xiàn)狀，甚至提出了一個不錯的方案。
她的思考方案是：當(dāng)用戶輸入的金額超過千時，出現(xiàn)最高分位提示，每多輸入一位，最高分位隨之增加。閱讀速度大大提升。
還可以采用萬分位分隔符，3,233,234 采用萬分位即 323,3234 一眼可以看出有 323 萬，但這個方法并沒有在國內(nèi)推行，猜測是，目前所有產(chǎn)品都采用千分位，用戶已經(jīng)形成了習(xí)慣，即使使用起來并不方便，如果改成萬分位，會給用戶增加一定的理解成本。
當(dāng)然了，在少數(shù)場景中，用戶在使用轉(zhuǎn)賬這個功能時，并不會涉及到太大的金額。也就不會有金額認知困難的情況出現(xiàn)，比如支付寶、微信、日常所涉及到的轉(zhuǎn)賬最高也才幾萬。
密碼輸入框，目前有兩種形式，第一種是 input 框——password 的默認狀態(tài)，輸入以「 * 」展示，從開始輸入密碼，到結(jié)束，都是以「 * 」展示，如果沒有查看密碼操作，很難知道自己輸入的到底準不準確。
因此還有一種方式，就是在輸入的時候，最新的字符，顯示 1～2s，這樣，用戶可以看清楚自己輸入的內(nèi)容，能減少部分用戶，進行點擊查看密碼操作。
一旦涉及到密碼，必須有確認密碼，為用戶輸入做校正，減少用戶輸入的錯誤率。
郵箱輸入
在做郵箱輸入的時候，適當(dāng)加上主機名選擇，也就是我們所謂的后綴選擇。目的是為了減少用戶輸入。
但你可不要就認為只是加上幾個常用的郵箱選擇就萬事大吉了。
舉個例子，有些用戶的郵箱為 chetchan@aliyun.mou.com 怎么去處理，還有些用戶的子域是經(jīng)過自定義的，比如子域會換成公司名字：chetchan@taobao.com。
針對不同的場景不同的用戶去進一步考量，因此我們可以選擇這種設(shè)計方案
在用戶輸入時，自動彈出下拉列表，同時匹配常用郵箱，如果用戶使用的是 qq 郵箱，即可直接點擊選擇。如果用戶找不到自己想要輸入的郵箱，則會繼續(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)常在輸入的時候，幾乎都是從 www 開始的，而瀏覽器又會自動補充協(xié)議。因此無需我們輸入?yún)f(xié)議。
而大多時候，我們在記憶網(wǎng)址的時候，是不會去記它前面的協(xié)議的，因為我們的瀏覽器默認是隱藏掉協(xié)議的，有些甚至?xí)逊?wù)器類別也隱藏掉。
有些產(chǎn)品在記錄網(wǎng)址/鏈接的時候，會在前面加上協(xié)議選擇，讓用戶選擇 http 或者 https。
但是，除了特定的網(wǎng)頁，比如百度、淘寶、京東，其它網(wǎng)頁我們是很難記住它的完整網(wǎng)址的，因此更多是在使用復(fù)制粘貼的操作，而你一旦復(fù)制，就會將網(wǎng)址前面的協(xié)議一同復(fù)制，也就不存在上述問題了。
以上就是《設(shè)計師必不可少的表單設(shè)計（上篇）》全部內(nèi)容，感謝大家百忙之中抽出時間看完，下一篇會繼續(xù)對表單設(shè)計的其它模塊，如選擇器、步進器等模塊進行分享我的理解。
TML 中使用 <input> 元素表示單行輸入框和 <textarea> 元素表示多行文本框。
HTML中使用的 <input> 元素在 JavaScript 中對應(yīng)的是 HTMLInputElement 類型。HTMLInputElement 繼承自 HTMLElement 接口：
interface HTMLInputElement extends HTMLElement {
...
}HTMLInputElement 類型有一些獨有的屬性和方法：
而在上述介紹 HTMLInputElement 類型中的屬性時，type 屬性要特別關(guān)注一下，因為根據(jù) type 屬性的改變，可以改變<input>的屬性。
類型 | 描述 |
text | 文本輸入 |
password | 密碼輸入 |
submit | 表單數(shù)據(jù)提交 |
button | 按鈕 |
radio | 單選框 |
checkbox | 復(fù)選框 |
file | 文件 |
hidden | 隱藏的字段 |
image | 定義圖像作為提交按鈕 |
reset | 重置按鈕 |
省略 type 屬性與 type="text"效果一樣， <input> 元素顯示為文本框。
當(dāng) type 的值為text/password/number/時，會有以下屬性對 <input> 元素有效。
屬性 | 類型 | 描述 |
autocomplete | string | 字符串on或off，表示<input>元素的輸入內(nèi)容可以被瀏覽器自動補全。 |
maxLength | long | 指定<input>元素允許的最多字符數(shù)。 |
size | unsigned long | 表示<input>元素的寬度，這個寬度是以字符數(shù)來計量的。 |
pattern | string | 表示<input>元素的值應(yīng)該滿足的正則表達式 |
placeholder | string | 表示<input>元素的占位符，作為對元素的提示。 |
readOnly | boolean | 表示用戶是否可以修改<input>的值。 |
min | string | 表示<input>元素的最小數(shù)值或日期。 |
max | string | 表示<input>元素的最大數(shù)值或日期。 |
selectionStart | unsigned long | 表示選中文本的起始位置。如果沒有選中文本，返回光標在<input>元素內(nèi)部的位置。 |
selectionEnd | unsigned long | 表示選中文本的結(jié)束位置。如果沒有選中文本，返回光標在<input>元素內(nèi)部的位置。 |
selectionDirection | string | 表示選中文本的方向。可能的值包括forward、backward、none。 |
下面創(chuàng)建一個 type="text" ，一次顯示 25 個字符，但最多允許顯示 50 個字符的文本框：
<input type="text" size="25" maxlength="50" value="initial value">HTML 使用的 <textarea> 元素在 JavaScript 中對應(yīng)的是 HTMLTextAreaElement 類型。HTMLTextAreaElement類型繼承自 HTMLElement 接口：
interface HTMLTextAreaElement extends HTMLElement {
...
}HTMLTextAreaElement 類型有一些獨有的屬性和方法：
下面創(chuàng)建一個高度為 25，寬度為 5 的 <textarea> 多行文本框。它與 <input> 不同的是，初始值顯示在 <textarea>...</textarea> 之間：
<textarea rows="25" cols="5">initial value</textarea>注意：處理文本框值的時候最好不要使用 DOM 方法，而應(yīng)該使用 value 屬性。
<input> 與 <textarea> 都支持 select() 方法，該方法用于選中文本框中的所有內(nèi)容。該方法的語法為：
select(): void下面看一個示例：
let textbox = document.forms[0].elements["input-box"];
textbox.select();也可以在文本框獲得焦點時，選中文本框的內(nèi)容：
textbox.addEventListener("focus", (event) => {
event.target.select();
});當(dāng)選中文本框中的文本或使用 select() 方法時，會觸發(fā) select 事件。
let textbox = document.forms[0].elements["textbox1"];
textbox.addEventListener("select", (event) => {
console.log(`Text selected: ${textbox.value}`);
});HTML5 對 select 事件進行了擴展，通過 selectionStart 和 selectionEnd 屬性獲取文本選區(qū)的起點偏移量和終點偏移量。如下所示：
function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
}注意：在 IE8 及更早版本不支持這兩個屬性。
HTML5 提供了 setSelectionRange() 方法用于選中部分文本：
setSelectionRange(start, end, direction): void;下面看一個例子：
<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>如果想要看到選中效果，必須讓文本框獲得焦點。
不同文本框經(jīng)常需要保證輸入特定類型或格式的數(shù)據(jù)，或許數(shù)據(jù)需要包含特定字符或必須匹配某個特定模式。而文本框并未提供驗證功能，因此要配合 JavaScript 腳本實現(xiàn)輸入過濾功能。
有些輸入框需要出現(xiàn)或不出現(xiàn)特定字符。如果想要將輸入框變成只讀的，只需要使用 preventDefault()方法將按鍵都屏蔽：
input.addEventListener("keypress", (event) => {
event.preventDefault();
});而要屏蔽特定字符，就需要檢查事件的 charCode 屬性。如下所示，使用正則表達式實現(xiàn)只允許輸入數(shù)字的輸入框：
input.addEventListener("keypress", (event) => {
if (!/\d/.test(event.key)) {
event.preventDefault();
}
});還有一個問題需要處理：復(fù)制、粘貼及涉及Ctrl 鍵的其他功能。在除IE 外的所有瀏覽器中，前面代碼會屏蔽快捷鍵Ctrl+C、Ctrl+V 及其他使用Ctrl 的組合鍵。因此，最后一項檢測是確保沒有按下Ctrl鍵，如下面的例子所示：
textbox.addEventListener("keypress", (event) => {
if (!/\d/.test(String.fromCharCode(event.charCode)) &&
event.charCode > 9 &&
!event.ctrlKey){
event.preventDefault();
}
});最后這個改動可以確保所有默認的文本框行為不受影響。這個技術(shù)可以用來自定義是否允許在文本框中輸入某些字符。
IE 是第一個實現(xiàn)了剪切板相關(guān)的事件以及通過JavaScript訪問剪切板數(shù)據(jù)的瀏覽器，其它瀏覽器在后來也都支持了相同的事件和剪切板的訪問，后來 HTML5 將其納入了規(guī)范。以下是與剪切板相關(guān)的 6 個事件：
剪切板事件的行為及相關(guān)對象會因瀏覽器而異。在 Safari、Chrome 和 Firefox 中，beforecopy、beforecut 和 beforepaste 事件只會在顯示文本框的上下文菜單時觸發(fā)，但 IE 不僅在這種情況下觸發(fā)，也會在 copy、cut 和 paste 事件在所有瀏覽器中都會按預(yù)期觸發(fā)。
在實際的事件發(fā)生之前，通過beforecopy、beforecut 和 beforepaste 事件可以在向剪貼板發(fā)送或從中檢索數(shù)據(jù)前修改數(shù)據(jù)。不過，取消這些事件并不會取消剪貼板操作。要阻止實際的剪貼板操作，必須取消 copy、cut和 paste 事件。
剪貼板的數(shù)據(jù)通過 clipboardData 對象來獲取，且clipboardData 對象提供 3 個操作數(shù)據(jù)的方法：
而 clipboardData 對象在 IE 中使用 window 獲取，在 Firefox、Safari 和 Chrome 中使用 event 獲取。為防止未經(jīng)授權(quán)訪問剪貼板，只能在剪貼板事件期間訪問 clipboardData 對象；IE 會在任何時候都暴露 clipboardData 對象。因此，要兼容兩者，最好在剪貼板事件期間使用該對象。
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ù)字，那剪貼時，就需要使用paste事件檢查剪貼板上的文本是否無效。如果無效，可以取消默認行為：
input.addEventListener("paste", (event) => {
let text = getClipboardText(event);
if (!/^\d*$/.test(text)){
event.preventDefault();
}
});注意：Firefox、Safari和Chrome只允許在onpaste事件中訪問getData()方法。
在 JavaScript 中，可以用在當(dāng)前字段完成時自動切換到下一個字段的方式來增強表單字段的易用性。比如，常用手機號分為國家好加手機號。因此，我們設(shè)置 2 個文本框：
<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ù)后，就把焦點移到下一個文本框，這樣可以增加表單的易用性并加速數(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ù)通過比較用戶輸入文本的長度與 maxLength 屬性的值來檢測輸入是否達到了最大長度。如果兩者相等，就通過循環(huán)表中的元素集合找到當(dāng)前文本框，并把焦點設(shè)置到下一個元素。
注意：上面的代碼只適用于之前既定的標記，沒有考慮可能存在的隱藏字段。
HTML5 新增了一些表單提交前，瀏覽器會基于指定的規(guī)則進行驗證，并在出錯時顯示適當(dāng)?shù)腻e誤信息。而驗證會基于某些條件應(yīng)用到表單字段中。
表單字段中添加 required 屬性，用于標注該字段是必填項，不填則無法提交。該屬性適用于<input>、<textarea>和<select>。如下所示：
<input type="text" name="account" required>也可以通過 JavaScript 檢測對應(yīng)元素的 required 屬性來判斷表單字段是否為必填項：
let isRequired = document.forms[0].elements["account"].required;也可以檢測瀏覽器是否支持 required 屬性：
let isRequiredSupported = "required" in document.createElement("input");注意：不同瀏覽器處理必填字段的機制不同。Firefox、Chrome、IE 和Opera 會阻止表單提交并在相應(yīng)字段下面顯示有幫助信息的彈框，而Safari 什么也不做，也不會阻止提交表單。
HTML5 為 <input> 元素增加了幾個新的 type 值。如下所示：
類型 | 描述 |
number | 數(shù)字值的輸入 |
date | 日期輸入 |
color | 顏色輸入 |
range | 一定范圍內(nèi)的值的輸入 |
month | 允許用戶選擇月份和年份 |
week | 允許用戶選擇周和年份 |
time | 允許用戶選擇時間（無時區(qū)） |
datetime | 允許用戶選擇日期和時間（有時區(qū)） |
datetime-local | 允許用戶選擇日期和時間（無時區(qū)） |
電子郵件地址的輸入 | |
search | 搜索（表現(xiàn)類似常規(guī)文本） |
tel | 電話號碼的輸入 |
url | URL地址的輸入 |
這些輸入表名字段應(yīng)該輸入的數(shù)據(jù)類型，并且提供了默認驗證。如下所示：
<input type="email" name="email">
<input type="url" name="homepage">要檢測瀏覽器是否支持新類型，可以在 JavaScript 中創(chuàng)建 <input> 并設(shè)置 type 屬性，之后讀取它即可。老版本中會將我只類型設(shè)置為 text，而支持的會返回正確的值。如下所示：
let input = document.createElement("input");
input.type = "email";
let isEmailSupported = (input.type == "email");而上面介紹的幾個如 number/range/datetime/datetime-local/date/month/week/time 幾個填寫數(shù)字的類型，都可以指定 min/max/step 等幾個與數(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() 方法對 <input> 元素中的值進行加減，它倆會接收一個可選參數(shù)，用于表示加減的數(shù)值。如下所示：
input.stepUp(); // 加1
input.stepUp(5); // 加5
input.stepDown(); // 減1
input.stepDown(10); // 減10HTML5 還為文本添加了 pattern 屬性，用于指定一個正則表達式。這樣就可以自己設(shè)置 <input> 元素的輸入模式了。如下所示：
<input type="text" pattern="\d+" name="count">注意模式的開頭和末尾分別假設(shè)有^和$。這意味著輸入內(nèi)容必須從頭到尾都嚴格與模式匹配。
與新增的輸入類型一樣，指定 pattern 屬性也不會阻止用戶輸入無效內(nèi)容。模式會應(yīng)用到值，然后瀏覽器會知道值是否有效。通過訪問 pattern 屬性可以讀取模式：
let pattern = document.forms[0].elements["count"].pattern;使用如下代碼可以檢測瀏覽器是否支持pattern 屬性：
let isPatternSupported = "pattern" in document.createElement("input");HTML5 新增了 checkValidity() 方法，用來檢測表單中任意給定字段是否有效。而判斷的條件是約束條件，因此必填字段如果沒有值會被視為無效，字段值不匹配 pattern 屬性也會被視為無效。如下所示：
if (document.forms[0].elements[0].checkValidity()){
// 字段有效，繼續(xù)
} else {
// 字段無效
}要檢查整個表單是否有效，可以直接在表單上調(diào)用checkValidity()方法。這個方法會在所有字段都有效時返回true，有一個字段無效就會返回false：
if(document.forms[0].checkValidity()){
// 表單有效，繼續(xù)
} else {
// 表單無效
}validity 屬性會返回一個ValidityState 對象，表示 <input> 元素的校驗狀態(tài)。返回的對象包含一些列的布爾值的屬性：
因此，通過 validity 屬性可以檢查表單字段的有效性，從而獲取更具體的信息，如下所示：
if (input.validity && !input.validity.valid){
if (input.validity.valueMissing){
console.log("請指定值.")
} else if (input.validity.typeMismatch){
console.log("請指定電子郵件地址.");
} else {
console.log("值無效.");
}
}通過指定 novalidate 屬性可以禁止對表單進行任何驗證：
<form method="post" action="/signup" novalidate>
<!-- 表單元素 -->
</form>也可以在 JavaScript 通過 noValidate 屬性設(shè)置，為 true 表示屬性存在，為 false 表示屬性不存在：
document.forms[0].noValidate = true; // 關(guān)閉驗證如果一個表單中有多個提交按鈕，那么可以給特定的提交按鈕添加formnovalidate 屬性，指定通過該按鈕無需驗證即可提交表單：
<form method="post" action="/foo">
<!-- 表單元素 -->
<input type="submit" value="注冊提交">
<input type="submit" formnovalidate name="btnNoValidate"
value="沒有驗證的提交按鈕">
</form>也可以使用 JavaScript 設(shè)置 formNoValidate 屬性：
// 關(guān)閉驗證
document.forms[0].elements["btnNoValidate"].formNoValidate = true;以上總結(jié)了 <input> 和 <textarea> 兩個元素的一些功能，主要是 <input> 元素可以通過設(shè)置 type 屬性獲取不同類型的輸入框，可以通過監(jiān)聽鍵盤事件并檢測要插入的字符來控制文本框的內(nèi)容。
還有一些與剪貼板相關(guān)的事件，并對剪貼的內(nèi)容進行檢測。還介紹了一些 HTML5 新增的屬性和方法和新增的更多的 <input> 元素的類型，和一些與驗證相關(guān)的屬性和方法。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
