家好，我是TJ

關注TJ君比較久的讀者應該知道，我是一名后端開發。對于前端知識是比較零碎的，所以很多時候寫表單這樣的工作，一般就是復制黏貼，然后改改字段。對于HTML格式，一直覺得比較雜亂，不夠簡潔。

最近TJ發現了一個有趣的小工具：Create HTML Form。

看看上面它的Slogan，是不是很有意思？居然可以通過Markdown來編寫HTML的表單？下面就來一起看看這款工具的能力。

下面是官方頁面給出的Markdown案例：

## Example Form

name*=___ 
Email=___[@] Enter Email
Password=___[*] ***

city={Boston, SFO -> San Francisco, (NYC -> New York City)}

size=() small (x) medium () large            

I agree to share my information with partners=___[checkbox]

Publish on my profile=___[switch]
User Number=___[1-10]
Phone Number*=___[r2002000000-9999999999]
Color=___[color]
Date=___[date]

Save=___[+]

通過上面的Markdown內容，將獲得如下圖所示的結果內容：

其中，左邊是表單的可視化結果，右邊是具體的HTML代碼（包括：pico.css、bootstrap、tailwindcss三種），根據自己需要選擇性的復制就用就可以了。怎么樣？是不是很有趣？

如果你覺得寫Markdown還麻煩，也可以通過官方給出的表單庫open in new window去找找是否有自己需要的，可以直接去復制黏貼：

好了，今天的分享就到這里。最后，奉上該站點地址：https://createhtmlform.com/open in new window，有需要的就沖吧

有下拉列表的表單

題目只能有30個字，不能寫全，其實今天我們要學習的內容有三個，第一，下拉列表表單，第二，多行文字輸入表單，第三，數據集表單。

開始學習吧！

前天和昨天我們在《HTML表單元素初識1——零基礎自學網頁制作》和《HTML表單元素初識2——零基礎自學網頁制作》中基本上把<input/>標簽的type屬性里不同的值進行了講解與實踐，今天我們來學習其他包含在<form></form>之間的元素。

帶有下拉列表的表單

我們在一些網站填寫注冊信息時，經常會遇到選擇"生活所在地"的操作，因為中國的地名是固定的，因此頁面會為我們提供一個下拉列表選項，我們直接點選即可，就不需要輸入文字了，這樣操作的好處在于不會出現拼寫錯誤。例如：

寫這個功能我們需要介紹一組新標簽<select></select>。"select"（選擇）。在這個標簽中再添加<option></option>。"option"（選項）。這樣就可以寫出帶有下拉列表的表單了，示例代碼如下：

<select><option></option></select>

這段代碼我們繼續在昨天的"表單.html"文件中添加即可，在<input type="image" src="img/示例圖片/submit.jpg"/><br>這段代碼之前即可！與這個圖片提交按鈕共用一個<form></form>標簽！

下面我們為多選表單添加名稱，示例代碼如下：

請選擇省份<select><option></option></select>

下面我們添加不同選項，示例代碼如下：

請選擇省份
  <select >
  <option >河北</option>
  <option >山東</option>
  <option >河南</option>
  <option >海南</option>
  <option >江蘇</option>
  <option >安徽</option>
  </select>
  <br><br>

為了規范起見，我們為表單信息添加name和value屬性，示例代碼如下：

請選擇省份
  <select name="province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan">河南</option>
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江蘇</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br>

大家要注意的是，在下拉列表表單中，name寫在<select>中，value寫在<option>中。

頁面效果如下：

這里告訴大家一個規律，下拉列表表單默認顯示第一個<option></option>中的文字內容。

如果您想改變這個默認顯示，請在需要顯示的<option>中添加selected屬性，并賦值為"selected"。

示例代碼如下：

請選擇省份
  <select name="province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan" selected="selected">河南</option>
 <!--選中這個選項--><option value="Hainan">海南</option><option value="Jiangsu">江蘇</option><option value="Anhui">安徽</option></select><br><br>

頁面效果如圖：

多行文字輸入表單

我們在西瓜視頻上發布視頻時會被要求填寫視頻描述，頁面中的輸入框不是像下圖這么短的單行輸入框。

而是多行輸入框，如圖：

使用<textarea></textarea>標簽即可添加這樣的輸入框，不過要設置row（列）和cols（行）屬性的數值。示例代碼如下：

<br>請簡要描述您的劇本的情節<br><textarea row="3" cols="20"></textarea><br>

這段代碼添加到</select><br><br>之后，與其共同使用一個<form></form>標簽。

