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

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

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

標簽在字段上方;

標簽在字段左側，并且左對齊;

標簽在字段左側，并且右對齊;

標簽在字段的里面;

標簽作為提示文本出現;

下面我們一起把表單標簽位置的所有排版方案優點和缺點一一列舉出來，通過對比各種方案來選擇最佳的方案。

1、標簽在字段上方

優點：

在小范圍可視區域內，表單字段獲得填寫焦點，表單標簽仍然可見。

用戶可以一眼看到表單標簽和字段。

表單標簽可以比字段更長。

適用于不同長度的標簽，有利于翻譯成其他語言。

相對標簽在左側的排版，其寬度較窄。

標簽文本換行時容易閱讀，因為他們是左對齊。

標簽和相應的字段靠近，用戶很容易區分哪個是哪個。

標簽是可見的，即使用戶填寫字段，也能知道是什么標簽。

在任何時候，用戶都能把字段內容和標簽比較，核實是否填錯內容。

排版布局容易實現。

在HTML代碼結構中，并不需要使用多余的占位標簽，讓代碼容易維護。

用戶很清晰知道在哪里輸入信息。

適用于各種類型的字段類型(如文本框，單選按鈕，多選按鈕或下拉菜單等)。

適用于手機、平板等觸摸界面。

缺點：

相對于標簽在左側的排版，高度是其兩倍。

整個表單標簽掃描比較困難，因為它們都被字段分隔開來。

2、標簽在字段左側，并且左對齊

優點：

表單高度比第一種排版(標簽在字段上方)高度小。

標簽長度可以比字段更長。

標簽容易掃描，因為它們沒有被字段分隔開來。

標簽是可見的，即使用戶填寫字段，也能知道是什么標簽。

在任何時候，用戶都能把字段內容和標簽比較，核實是否填錯內容。

排版布局容易實現。

在HTML代碼結構中，并不需要使用多余的占位標簽，讓代碼容易維護。

用戶很清晰知道在哪里輸入信息。

適用于各種類型的字段類型(如文本框，單選按鈕，多選按鈕或下拉菜單等)。

適用于手機、平板等觸摸界面。

缺點：

在小范圍可視區域內，標簽占有一定寬度，以至于字段寬度要相應縮減。

用戶不太可能一眼看到表單標簽和字段。

表單翻譯成其他語言時，標簽可能會換行顯示。

標簽放在遠離其對應字段的位置時，它就很難辨別哪個與哪個(橫線斑馬條紋可以在一定程度上解決這個問題)。

3、標簽在字段左側，并且右對齊

優點：

表單高度比第一種排版(標簽在字段上方)高度小。

用戶可以一眼看到表單標簽和字段。

標簽長度可以比字段更長。

標簽容易掃描，因為它們沒有被字段分隔開來。

標簽靠近其相應的字段，所以很容易辨別哪個與哪個。

標簽是可見的，即使用戶填寫字段，也能知道是什么標簽。

在任何時候，用戶都能把字段內容和標簽比較，核實是否填錯內容。

排版布局容易實現。

在HTML代碼結構中，并不需要使用多余的占位標簽，讓代碼容易維護。

用戶很清晰知道在哪里輸入信息。

適用于各種類型的字段類型(如文本框，單選按鈕，多選按鈕或下拉菜單等)。

適用于手機、平板等觸摸界面。

缺點：

在小范圍可視區域內，標簽占有一定寬度，以至于字段寬度要相應縮減。

表單翻譯成其他語言時，標簽可能會換行顯示。

換行的長標簽較難閱讀，因為其左邊緣參差不齊，使得用戶視線要不停地去尋找每行的開始。

4、標簽在字段里面

優點：

在小范圍可視區域內，表單字段獲得填寫焦點，表單標簽仍然可見(即使是縮放)。

用戶可以一眼看到表單標簽和字段。

表單寬度比第二、三種排版(標簽在字段左側)的寬度更窄。

標簽在其相應的字段里面，所以很容易辨別哪個與哪個。

