整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
輯導語：在工作中我們時常會遇到一些關于表單優化的問題，雖然表單聽起來是比較簡單而常見的設計要素，但要想設計出簡潔直觀，清晰明了的表單還需要考慮更多的細節因素。本文總結了如何設計出簡單且包容的表單的一些技巧，希望對你有所啟發。
最近我的工作涉及一項艱巨的任務——如何為我的產品設計出體驗更好的表單。當我接到這個任務時，我根本不知道好的表單和壞的表單有什么區別。我需要思考：我應該設計一個多步驟的表單還是一個單頁的表單？我應該使用占位符嗎？如何使我的表單更符合包容性設計的原則呢?
幾乎每一個在網頁端發生的重要交互，從注冊登陸、購買產品服務到發起客戶幫助或者獲得反饋，都需要通過表單來完成。因此，雖然表單可能不是設計中最激動人心的設計元素，但學會如何設計一個好的表單是一項非常有價值的技能。
在學習了一些資料之后，我把我認為最好的最有效的表單設計進行了羅列。然而，我們需要記住的是：表單是一個高度依賴上下文的設計元素，所以在實際操作中是有例外的，設計師需要具體情況具體分析。在我們開始之前，讓我們快速的來回顧一下表單的五個主要元素：
多列表單容易讓人產生誤解：用戶非常容易忽略一些必填的內容，把信息填入錯誤的文本框或者完全放棄填寫表單。下面的圖片展示了用戶面對多列表單時視線是如何移動的。
當一個表單沒有提供清晰的填寫路徑時，用戶需要很長時間去理解它，更別說去完成它了。當一個表單的填寫路徑是線性的，比如說單列表單，用戶在完成時就不會存在誤解。
確保只讓用戶輸入我們真正需要的內容。但是記住，你讓用戶輸入的信息越多，用戶就越不想填寫這個表單，因此，這會影響轉化率等因素并導致銷售損失。設計師需要明確讓用戶填寫這一條信息的目的是什么。在這里，我們可以使用一個叫做“問題協議”的系統方法，來確定表單的內容。
好的表單就是在正確的時間向用戶詢問正確的信息，否則它可能會讓用戶失去興趣。回憶一下我們自己線上購物的場景：如果網站需要你在購買東西之前就填寫付款信息，你會怎么想？或者必須在填寫名字之前填寫地址？因此，我們要嘗試從用戶的視角來思考如何建立表單的排列邏輯。
創建有邏輯的表單項分組幫助用戶更清晰的理解信息，這是因為用戶只能同時關注在一個群組上，而不是被無數雜亂的信息打亂。被分在一個組的信息代表著它們彼此之間是有關聯的，因此，如何在視覺上區分開不同的群組也是很重要的，比如在群組之間添加空白區域。
首先，標簽應該盡量使用頂部對齊，根據眼動測試研究，把標簽放在輸入框的上面而不是旁邊，會幫助用戶更快地理解信息。
從包容性設計的角度來看，標簽也非常重要。視力正常的用戶可以閱讀它們，視障用戶可以在屏幕閱讀器的幫助下聽到它們，運動障礙用戶可以在更大的點擊區域內使用它們。
因為占位符在 HTML 的規范中并不意味著是用戶一定要去閱讀的內容。占位符之所以被運用在表單中是因為它在用戶輸入信息的時候提供了額外的指導。但是問題在于這些文本是灰色的，低對比度的顏色使用戶很難去閱讀。在包容性設計的研究中發現，占位符經常被瀏覽器的自動翻譯功能或者一些屏幕閱讀器忽略掉，并不會翻譯或者閱讀它們。
所以我們為什么要使用占位符呢？使用占位符的原因是因為它們在視覺上節省了大量空間。但問題在于，當用戶點擊時，占位符會自動消失，所以用戶無法二次檢查他們是否在正確的輸入框中輸入了正確的內容。
一個通用的解決方法是使用懸浮的標簽，把標簽作為占位符使用。當用戶開始在一個表單項進行輸入的時候，標簽會懸浮在輸入框的上方，這種方式受到歡迎的原因是可以節省空間，總體而言，這是一種非常優雅、自然的模式。
然而，懸浮標簽的缺點多于優點。首先，缺少空間來設置提示文字，因為標簽和占位符是相同的。第二，標簽比較小，以及它較低的對比度讓用戶很難區分是占位符文字還是真實的數值，最后，在空間的節省上也不會特別多，因為標簽需要空間進行移動。
所以我們該如何做呢？我們可以把提示文字放在輸入框的上方，就像下圖中這樣。因此，屏幕閱讀器就不會跳過這些文字，同時它也提供了一個較大的點擊區域。
按照慣例，我們習慣用一個紅色的星號來代表必填表單項，但是如果你了解我在上文中提到的“問題協議”工具，那么大部分的表單項都是必須要填寫的。因此，幫用戶標注出可選的輸入框會更加方便有意義。當我們想讓一些元素脫穎而出時，我們會利用視覺設計來凸顯這個元素是不同的。
對于設計師來說，我們可以快速理解紅色星號的含義，但是總有人會對此表示疑惑。在標簽中加入“可選”的文字，會比用視覺符號更加清晰明確。
在包容性設計中有關于如何用紅色星號作為必填字段的建議：可以在表單中添加標記，以便讓屏幕閱讀器在閱讀時，說出“這是一個必填表單項”的語，進而幫助用戶理解。
當用戶提交的內容出現錯誤，并且需要告知用戶時，在界面上需要有三個方面的呈現。
在 html 網頁中，出現在瀏覽器標題欄的標題是用來定義網頁的名稱的，標題是當屏幕瀏覽器開始閱讀時第一個需要閱讀的部分，因此，在這里展現“用戶提交的信息有誤”能最有效最快捷得反饋給用戶。
這個解決方法需要用 javascript 來計算表單當中的錯誤并且體現出來，所以說這可能并不屬于一個設計師的職能范圍，你只需要確保將此功能告知開發人員。
這種類型的錯誤反饋是更加清晰明確的。在表單上面顯示錯誤的總結，因此用戶就知道他具體需要修改哪部分的內容。
一個好的錯誤總結不僅僅有錯誤信息還包含了錯誤位置的鏈接。錯誤位置的鏈接讓用戶快速跳轉到表格中填寫錯誤的部分，而不是讓用戶先記住哪里發生了錯誤，再從頭閱讀一遍表單，從大量信息中取尋找他們的錯誤之處。
當然，當沒有錯誤出現時，錯誤總結模塊就需要被隱藏了。
在一個理想的情況下，所有的錯誤提醒都是實時的，這意味著當用戶填寫完一個表單項（或不填寫）的時候，就會在表單項附近出現一個錯誤提示文本，這可以有效的減少用戶滑上滑下去尋找錯誤提示信息的時間。
最近也有一種趨勢，是將錯誤提示信息放在文本框的上方，這是因為一些自動填充功能也許會遮擋這些提示，手機上的鍵盤也會遮擋住這些關鍵信息，用戶很容易忽視掉。
對于稍微復雜一點的表單輸入，比如說輸入一個新的密碼。好的解決方案是用實時的提示來展示密碼的強弱程度，也就是說，在用戶正在輸入的時候，就可以實時展示出目前密碼的強弱程度。這將最有效地讓用戶知道他們是否滿足了這個表單的填寫要求。
CTA 行動按鈕應該使用描述性的語言而不是模糊的語言。動詞會幫助用戶理解接下來會發生什么。雖然行動按鈕上的描述應該是簡短的，但是也不能因此犧牲語言的清晰性。一定要使用讓每個人都理解的語言。
主要按鈕和次要按鈕之間做明顯的視覺區分，主要是為了避免用戶按下錯誤的按鈕，視覺上的區別可以引向最預期的操作。
一般情況下，提交按鈕最應該被放置在表單的底部，因為大多數用戶都會從上往下填寫表單然后提交表單。另外一個需要思考的點是按鈕對齊的位置是向左對齊，向右對齊還是居中對齊。我覺得更好的方案是向左對齊，因為表單中的標簽也是向左對齊的，所以當用戶將視線向下移動時，他們也會自然的看向這個位置。
在需要使用返回按鈕的表單中，比如多步驟表單，提交按鈕仍然應該向左對齊，然而返回按鈕應該被放置在表單的頂部，這樣可以幫助用戶區分主要按鈕（即提交按鈕）和次要按鈕（即返回按鈕），有助于用戶誤點擊返回按鈕。
當表單中所填的內容可以被分類時，使用多步驟表單可以提升表單的可用性。讓一個較長的表單被分成幾個較短的表單可以幫助用戶更清晰得填寫表單。當表單中要填寫的信息較多時，最好使用多步驟表單。同時，也可以向用戶展示填寫的進度，這是提高用戶參與度的好方法。
進度指示器將表單內容分成多個有邏輯，有順序的步驟來向用戶展示當前的進度。這給用戶傳達了清晰的反饋，讓用戶知道他們已經完成了多少內容，以及多少內容還沒有完成。
然而，除非你很確定整個表單一共有幾個步驟，并且毫無偏差，不然不要用數字去標識，反而會引發更多得疑惑。
最后，設計師需要證明每一個表單元素存在的必要性。表單對于用戶來說是乏味的，但是設計師的任務是讓表單變得盡可能的可用和易用。像其他設計一樣，表單也可以通過測試來不斷優化，所以說盡早測試，頻繁測試，讓測試的結果推動下一次的設計提升。
歡迎大家自由評論，點贊或者分享。
作者：Omar Andani；譯者：王英睿；審校：李澤慧、張聿彤；編輯：孫淑雅
原文鏈接：https://uxdesign.cc/8-ways-to-make-forms-more-user-friendly-50f3f22c708c
本文由@TCC翻譯情報局 翻譯發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議。
現代web開發中，表單是用戶與網站互動的重要方式之一。HTML5為表單提交提供了強大的功能和豐富的輸入類型，讓收集和驗證用戶輸入數據變得更加容易和安全。本文將詳細介紹HTML5表單的各個方面，包括基本結構、輸入類型、驗證方法和提交過程。
HTML表單由<form>標簽定義，它可以包含輸入字段、標簽、按鈕等元素。一個基本的表單結構如下所示：
<form action="/submit_form" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="email">電子郵箱：</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="提交">
</form>
在這個例子中，表單有兩個輸入字段：姓名和電子郵箱。每個輸入字段都有一個<label>標簽，這不僅有助于用戶理解輸入的內容，也有助于屏幕閱讀器等輔助技術。<form>標簽的action屬性定義了數據提交到服務器的URL，method屬性定義了提交數據的HTTP方法（通常是post或get）。
HTML5提供了多種輸入類型，以支持不同的數據格式和設備。
<!-- 單行文本 -->
<input type="text" name="username" placeholder="請輸入用戶名" required>
<!-- 密碼 -->
<input type="password" name="password" required minlength="8">
<!-- 郵箱 -->
<input type="email" name="email" required placeholder="example@domain.com">
<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索...">
<!-- 數值 -->
<input type="number" name="age" min="18" max="100" step="1" required>
<!-- 滑動條 -->
<input type="range" name="volume" min="0" max="100" step="1">
<!-- 電話號碼 -->
<input type="tel" name="phone" pattern="^\+?\d{0,13}" placeholder="+8613800000000">
<!-- 日期 -->
<input type="date" name="birthdate" required>
<!-- 時間 -->
<input type="time" name="appointmenttime">
<!-- 日期和時間 -->
<input type="datetime-local" name="appointmentdatetime">
<!-- 復選框 -->
<label><input type="checkbox" name="interest" value="coding"> 編程</label>
<label><input type="checkbox" name="interest" value="music"> 音樂</label>
<!-- 單選按鈕 -->
<label><input type="radio" name="gender" value="male" required> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>
<!-- 下拉選擇 -->
<select name="country" required>
<option value="china">中國</option>
<option value="usa">美國</option>
</select>
<!-- 顏色選擇器 -->
<input type="color" name="favcolor" value="#ff0000">
<!-- 文件上傳 -->
<input type="file" name="resume" accept=".pdf,.docx" multiple>
HTML5表單提供了內置的驗證功能，可以在數據提交到服務器之前進行檢查。
<input type="text" name="username" required>
<input type="text" name="zipcode" pattern="\d{5}(-\d{4})?" title="請輸入5位數的郵政編碼">
<input type="number" name="age" min="18" max="99">
<input type="text" name="username" minlength="4" maxlength="8">
當用戶填寫完表單并點擊提交按鈕時，瀏覽器會自動檢查所有輸入字段的有效性。如果所有字段都滿足要求，表單數據將被發送到服務器。否則，瀏覽器會顯示錯誤信息，并阻止表單提交。
<input type="submit" value="提交">
可以使用JavaScript來自定義驗證或處理提交事件：
document.querySelector('form').addEventListener('submit', function(event) {
// 檢查表單數據
if (!this.checkValidity()) {
event.preventDefault(); // 阻止表單提交
// 自定義錯誤處理
}
// 可以在這里添加額外的邏輯，比如發送數據到服務器的Ajax請求
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單提交并顯示JSON</title>
</head>
<body>
<!-- 表單定義 -->
<form id="myForm">
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<br>
<label for="email">電子郵件：</label>
<input type="email" id="email" name="email">
<br>
<input type="button" value="提交" onclick="submitForm()">
</form>
<script>
// JavaScript函數，處理表單提交
function submitForm() {
// 獲取表單元素
var form = document.getElementById('myForm');
// 創建一個FormData對象
var formData = new FormData(form);
// 創建一個空對象來存儲表單數據
var formObject = {};
// 將FormData轉換為普通對象
formData.forEach(function(value, key){
formObject[key] = value;
});
// 將對象轉換為JSON字符串
var jsonString = JSON.stringify(formObject);
// 彈出包含JSON字符串的對話框
alert(jsonString);
// 阻止表單的默認提交行為
return false;
}
</script>
</body>
</html>
在這個例子中：
注意，這個例子中我們使用了type="button"而不是type="submit"，因為我們不希望表單有默認的提交行為。我們的JavaScript函數submitForm會處理所有的邏輯，并且通過返回false來阻止默認的表單提交。如果你想要使用type="submit"，你需要在<form>標簽上添加一個onsubmit="return submitForm()"屬性來代替按鈕上的onclick事件。
HTML5的表單功能為開發者提供了強大的工具，以便創建功能豐富、用戶友好且安全的網站。通過使用HTML5的輸入類型和驗證方法，可以確保用戶輸入的數據是有效的，同時提高用戶體驗。隨著技術的不斷進步，HTML5表單和相關API將繼續發展，為前端工程師提供更多的可能性。
、表單在網頁中的應用：登錄、注冊常用到表單
2、表單的語法：
<form method="post" action="result.html">
<p> 名字：<input name="name" type="text" > </p>
<p> 密碼：<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>
3、表單元素說明：
type:指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默認為 text.
name:指定表單元素的名稱.
value:元素的初始值。type 為 radio時必須指定一個值.
size:指定表單元素的初始寬度。當 type 為 text 或 password時，表單元素的大小以字符為單位。對于其他類型，寬度以像素為單位.
maxlength:type為text 或 password 時，輸入的最大字符數.
checked:type為radio或checkbox時，指定按鈕是否是被選中.
4、示例：
<html >
<head>
<title>表單元素</title>
</head>
<body>
<!-- 表單 -->
<form method="POST" action="#">
<!-- 標簽 -->
<label for="username">姓名：</label>
<!-- 文本框 value屬性是設置默認顯示的值-->
<input id="username" value="songzetong" />
<!-- 密碼框 -->
<br/><label for="pwd">密碼：</label>
<input type="password" id="pwd">
<br/>
<!-- 單選框 -->
<label for="sex">性別：</label>
<input type ="radio" name ="sex" checked/>男
<input type ="radio" name ="sex"/>女
<!-- 復選框 -->
<br/>
<label for="hobby">愛好：</label>
<input type="checkbox" name ="hobby" id="hobby"/>聽音樂
<input type="checkbox" name ="hobby"/>旅游
<input type="checkbox" name ="hobby"/>游泳
<br/>
<!-- 下拉列表 -->
<label for="month">月份：</label>
<select id="month"/>
<option>1月</option>
<option>2月</option>
<option>3月</option>
</select>
<br/>
<!-- 按鈕 -->
<input type="reset" value="重置按鈕"/>
<input type="submit" value="提交按鈕"/>
<input type="button" value="普通按鈕"/>
<br/>
<!-- 圖片按鈕 -->
<input type="image" src="one.jpg" width="200px" heigth="200px"/>
<br/>
<button type="submit">提交</button>
<button type="reset">重置</button>
<br/>
<label for="profile">
個人簡介：
</label>
<!-- 多行文本域 -->
<textarea >本人已同意什么條款</textarea>
<br/>
<br/>
<br/>
<!-- 文件域 -->
<label for="upload">上傳頭像:</label>
<input type="file"/>
<!-- 郵箱 -->
<br/>
<label for="QQ郵箱">郵箱：</label>
<input type="email"/>
<br/>
<!-- 網址 -->
<label for="ur">網址：</label>
<input type="url"/>
<!-- 數字 -->
<br/>
<label for="shuzi">數字：</label>
<input type="number" name="shuzi" min="0" max="100" step="10"/>
<br/>
<label for="huakuai">滑塊：</label>
<input type="range" />
<!-- 搜索框 -->
<br/>
<label for="sousuo">搜索</label>
<input type="search"/>
<!-- 隱藏域 -->
<br/>
<input type="hidden"value="1">
<!-- 只讀：只能看不能修改，禁用：不能用 -->
<input value="我是只讀的" readonly/>
<input type="button" value="我是禁用的" disabled/>
<!-- palceholder默認提示 -->
<br/>
<input placeholder="默認提示框"/>
<br/>
<!-- 文本框內容提示不能為空，否則不允許用戶提交表單（網頁上的必填項） -->
<input required="必填項"/>
<button type="submit">提交</button>
<br/>
<!-- 用戶輸入的內容必須符合正則表達式所指的規則，否則就不能提交表單-->
<input required pattern="^1[3578]\d{9}"/>
<button type="submit">提交</button>
</form>
</body>
</html>
效果圖鏈接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlThree/form.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