下面我們為這個多行輸入框添加一些提示和限制。

首先，添加提示文字，和type="text"的<input/>標簽一樣，都是使用placeholder屬性。

第二，我們限制一下字數，使用maxlength（最大長度）屬性。

第三，在頁面加載完成后，直接讓光標停留在輸入框中，使用autofocus屬性。

下面看看如何寫吧，示例代碼如下：（不要忘記寫好name屬性！）

<br>
請簡要描述您的劇本的情節<br>
<textarea row="3" cols="20" name="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea><br>

頁面效果如圖：

如果刷新頁面不能正確顯示，請嘗試關閉后重新打開！

數據集表單

數據集表單實際上就是一個將不同選項或信息打包上傳的設置。

當一組表單元素放到 <fieldset> 標簽內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可創建一個子表單來處理這些元素。（W3school）

這個數據集有三個部分組成，首先是<fliedset></fliedset>,這個標簽不會顯示，只是告訴瀏覽器這里的數據要打包。

第二是<legend></legend>,"legend"(說明)，這里添加數據集名稱。

第三就是我們之前學到的那些標簽了。

示例代碼如下：

<fliedset> <legend>信息打包</legend> </fliedset>

下面我們使用這段代碼把form2打包一下吧。示例代碼如下：

<form>
  <fieldset><!--開始-->
  <legend>信息打包</legend><br>
  <!--標題-->興趣愛好：<br>
  <input type="checkbox" name="hobby" value="reading"/>讀書
  <input type="checkbox" name="hobby" value="film"/>電影
  <input type="checkbox" name="hobby" value="painting"/>繪畫
  <input type="checkbox" name="hobby" value="music"/>音樂
  <br>
  最高學歷：<br>
  <input type="radio" name="education" value="highSchool"/>高中
  <input type="radio" name="education" value="bachelor"/>本科
  <input type="radio" name="education" value="master"/>碩士
  <input type="radio" name="education" value="doctor"/>博士
  <br>
  請選擇省份
  <select name="province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan" selected="selected">河南</option><!--選中這個選項-->
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江蘇</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br><br>
  請簡要描述您的劇本的情節<br>
  <textarea row="3" cols="20" name="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea>
  <br>
  </fieldset><!--結尾-->
  <input type="image" src="img/示例圖片/submit.jpg"/><br>
  <input type="reset" /><br>
  <input type="submit" value="submit"/>
  </form>

頁面效果如下：

今天的內容結束了！

如果您喜歡我的教程請關注我，點贊也能讓我充滿動力！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

輯導語：在工作中我們時常會遇到一些關于表單優化的問題，雖然表單聽起來是比較簡單而常見的設計要素，但要想設計出簡潔直觀，清晰明了的表單還需要考慮更多的細節因素。本文總結了如何設計出簡單且包容的表單的一些技巧，希望對你有所啟發。

最近我的工作涉及一項艱巨的任務——如何為我的產品設計出體驗更好的表單。當我接到這個任務時，我根本不知道好的表單和壞的表單有什么區別。我需要思考：我應該設計一個多步驟的表單還是一個單頁的表單？我應該使用占位符嗎？如何使我的表單更符合包容性設計的原則呢?

幾乎每一個在網頁端發生的重要交互，從注冊登陸、購買產品服務到發起客戶幫助或者獲得反饋，都需要通過表單來完成。因此，雖然表單可能不是設計中最激動人心的設計元素，但學會如何設計一個好的表單是一項非常有價值的技能。

在學習了一些資料之后，我把我認為最好的最有效的表單設計進行了羅列。然而，我們需要記住的是：表單是一個高度依賴上下文的設計元素，所以在實際操作中是有例外的，設計師需要具體情況具體分析。在我們開始之前，讓我們快速的來回顧一下表單的五個主要元素：

• 結構：表單的布局以及表單項的順序
• 輸入框：文本框、單選或者是多選等界面元素
• 輸入框標簽：輸入框的相應提示文案
• 行動按鈕：用戶執行一個操作，比如提交他們的個人信息
• 反饋：讓用戶意識到自己的提交是否成功，反饋可以是視覺暗示也可以是聽覺暗示

一、讓表單盡量保持單列

多列表單容易讓人產生誤解：用戶非常容易忽略一些必填的內容，把信息填入錯誤的文本框或者完全放棄填寫表單。下面的圖片展示了用戶面對多列表單時視線是如何移動的。

