如何排放表單標籤介紹的位置？

當涉及到表單的設計和開發，其中最熱門的話題之一就是表單標籤的位置。

表單標籤位置有多種不一樣的排版方案選擇，但不少文章關於這個問題只涉及到部分討論和分析。而在短期內，你應該如何選擇一個比較好、適合你的排版方案？

表單標籤位置的排版方案：

1. 標籤在字段上方；
2. 標籤在字段左側，而且左對齊；
3. 標籤在字段左側，而且右對齊；
4. 標籤在字段的裏面；
5. 標籤做爲提示文本出現；

下面咱們一塊兒把表單標籤位置的全部排版方案優勢和缺點一一列舉出來，經過對比各類方案來選擇最佳的方案。

 

一、標籤在字段上方

優勢：

• 在小範圍可視區域內，表單字段得到填寫焦點，表單標籤仍然可見。
• 用戶能夠一眼看到表單標籤和字段。
• 表單標籤能夠比字段更長。
• 適用於不一樣長度的標籤，有利於翻譯成其餘語言。
• 相對標籤在左側的排版，其寬度較窄。
• 標籤文本換行時容易閱讀，由於他們是左對齊。
• 標籤和相應的字段靠近，用戶很容易區分哪一個是哪一個。
• 標籤是可見的，即便用戶填寫字段，也能知道是什麼標籤。
• 在任什麼時候候，用戶都能把字段內容和標籤比較，覈實是否填錯內容。
• 排版佈局容易實現。
• 在HTML代碼結構中，並不須要使用多餘的佔位標籤，讓代碼容易維護。
• 用戶很清晰知道在哪裏輸入信息。
• 適用於各類類型的字段類型（如文本框，單選按鈕，多選按鈕或下拉菜單等）。
• 適用於手機、平板等觸摸界面。

缺點：

• 相對於標籤在左側的排版，高度是其兩倍。
• 整個表單標籤掃描比較困難，由於它們都被字段分隔開來。

 

二、標籤在字段左側，而且左對齊

優勢：

• 表單高度比第一種排版（標籤在字段上方）高度小。
• 標籤長度能夠比字段更長。
• 標籤容易掃描，由於它們沒有被字段分隔開來。
• 標籤是可見的，即便用戶填寫字段，也能知道是什麼標籤。
• 在任什麼時候候，用戶都能把字段內容和標籤比較，覈實是否填錯內容。
• 排版佈局容易實現。
• 在HTML代碼結構中，並不須要使用多餘的佔位標籤，讓代碼容易維護。
• 用戶很清晰知道在哪裏輸入信息。
• 適用於各類類型的字段類型（如文本框，單選按鈕，多選按鈕或下拉菜單等）。
• 適用於手機、平板等觸摸界面。

缺點：

• 在小範圍可視區域內，標籤佔有必定寬度，以致於字段寬度要相應縮減。
• 用戶不太可能一眼看到表單標籤和字段。
• 表單翻譯成其餘語言時，標籤可能會換行顯示。
• 標籤放在遠離其對應字段的位置時，它就很難辨別哪一個與哪一個（橫線斑馬條紋能夠在必定程度上解決這個問題）。

 

三、標籤在字段左側，而且右對齊

優勢：

• 表單高度比第一種排版（標籤在字段上方）高度小。
• 用戶能夠一眼看到表單標籤和字段。
• 標籤長度能夠比字段更長。
• 標籤容易掃描，由於它們沒有被字段分隔開來。
• 標籤靠近其相應的字段，因此很容易辨別哪一個與哪一個。
• 標籤是可見的，即便用戶填寫字段，也能知道是什麼標籤。
• 在任什麼時候候，用戶都能把字段內容和標籤比較，覈實是否填錯內容。
• 排版佈局容易實現。
• 在HTML代碼結構中，並不須要使用多餘的佔位標籤，讓代碼容易維護。
• 用戶很清晰知道在哪裏輸入信息。  
• 適用於各類類型的字段類型（如文本框，單選按鈕，多選按鈕或下拉菜單等）。
• 適用於手機、平板等觸摸界面。

缺點：

• 在小範圍可視區域內，標籤佔有必定寬度，以致於字段寬度要相應縮減。
• 表單翻譯成其餘語言時，標籤可能會換行顯示。
• 換行的長標籤較難閱讀，由於其左邊緣良莠不齊，使得用戶視線要不停地去尋找每行的開始。

 

四、標籤在字段裏面

優勢：

• 在小範圍可視區域內，表單字段得到填寫焦點，表單標籤仍然可見（即便是縮放）。
• 用戶能夠一眼看到表單標籤和字段。
• 表單寬度比第2、三種排版（標籤在字段左側）的寬度更窄。
• 標籤在其相應的字段裏面，因此很容易辨別哪一個與哪一個。
• 適用於手機、平板等觸摸界面。

缺點：

