們在上網的時候，經常有一些登錄界面進行輸入賬號和密碼，以及我們在網上填一些信息，這些功能的實現都是通過表單來完成的，今天我們就來講講表單。

表單不是指一個標簽，而是指一類標簽。

我們表單里所有的內容都要寫在<form></form>標簽中 form的action屬性是將表單所填的內容發送到想要發送的后臺，而method屬性有兩個值，分別是get和post。get和post的主要區別是get表單所傳的內容會在地址欄里顯示出來，并且有長度限制，而post表單所傳的內容不會在地址欄顯示出來，并且可以視為沒有長度限制。一般系統默認get。當然get和post的細區別還是有的，在這里我就不贅述了。

其中最重要的是<input>標簽，input標簽也是單標簽。input標簽的type屬性值不同，其產生的作用也不同：如：<input type="text">產生的是文本框，一般都是我們登錄時輸入的賬號那樣的文本框。<input type="password">,產生的是密碼框，一般都是我們登錄時輸入密碼的那個框框。<input type="submit">產生的是提交框，一般是我們登錄的那個按鈕。這些標簽都有value屬性，但只有提交框用最合適用，因為文本框和密碼框雖然也會展示出來，但效果卻差強人意，我們一般都用placeholder屬性替代它。

不知大家有沒有在網上做過選擇題，作者是做過的。網頁中的選擇題也是用的input。

input的type屬性值還有radio，是單選框，有幾個選項就寫幾個input，但要注意每一個input里都要寫相同的name屬性和屬性值，這樣的話瀏覽器才會知道這些是同一道題。

既然有單選題那一定也有多選題了，type的checked屬性是多選框，其和單選的用法一樣，也都要注意name一樣的為一道題，還有一個屬性是checked=“checked”，這個可以設定默認選擇的選項。

我們也一定遇到過選擇文字就能勾選而不用非得去點選框的情況，其實input選擇框只有被點擊的時候才能選中，但有的時候太小不容易點擊甚至有的根本沒有顯示出來，這樣的話用戶體驗就會非常的差，所以我們引進了一個標簽：<label></label>標簽，這個標簽可以實現點擊文字就進行選擇的功能，用法就是將input標簽和文字寫在同一個label標簽中，注意每一個選項寫一起。

我們來看一下代碼和結果：

作者已經盡量去說清楚了，歡迎大家批評指教，希望多多關注[送心]

使用APP時，用戶獲得信息往往是通過輸入框，然而這部分卻是很多設計者容易忽略的部分。本篇文章為大家總結了常見的四大輸入框樣式，并分析了其使用場景和注意事項。

輸入框作為頁面中主要的數據錄入入口，可引導用戶錄入信息。我們從APP中獲得的所有信息來源，均是由用戶通過輸入框得來，可見他的重要性。

往往很多APP在設計時卻很容易忽視這塊，標注不清楚、字體限制未標明、文字單行和多行樣式等都不設計出來，導致技術人員在實現時要么靠過往經驗，要么找你繼續了解。

不過無論哪一種方式其實都比較浪費時間，這些如果我們平時去總結分析后，是可以避免的。

今天的文章，我們總結下APP中常見的四大輸入框樣式，即獨立文本標簽輸入框、行內標簽輸入框、對話輸入框、段落文字等，同時總結分析他們的使用場景和注意事項。

一、獨立文本標簽輸入框

獨立文本標簽即在左側以文字的形式提示輸入內容，同時在內容輸入取預設內容，當輸入信息后，由于左側清晰的文字標簽，不管內容多少我們仍然能夠很清晰的瀏覽和操作。

當然由于內容信息的組合、多少不同，我將其歸納為四種形式：

1. 單項輸入
2. 多項輸入
3. 段落文本
4. 多行輸入

以下分別是獨立文本標簽輸入框中的四種形式，掌握這些可以讓我們在表格列表設計中更加高效。

（配圖來自微信小程序規范）

當然，除了知道它有哪些形式是不夠的？

作為設計師，我們還需要知道它對應的一些規范，只有掌握了這些規范，我們才能夠更好的落地，首先來看看有規范和沒規范是怎么樣的。

1. 當沒有規范時：

標題長短未規定，同時輸入文本未對齊，整個界面感覺混亂不堪。

2. 當有規范時：