當一個表單沒有提供清晰的填寫路徑時，用戶需要很長時間去理解它，更別說去完成它了。當一個表單的填寫路徑是線性的，比如說單列表單，用戶在完成時就不會存在誤解。

二、流程、順序和分組

1. 去掉所有非重要的輸入

確保只讓用戶輸入我們真正需要的內容。但是記住，你讓用戶輸入的信息越多，用戶就越不想填寫這個表單，因此，這會影響轉化率等因素并導致銷售損失。設計師需要明確讓用戶填寫這一條信息的目的是什么。在這里，我們可以使用一個叫做“問題協議”的系統方法，來確定表單的內容。

2. 用清晰的邏輯排列表單項

好的表單就是在正確的時間向用戶詢問正確的信息，否則它可能會讓用戶失去興趣。回憶一下我們自己線上購物的場景：如果網站需要你在購買東西之前就填寫付款信息，你會怎么想？或者必須在填寫名字之前填寫地址？因此，我們要嘗試從用戶的視角來思考如何建立表單的排列邏輯。

3. 將表單項分組

創建有邏輯的表單項分組幫助用戶更清晰的理解信息，這是因為用戶只能同時關注在一個群組上，而不是被無數雜亂的信息打亂。被分在一個組的信息代表著它們彼此之間是有關聯的，因此，如何在視覺上區分開不同的群組也是很重要的，比如在群組之間添加空白區域。

三、使用清晰有效的標簽

首先，標簽應該盡量使用頂部對齊，根據眼動測試研究，把標簽放在輸入框的上面而不是旁邊，會幫助用戶更快地理解信息。

從包容性設計的角度來看，標簽也非常重要。視力正常的用戶可以閱讀它們，視障用戶可以在屏幕閱讀器的幫助下聽到它們，運動障礙用戶可以在更大的點擊區域內使用它們。

四、避免使用占位符文本

因為占位符在 HTML 的規范中并不意味著是用戶一定要去閱讀的內容。占位符之所以被運用在表單中是因為它在用戶輸入信息的時候提供了額外的指導。但是問題在于這些文本是灰色的，低對比度的顏色使用戶很難去閱讀。在包容性設計的研究中發現，占位符經常被瀏覽器的自動翻譯功能或者一些屏幕閱讀器忽略掉，并不會翻譯或者閱讀它們。

所以我們為什么要使用占位符呢？使用占位符的原因是因為它們在視覺上節省了大量空間。但問題在于，當用戶點擊時，占位符會自動消失，所以用戶無法二次檢查他們是否在正確的輸入框中輸入了正確的內容。

一個通用的解決方法是使用懸浮的標簽，把標簽作為占位符使用。當用戶開始在一個表單項進行輸入的時候，標簽會懸浮在輸入框的上方，這種方式受到歡迎的原因是可以節省空間，總體而言，這是一種非常優雅、自然的模式。

然而，懸浮標簽的缺點多于優點。首先，缺少空間來設置提示文字，因為標簽和占位符是相同的。第二，標簽比較小，以及它較低的對比度讓用戶很難區分是占位符文字還是真實的數值，最后，在空間的節省上也不會特別多，因為標簽需要空間進行移動。

所以我們該如何做呢？我們可以把提示文字放在輸入框的上方，就像下圖中這樣。因此，屏幕閱讀器就不會跳過這些文字，同時它也提供了一個較大的點擊區域。

五、標注可選或者必填的輸入框

按照慣例，我們習慣用一個紅色的星號來代表必填表單項，但是如果你了解我在上文中提到的“問題協議”工具，那么大部分的表單項都是必須要填寫的。因此，幫用戶標注出可選的輸入框會更加方便有意義。當我們想讓一些元素脫穎而出時，我們會利用視覺設計來凸顯這個元素是不同的。

對于設計師來說，我們可以快速理解紅色星號的含義，但是總有人會對此表示疑惑。在標簽中加入“可選”的文字，會比用視覺符號更加清晰明確。

在包容性設計中有關于如何用紅色星號作為必填字段的建議：可以在表單中添加標記，以便讓屏幕閱讀器在閱讀時，說出“這是一個必填表單項”的語，進而幫助用戶理解。

六、 發生錯誤時，提供反饋

當用戶提交的內容出現錯誤，并且需要告知用戶時，在界面上需要有三個方面的呈現。

1. 網頁標題中顯示發生錯誤數量

在 html 網頁中，出現在瀏覽器標題欄的標題是用來定義網頁的名稱的，標題是當屏幕瀏覽器開始閱讀時第一個需要閱讀的部分，因此，在這里展現“用戶提交的信息有誤”能最有效最快捷得反饋給用戶。