適用于手機、平板等觸摸界面。

缺點：

標簽長度必須小于字段長度。

表單被翻譯成其他語言時，標簽可能會超出字段并換行顯示。

標簽較難掃描，因為它們是在字段里面的。

不允許換行的長標簽，要不會在高度上超出字段的區域。

如果字段獲取焦點時標簽完全消失，就需要用戶必須記住填寫字段對應的標簽是什么。

如果字段獲取焦點時標簽完全消失，用戶往后不能比較填寫的字段內容和對應的標簽。

如果字段獲取焦點時標簽沒有消失，該字段被填寫內容，用戶也很難辨別哪個是內容和標簽。

排版布局較難實現。

在HTML代碼結構中，需要使用多余的占位符標簽，減低表單的可訪問性。

這種排版看起來像字段已經被填寫內容，會讓用戶很難看到在哪里輸入內容，因而出現錯誤次數較多。

只適用于文本框的字段類型。

5、標簽作為提示文本出現

優點：

可以適應不同長度的標簽，方便表單翻譯成多語言。

用戶可以一眼看到表單標簽和字段。

表單寬度比第二、三種排版(標簽在字段左側)的寬度更窄。

標簽在其相應的字段附近，所以很容易辨別哪個與哪個。

缺點：

非典型的排版設計，可能會混淆視聽，妨礙用戶操作。

在小范圍的可視區域內，表單字段獲得填寫焦點時，標簽可能隱藏不可見。

用戶不太可能一眼看到表單標簽和字段。

表單被翻譯成其他語言時，標簽可能不再適合原來固定的尺寸。

標簽較難掃描，因為它們是隱藏不可見的。

一旦字段被填寫完，焦點離開字段，標簽就會完全消失，這就要用戶必須記住填寫的是什么標簽。

排版布局較難實現。

降低了表單的可訪問性。

只適用于文本框的字段類型。

不適用于手機、平板等觸摸界面。

表單標簽位置的對比結果

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

標簽在字段的里面;

標簽作為提示文本出現;

因此，在大多數情況下，上面兩種都是較不好的方案。相反，大多數情況下可以考慮使用以下方案：

標簽在字段上方;

標簽在字段左側，并且左對齊;

標簽在字段左側，并且右對齊;

如果非要在這三個方案之間選擇最佳方案，可以參考下面使用場景：

1、填寫表格所在的可視區域比較小?

小范圍的可視區域，標簽在字段上方是最佳選擇。

2、通過觸摸來訪問表單?

避免使用標簽在字段里面或作為提示文本出現。

3、標簽長度比較短?

標簽在字段左側是最佳選擇。

4、標簽長度比較長?

可以選擇標簽在字段上方或者左側，并且是左對齊。

5、表單會被翻譯成其他語言?

標簽在字段上方為翻譯多語言提供了最大的靈活性。

6、表單有哪些類型的字段?

如果表單不僅僅有文本框字段，則不要選擇標簽在字段里面和作為提示文本出現。

7、哪種比較容易實現和維護?

標簽在字段上方花費的開發時間是最短的，其次是標簽在字段左側。

8、哪種需要較高技術水平?

標簽在字段里面和作為提示文本出現需要較專業的開發人員花費大量時間去實現。

表單標簽位置的一致性

一個表單

像界面設計中的其他元素一樣，表單標簽排放位置的一致性會幫助用戶快速完成表單內容填寫并且能夠減少錯誤發生。這是因為人的大腦有慣性思維，當表單標簽排放位置保持一致性，大腦就會迅速學習在哪里尋找標簽和其對應的字段。所以，盡量保持每個表單標簽排放位置的一致性!

多個表單

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

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

總結

表單標簽位置是一個激烈爭論的話題，許多人快速的選用一種方法來彰顯他的實力。實際上，選擇那種方案需要細致入微的判斷，但是這并不意味著要在所有場景下都使用一種方案。你應該根據當前表單的使用場景，對比各種表單標簽定位的優點、缺點，從而選擇該表單最佳的標簽定位。