個界面清晰明了，當你將這個規范交給技術，他就能夠按照你設計的效果實現，而如果你前期設計不到位，技術就按照他自身的想法實現，自然出來的效果你總會說還原度不高，別人也說這個體驗不好。有時候還原度不高，體驗不好，作為設計師你是不是應該好好想想。

下圖以微信小程序規范為例：

最后，掌握了規范還不夠，我們還可以做得更加細化？

1. 設計錯誤提示：在信息輸入錯誤后，即可看到報錯提示，這樣可以提醒用戶讓其及時修正。

市面上很多APP為了方便，直接提交整個表單后才提示錯誤，這樣開發成本雖然降低，但是用戶的操作成本增加，具體如何選擇就看你產品的用戶量如何，當然一個好的用戶體驗需要考慮這些問題。

2. 輸入鍵盤對應輸入信息：輸入框往往有金額、文字、電話號碼、卡號、身份證號輸入等，一個好的交互體驗就是當你需要輸入電話號碼，鍵盤直接幫你定位在數字鍵，當你輸入身份證號，鍵盤直接是數字加X，讓你輸入更便捷不用切換。

上圖你看到支付寶的充值和銀行卡界面，這些細節的體現正是決定一個好的產品和差的產品的區別。

二、行內標簽輸入框

行內標簽輸入框是UI設計中最常見的控件，在絕大多數的場合用來給用戶輸入少量的文字。

比如：搜索、登陸注冊等。

行內標簽相對于獨立文本標簽樣式較為流行，相對較為簡潔，但是對于屏幕上顯示超過2個文本框的情況，行內標簽則不是獨立文本標簽的一個好的取代方案。

其缺點就是一旦用戶點擊了輸入框，標簽就消失了，這樣用戶就不能二次檢查他們輸入的內容是不是他們應該輸入的類型。同時由于已經輸入過一次，因此第二個輸入框很容易被忽略。

三、對話輸入框

對話輸入框常見于聊天消息類界面，其特點是當你輸入一行信息時，不會有什么變化，但是當你輸入多行信息時，如果你不出相應規則，那么后期落地就只有根據技術喜好了。

在設計時，我們不僅要做常規樣式，還需要做輸入多行的效果，這樣開發拿到手才不會一抹黑，也不會在心里默默罵你不專業了。

以微信對話輸入框為例，當文字一行時，輸入框正常顯示；當文字兩行時，輸入框自動向上升，圖標按鈕位置不變；當為五行以上時，文字可上下滑動顯示，同時露出一點文字，讓用戶清楚，上面還有字的情況。

四、段落文字

段落文字的使用場景主要分兩種情況：

• 一種是常見的APP社交模塊處，具有發表發布的模塊；
• 一種是設置頁面，需要設置一些個人資料。

1. 發表或者發布模塊：

以新浪微博為例，如果你輸入的文字超出140字，超過該字數則以橙色文字顯示，區別的是他并沒有和其他發布平臺限制字數，而是當文字超出140字時展示會將文字進行折疊顯示。

2. 個人設置模塊：

該位置的輸入框有字數限制，這時候在界面上就會顯示限制文字多少，當前輸入文字多少，同時超出文字范圍，以提示框顯示。

上面以轉轉為例，轉轉個人設置頁面限制300個字，當默認狀態顯示0/300，同時輸入時顯示輸入文字個數，當超出限制字數，則以氣泡提示，這才是一個好的交互流程。

五、總結

1. 獨立文本標簽輸入框：獨立文本標簽即在左側以文字的形式提示輸入內容，因此當輸入信息后，其結構仍然清晰。多用于設置頁面、資料修改頁面等。主要有4中表現形式：單項輸入、多項輸入、段落文本、多行輸入。
2. 行內標簽輸入框：在絕大多數的場合用來給用戶輸入少量的文字，不適用文字列表超過2個的情況。但是由于其樣式流行，因此多用于登陸界面等。
3. 對話輸入框：在設計時需要考慮不同狀態的設計，不要只做個基礎界面就給開發，一行文字情況、多行、超過5行的情況，分別是什么樣式，需要設計并標注清楚。
4. 段落文字：多用于資料修改、文字發布等地，在設計時需要考慮未輸入情況、輸入文字情況、超出文字限制等情況。

參考鏈接

http://www.woshipm.com/ucd/392706.html/ 文本輸入框設計的那些潛規則，你知道多少？

作者：風箏，做個正能量的小太陽，不拖延，不偷懶，勵志為孩子做個好榜樣，公眾號：海鹽社。

本文由 @ 風箏KK 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議