這個解決方法需要用 javascript 來計算表單當中的錯誤并且體現出來，所以說這可能并不屬于一個設計師的職能范圍，你只需要確保將此功能告知開發人員。

2. 在表單開頭顯示錯誤提示總結

這種類型的錯誤反饋是更加清晰明確的。在表單上面顯示錯誤的總結，因此用戶就知道他具體需要修改哪部分的內容。

一個好的錯誤總結不僅僅有錯誤信息還包含了錯誤位置的鏈接。錯誤位置的鏈接讓用戶快速跳轉到表格中填寫錯誤的部分，而不是讓用戶先記住哪里發生了錯誤，再從頭閱讀一遍表單，從大量信息中取尋找他們的錯誤之處。

當然，當沒有錯誤出現時，錯誤總結模塊就需要被隱藏了。

3. 實時提醒錯誤

在一個理想的情況下，所有的錯誤提醒都是實時的，這意味著當用戶填寫完一個表單項（或不填寫）的時候，就會在表單項附近出現一個錯誤提示文本，這可以有效的減少用戶滑上滑下去尋找錯誤提示信息的時間。

最近也有一種趨勢，是將錯誤提示信息放在文本框的上方，這是因為一些自動填充功能也許會遮擋這些提示，手機上的鍵盤也會遮擋住這些關鍵信息，用戶很容易忽視掉。

對于稍微復雜一點的表單輸入，比如說輸入一個新的密碼。好的解決方案是用實時的提示來展示密碼的強弱程度，也就是說，在用戶正在輸入的時候，就可以實時展示出目前密碼的強弱程度。這將最有效地讓用戶知道他們是否滿足了這個表單的填寫要求。

七、行動按鈕

1. 在行動按鈕上使用動詞

CTA 行動按鈕應該使用描述性的語言而不是模糊的語言。動詞會幫助用戶理解接下來會發生什么。雖然行動按鈕上的描述應該是簡短的，但是也不能因此犧牲語言的清晰性。一定要使用讓每個人都理解的語言。

2. 主要按鈕與次要按鈕

主要按鈕和次要按鈕之間做明顯的視覺區分，主要是為了避免用戶按下錯誤的按鈕，視覺上的區別可以引向最預期的操作。

3. 行動按鈕的位置

一般情況下，提交按鈕最應該被放置在表單的底部，因為大多數用戶都會從上往下填寫表單然后提交表單。另外一個需要思考的點是按鈕對齊的位置是向左對齊，向右對齊還是居中對齊。我覺得更好的方案是向左對齊，因為表單中的標簽也是向左對齊的，所以當用戶將視線向下移動時，他們也會自然的看向這個位置。

在需要使用返回按鈕的表單中，比如多步驟表單，提交按鈕仍然應該向左對齊，然而返回按鈕應該被放置在表單的頂部，這樣可以幫助用戶區分主要按鈕（即提交按鈕）和次要按鈕（即返回按鈕），有助于用戶誤點擊返回按鈕。

八、如果內容復雜，可以使用多步驟表單

當表單中所填的內容可以被分類時，使用多步驟表單可以提升表單的可用性。讓一個較長的表單被分成幾個較短的表單可以幫助用戶更清晰得填寫表單。當表單中要填寫的信息較多時，最好使用多步驟表單。同時，也可以向用戶展示填寫的進度，這是提高用戶參與度的好方法。

進度指示器將表單內容分成多個有邏輯，有順序的步驟來向用戶展示當前的進度。這給用戶傳達了清晰的反饋，讓用戶知道他們已經完成了多少內容，以及多少內容還沒有完成。

然而，除非你很確定整個表單一共有幾個步驟，并且毫無偏差，不然不要用數字去標識，反而會引發更多得疑惑。

1. 盡早且頻繁地測試設計稿

最后，設計師需要證明每一個表單元素存在的必要性。表單對于用戶來說是乏味的，但是設計師的任務是讓表單變得盡可能的可用和易用。像其他設計一樣，表單也可以通過測試來不斷優化，所以說盡早測試，頻繁測試，讓測試的結果推動下一次的設計提升。

歡迎大家自由評論，點贊或者分享。

作者：Omar Andani；譯者：王英睿；審校：李澤慧、張聿彤；編輯：孫淑雅

原文鏈接：https://uxdesign.cc/8-ways-to-make-forms-more-user-friendly-50f3f22c708c

本文由@TCC翻譯情報局 翻譯發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。