• 標籤長度必須小於字段長度。
• 表單被翻譯成其餘語言時，標籤可能會超出字段並換行顯示。
• 標籤較難掃描，由於它們是在字段裏面的。
• 不容許換行的長標籤，要不會在高度上超出字段的區域。
• 若是字段獲取焦點時標籤徹底消失，就須要用戶必須記住填寫字段對應的標籤是什麼。
• 若是字段獲取焦點時標籤徹底消失，用戶日後不能比較填寫的字段內容和對應的標籤。
• 若是字段獲取焦點時標籤沒有消失，該字段被填寫內容，用戶也很難辨別哪一個是內容和標籤。
• 排版佈局較難實現。
• 在HTML代碼結構中，須要使用多餘的佔位符標籤，減低表單的可訪問性。
• 這種排版看起來像字段已經被填寫內容，會讓用戶很難看到在哪裏輸入內容，於是出現錯誤次數較多。
• 只適用於文本框的字段類型。

 

五、標籤做爲提示文本出現

優勢：

• 能夠適應不一樣長度的標籤，方便表單翻譯成多語言。
• 用戶能夠一眼看到表單標籤和字段。
• 表單寬度比第2、三種排版（標籤在字段左側）的寬度更窄。
• 標籤在其相應的字段附近，因此很容易辨別哪一個與哪一個。

 

缺點：

• 非典型的排版設計，可能會混淆視聽，妨礙用戶操做。
• 在小範圍的可視區域內，表單字段得到填寫焦點時，標籤可能隱藏不可見。
• 用戶不太可能一眼看到表單標籤和字段。
• 表單被翻譯成其餘語言時，標籤可能再也不適合原來固定的尺寸。
• 標籤較難掃描，由於它們是隱藏不可見的。
• 一旦字段被填寫完，焦點離開字段，標籤就會徹底消失，這就要用戶必須記住填寫的是什麼標籤。
• 排版佈局較難實現。
• 下降了表單的可訪問性。
• 只適用於文本框的字段類型。
• 不適用於手機、平板等觸摸界面。

 

表單標籤位置的對比結果

即便你沒有詳細地查看以上排版方案的優缺點， 也能很明顯知道弊多於利的是：

• 標籤在字段的裏面；
• 標籤做爲提示文本出現；

所以，在大多數狀況下，上面兩種都是較很差的方案。相反，大多數狀況下能夠考慮使用如下方案：

• 標籤在字段上方；
• 標籤在字段左側，而且左對齊；
• 標籤在字段左側，而且右對齊；

若是非要在這三個方案之間選擇最佳方案，能夠參考下面使用場景：

一、填寫表格所在的可視區域比較小？
     小範圍的可視區域，標籤在字段上方是最佳選擇。

二、經過觸摸來訪問表單？
     避免使用標籤在字段裏面或做爲提示文本出現。

三、標籤長度比較短？
     標籤在字段左側是最佳選擇。

四、標籤長度比較長？
     能夠選擇標籤在字段上方或者左側，而且是左對齊。

五、表單會被翻譯成其餘語言？
     標籤在字段上方爲翻譯多語言提供了最大的靈活性。

六、表單有哪些類型的字段？
     若是表單不只僅有文本框字段，則不要選擇標籤在字段裏面和做爲提示文本出現。

七、哪一種比較容易實現和維護？
      標籤在字段上方花費的開發時間是最短的，其次是標籤在字段左側。

八、哪一種須要較高技術水平？
      標籤在字段裏面和做爲提示文本出現須要較專業的開發人員花費大量時間去實現。

 

表單標籤位置的一致性

一個表單

像界面設計中的其餘元素同樣，表單標籤排放位置的一致性會幫助用戶快速完成表單內容填寫而且可以減小錯誤發生。這是由於人的大腦有慣性思惟，當表單標籤排放位置保持一致性，大腦就會迅速學習在哪裏尋找標籤和其對應的字段。因此，儘可能保持每一個表單標籤排放位置的一致性！

多個表單

若是用戶遇到其餘多數的表單而不只僅是你設計的表單時，一致的可用性會在很大程度上幫助用戶去理解其餘的表單。這就意味着標籤的排放位置不只僅是在單個表單是最好的選擇，還要考慮和其餘表單保持一致性。

例如：在你當前填寫內容的表單中，標籤在字段上方是最佳的選擇。但其餘大多數的表單採用標籤在字段左側則是最佳的選擇。

 

總結

表單標籤位置是一個激烈爭論的話題，許多人快速的選用一種方法來彰顯他的實力。實際上，選擇那種方案須要細緻入微的判斷，可是這並不意味着要在全部場景下都使用一種方案。你應該根據當前表單的使用場景，對比各類表單標籤訂位的優勢、缺點，從而選擇該表單最佳的標籤訂位。

以上是我的收集並總結的表單標籤位置的優缺點，若是有錯誤或者沒有說到地方，歡迎在評論中留言。