8個(gè)簡(jiǎn)單且包容的表單設(shè)計(jì)技巧請(qǐng)查收

輯導(dǎo)語：在工作中我們時(shí)常會(huì)遇到一些關(guān)于表單優(yōu)化的問題，雖然表單聽起來是比較簡(jiǎn)單而常見的設(shè)計(jì)要素，但要想設(shè)計(jì)出簡(jiǎn)潔直觀，清晰明了的表單還需要考慮更多的細(xì)節(jié)因素。本文總結(jié)了如何設(shè)計(jì)出簡(jiǎn)單且包容的表單的一些技巧，希望對(duì)你有所啟發(fā)。

最近我的工作涉及一項(xiàng)艱巨的任務(wù)——如何為我的產(chǎn)品設(shè)計(jì)出體驗(yàn)更好的表單。當(dāng)我接到這個(gè)任務(wù)時(shí)，我根本不知道好的表單和壞的表單有什么區(qū)別。我需要思考：我應(yīng)該設(shè)計(jì)一個(gè)多步驟的表單還是一個(gè)單頁的表單？我應(yīng)該使用占位符嗎？如何使我的表單更符合包容性設(shè)計(jì)的原則呢?

幾乎每一個(gè)在網(wǎng)頁端發(fā)生的重要交互，從注冊(cè)登陸、購買產(chǎn)品服務(wù)到發(fā)起客戶幫助或者獲得反饋，都需要通過表單來完成。因此，雖然表單可能不是設(shè)計(jì)中最激動(dòng)人心的設(shè)計(jì)元素，但學(xué)會(huì)如何設(shè)計(jì)一個(gè)好的表單是一項(xiàng)非常有價(jià)值的技能。

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

結(jié)構(gòu)：表單的布局以及表單項(xiàng)的順序
輸入框：文本框、單選或者是多選等界面元素
輸入框標(biāo)簽：輸入框的相應(yīng)提示文案
行動(dòng)按鈕：用戶執(zhí)行一個(gè)操作，比如提交他們的個(gè)人信息
反饋：讓用戶意識(shí)到自己的提交是否成功，反饋可以是視覺暗示也可以是聽覺暗示

一、讓表單盡量保持單列

多列表單容易讓人產(chǎn)生誤解：用戶非常容易忽略一些必填的內(nèi)容，把信息填入錯(cuò)誤的文本框或者完全放棄填寫表單。下面的圖片展示了用戶面對(duì)多列表單時(shí)視線是如何移動(dòng)的。

當(dāng)一個(gè)表單沒有提供清晰的填寫路徑時(shí)，用戶需要很長(zhǎng)時(shí)間去理解它，更別說去完成它了。當(dāng)一個(gè)表單的填寫路徑是線性的，比如說單列表單，用戶在完成時(shí)就不會(huì)存在誤解。

二、流程、順序和分組

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

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

2. 用清晰的邏輯排列表單項(xiàng)

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

3. 將表單項(xiàng)分組

創(chuàng)建有邏輯的表單項(xiàng)分組幫助用戶更清晰的理解信息，這是因?yàn)橛脩糁荒芡瑫r(shí)關(guān)注在一個(gè)群組上，而不是被無數(shù)雜亂的信息打亂。被分在一個(gè)組的信息代表著它們彼此之間是有關(guān)聯(lián)的，因此，如何在視覺上區(qū)分開不同的群組也是很重要的，比如在群組之間添加空白區(qū)域。

三、使用清晰有效的標(biāo)簽

首先，標(biāo)簽應(yīng)該盡量使用頂部對(duì)齊，根據(jù)眼動(dòng)測(cè)試研究，把標(biāo)簽放在輸入框的上面而不是旁邊，會(huì)幫助用戶更快地理解信息。

從包容性設(shè)計(jì)的角度來看，標(biāo)簽也非常重要。視力正常的用戶可以閱讀它們，視障用戶可以在屏幕閱讀器的幫助下聽到它們，運(yùn)動(dòng)障礙用戶可以在更大的點(diǎn)擊區(qū)域內(nèi)使用它們。

四、避免使用占位符文本

因?yàn)檎嘉环?HTML 的規(guī)范中并不意味著是用戶一定要去閱讀的內(nèi)容。占位符之所以被運(yùn)用在表單中是因?yàn)樗谟脩糨斎胄畔⒌臅r(shí)候提供了額外的指導(dǎo)。但是問題在于這些文本是灰色的，低對(duì)比度的顏色使用戶很難去閱讀。在包容性設(shè)計(jì)的研究中發(fā)現(xiàn)，占位符經(jīng)常被瀏覽器的自動(dòng)翻譯功能或者一些屏幕閱讀器忽略掉，并不會(huì)翻譯或者閱讀它們。

所以我們?yōu)槭裁匆褂谜嘉环兀?strong>使用占位符的原因是因?yàn)樗鼈冊(cè)谝曈X上節(jié)省了大量空間。但問題在于，當(dāng)用戶點(diǎn)擊時(shí)，占位符會(huì)自動(dòng)消失，所以用戶無法二次檢查他們是否在正確的輸入框中輸入了正確的內(nèi)容。

一個(gè)通用的解決方法是使用懸浮的標(biāo)簽，把標(biāo)簽作為占位符使用。當(dāng)用戶開始在一個(gè)表單項(xiàng)進(jìn)行輸入的時(shí)候，標(biāo)簽會(huì)懸浮在輸入框的上方，這種方式受到歡迎的原因是可以節(jié)省空間，總體而言，這是一種非常優(yōu)雅、自然的模式。

然而，懸浮標(biāo)簽的缺點(diǎn)多于優(yōu)點(diǎn)。首先，缺少空間來設(shè)置提示文字，因?yàn)闃?biāo)簽和占位符是相同的。第二，標(biāo)簽比較小，以及它較低的對(duì)比度讓用戶很難區(qū)分是占位符文字還是真實(shí)的數(shù)值，最后，在空間的節(jié)省上也不會(huì)特別多，因?yàn)闃?biāo)簽需要空間進(jìn)行移動(dòng)。

所以我們?cè)撊绾巫瞿兀课覀兛梢园烟崾疚淖址旁谳斎肟虻纳戏?，就像下圖中這樣。因此，屏幕閱讀器就不會(huì)跳過這些文字，同時(shí)它也提供了一個(gè)較大的點(diǎn)擊區(qū)域。

五、標(biāo)注可選或者必填的輸入框

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

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

在包容性設(shè)計(jì)中有關(guān)于如何用紅色星號(hào)作為必填字段的建議：可以在表單中添加標(biāo)記，以便讓屏幕閱讀器在閱讀時(shí)，說出“這是一個(gè)必填表單項(xiàng)”的語，進(jìn)而幫助用戶理解。

六、發(fā)生錯(cuò)誤時(shí)，提供反饋

當(dāng)用戶提交的內(nèi)容出現(xiàn)錯(cuò)誤，并且需要告知用戶時(shí)，在界面上需要有三個(gè)方面的呈現(xiàn)。

1. 網(wǎng)頁標(biāo)題中顯示發(fā)生錯(cuò)誤數(shù)量

在 html 網(wǎng)頁中，出現(xiàn)在瀏覽器標(biāo)題欄的標(biāo)題是用來定義網(wǎng)頁的名稱的，標(biāo)題是當(dāng)屏幕瀏覽器開始閱讀時(shí)第一個(gè)需要閱讀的部分，因此，在這里展現(xiàn)“用戶提交的信息有誤”能最有效最快捷得反饋給用戶。

這個(gè)解決方法需要用 javascript 來計(jì)算表單當(dāng)中的錯(cuò)誤并且體現(xiàn)出來，所以說這可能并不屬于一個(gè)設(shè)計(jì)師的職能范圍，你只需要確保將此功能告知開發(fā)人員。

2. 在表單開頭顯示錯(cuò)誤提示總結(jié)

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

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

當(dāng)然，當(dāng)沒有錯(cuò)誤出現(xiàn)時(shí)，錯(cuò)誤總結(jié)模塊就需要被隱藏了。

3. 實(shí)時(shí)提醒錯(cuò)誤

在一個(gè)理想的情況下，所有的錯(cuò)誤提醒都是實(shí)時(shí)的，這意味著當(dāng)用戶填寫完一個(gè)表單項(xiàng)（或不填寫）的時(shí)候，就會(huì)在表單項(xiàng)附近出現(xiàn)一個(gè)錯(cuò)誤提示文本，這可以有效的減少用戶滑上滑下去尋找錯(cuò)誤提示信息的時(shí)間。

最近也有一種趨勢(shì)，是將錯(cuò)誤提示信息放在文本框的上方，這是因?yàn)橐恍┳詣?dòng)填充功能也許會(huì)遮擋這些提示，手機(jī)上的鍵盤也會(huì)遮擋住這些關(guān)鍵信息，用戶很容易忽視掉。

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

七、行動(dòng)按鈕

1. 在行動(dòng)按鈕上使用動(dòng)詞

CTA 行動(dòng)按鈕應(yīng)該使用描述性的語言而不是模糊的語言。動(dòng)詞會(huì)幫助用戶理解接下來會(huì)發(fā)生什么。雖然行動(dòng)按鈕上的描述應(yīng)該是簡(jiǎn)短的，但是也不能因此犧牲語言的清晰性。一定要使用讓每個(gè)人都理解的語言。

2. 主要按鈕與次要按鈕

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

3. 行動(dòng)按鈕的位置

一般情況下，提交按鈕最應(yīng)該被放置在表單的底部，因?yàn)榇蠖鄶?shù)用戶都會(huì)從上往下填寫表單然后提交表單。另外一個(gè)需要思考的點(diǎn)是按鈕對(duì)齊的位置是向左對(duì)齊，向右對(duì)齊還是居中對(duì)齊。我覺得更好的方案是向左對(duì)齊，因?yàn)楸韱沃械臉?biāo)簽也是向左對(duì)齊的，所以當(dāng)用戶將視線向下移動(dòng)時(shí)，他們也會(huì)自然的看向這個(gè)位置。

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

八、如果內(nèi)容復(fù)雜，可以使用多步驟表單

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

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

然而，除非你很確定整個(gè)表單一共有幾個(gè)步驟，并且毫無偏差，不然不要用數(shù)字去標(biāo)識(shí)，反而會(huì)引發(fā)更多得疑惑。

1. 盡早且頻繁地測(cè)試設(shè)計(jì)稿

最后，設(shè)計(jì)師需要證明每一個(gè)表單元素存在的必要性。表單對(duì)于用戶來說是乏味的，但是設(shè)計(jì)師的任務(wù)是讓表單變得盡可能的可用和易用。像其他設(shè)計(jì)一樣，表單也可以通過測(cè)試來不斷優(yōu)化，所以說盡早測(cè)試，頻繁測(cè)試，讓測(cè)試的結(jié)果推動(dòng)下一次的設(shè)計(jì)提升。

歡迎大家自由評(píng)論，點(diǎn)贊或者分享。

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

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

本文由@TCC翻譯情報(bào)局翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。

現(xiàn)代web開發(fā)中，表單是用戶與網(wǎng)站互動(dòng)的重要方式之一。HTML5為表單提交提供了強(qiáng)大的功能和豐富的輸入類型，讓收集和驗(yàn)證用戶輸入數(shù)據(jù)變得更加容易和安全。本文將詳細(xì)介紹HTML5表單的各個(gè)方面，包括基本結(jié)構(gòu)、輸入類型、驗(yàn)證方法和提交過程。

基本結(jié)構(gòu)

HTML表單由<form>標(biāo)簽定義，它可以包含輸入字段、標(biāo)簽、按鈕等元素。一個(gè)基本的表單結(jié)構(gòu)如下所示：

<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>

在這個(gè)例子中，表單有兩個(gè)輸入字段：姓名和電子郵箱。每個(gè)輸入字段都有一個(gè)<label>標(biāo)簽，這不僅有助于用戶理解輸入的內(nèi)容，也有助于屏幕閱讀器等輔助技術(shù)。<form>標(biāo)簽的action屬性定義了數(shù)據(jù)提交到服務(wù)器的URL，method屬性定義了提交數(shù)據(jù)的HTTP方法（通常是post或get）。

輸入類型

HTML5提供了多種輸入類型，以支持不同的數(shù)據(jù)格式和設(shè)備。

文本輸入

<!-- 單行文本 -->
<input type="text" name="username" placeholder="請(qǐng)輸入用戶名" 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="搜索...">

數(shù)值輸入

<!-- 數(shù)值 -->
<input type="number" name="age" min="18" max="100" step="1" required>

<!-- 滑動(dòng)條 -->
<input type="range" name="volume" min="0" max="100" step="1">

<!-- 電話號(hào)碼 -->
<input type="tel" name="phone" pattern="^\+?\d{0,13}" placeholder="+8613800000000">

日期和時(shí)間輸入

<!-- 日期 -->
<input type="date" name="birthdate" required>

<!-- 時(shí)間 -->
<input type="time" name="appointmenttime">

<!-- 日期和時(shí)間 -->
<input type="datetime-local" name="appointmentdatetime">

選擇輸入

<!-- 復(fù)選框 -->
<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>

驗(yàn)證方法

HTML5表單提供了內(nèi)置的驗(yàn)證功能，可以在數(shù)據(jù)提交到服務(wù)器之前進(jìn)行檢查。

必填字段

<input type="text" name="username" required>

正則表達(dá)式

<input type="text" name="zipcode" pattern="\d{5}(-\d{4})?" title="請(qǐng)輸入5位數(shù)的郵政編碼">

數(shù)值范圍

<input type="number" name="age" min="18" max="99">

長(zhǎng)度限制

<input type="text" name="username" minlength="4" maxlength="8">

表單提交

當(dāng)用戶填寫完表單并點(diǎn)擊提交按鈕時(shí)，瀏覽器會(huì)自動(dòng)檢查所有輸入字段的有效性。如果所有字段都滿足要求，表單數(shù)據(jù)將被發(fā)送到服務(wù)器。否則，瀏覽器會(huì)顯示錯(cuò)誤信息，并阻止表單提交。

<input type="submit" value="提交">

可以使用JavaScript來自定義驗(yàn)證或處理提交事件：

document.querySelector('form').addEventListener('submit', function(event) {
  // 檢查表單數(shù)據(jù)
  if (!this.checkValidity()) {
    event.preventDefault(); // 阻止表單提交
    // 自定義錯(cuò)誤處理
  }
  // 可以在這里添加額外的邏輯，比如發(fā)送數(shù)據(jù)到服務(wù)器的Ajax請(qǐng)求
});

完整例子

<!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函數(shù)，處理表單提交
function submitForm() {
  // 獲取表單元素
  var form = document.getElementById('myForm');
  
  // 創(chuàng)建一個(gè)FormData對(duì)象
  var formData = new FormData(form);
  
  // 創(chuàng)建一個(gè)空對(duì)象來存儲(chǔ)表單數(shù)據(jù)
  var formObject = {};
  
  // 將FormData轉(zhuǎn)換為普通對(duì)象
  formData.forEach(function(value, key){
    formObject[key] = value;
  });
  
  // 將對(duì)象轉(zhuǎn)換為JSON字符串
  var jsonString = JSON.stringify(formObject);
  
  // 彈出包含JSON字符串的對(duì)話框
  alert(jsonString);
  
  // 阻止表單的默認(rèn)提交行為
  return false;
}
</script>

</body>
</html>

在這個(gè)例子中：

我們定義了一個(gè)包含姓名和電子郵件輸入字段的表單，以及一個(gè)按鈕，當(dāng)點(diǎn)擊按鈕時(shí)會(huì)調(diào)用submitForm函數(shù)。
在submitForm函數(shù)中，我們首先獲取表單元素并創(chuàng)建一個(gè)FormData對(duì)象。然后，我們遍歷FormData對(duì)象，將表單數(shù)據(jù)復(fù)制到一個(gè)普通的JavaScript對(duì)象formObject中。
接著，我們使用JSON.stringify方法將formObject轉(zhuǎn)換成JSON字符串。
最后，我們使用alert函數(shù)彈出一個(gè)包含JSON字符串的對(duì)話框。

注意，這個(gè)例子中我們使用了type="button"而不是type="submit"，因?yàn)槲覀儾幌Ｍ韱斡心J(rèn)的提交行為。我們的JavaScript函數(shù)submitForm會(huì)處理所有的邏輯，并且通過返回false來阻止默認(rèn)的表單提交。如果你想要使用type="submit"，你需要在<form>標(biāo)簽上添加一個(gè)onsubmit="return submitForm()"屬性來代替按鈕上的onclick事件。

結(jié)論

HTML5的表單功能為開發(fā)者提供了強(qiáng)大的工具，以便創(chuàng)建功能豐富、用戶友好且安全的網(wǎng)站。通過使用HTML5的輸入類型和驗(yàn)證方法，可以確保用戶輸入的數(shù)據(jù)是有效的，同時(shí)提高用戶體驗(yàn)。隨著技術(shù)的不斷進(jìn)步，HTML5表單和相關(guān)API將繼續(xù)發(fā)展，為前端工程師提供更多的可能性。

、表單在網(wǎng)頁中的應(yīng)用：登錄、注冊(cè)常用到表單

2、表單的語法：

<p>

</p>

</form>

3、表單元素說明：

type:指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默認(rèn)為 text.

name:指定表單元素的名稱.

value:元素的初始值。type 為 radio時(shí)必須指定一個(gè)值.

size:指定表單元素的初始寬度。當(dāng) type 為 text 或 password時(shí)，表單元素的大小以字符為單位。對(duì)于其他類型，寬度以像素為單位.

maxlength:type為text 或 password 時(shí)，輸入的最大字符數(shù).

checked:type為radio或checkbox時(shí)，指定按鈕是否是被選中.

4、示例：

<html >

<head>

</head>

<body>

<br/>

<input type ="radio" name ="sex" checked/>男

<input type ="radio" name ="sex"/>女

<br/>

<input type="checkbox" name ="hobby" id="hobby"/>聽音樂

<input type="checkbox" name ="hobby"/>旅游

<input type="checkbox" name ="hobby"/>游泳

<br/>

</select>

<br/>

<br/>

<br/>

<br/>

個(gè)人簡(jiǎn)介：

</label>

<textarea >本人已同意什么條款</textarea>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

</form>

</body>

</html>

效果圖鏈接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlThree/form.html

在線咨詢

上一篇：一起盤點(diǎn)下做問答都有哪些平臺(tái)！你還知道哪些？
下一篇：人人都是產(chǎn)品經(jīng)理主編首分享：如何寫好一篇測(cè)評(píng)文章

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

8個(gè)簡(jiǎn)單且包容的表單設(shè)計(jì)技巧請(qǐng)查收

一、讓表單盡量保持單列

二、流程、順序和分組

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

2. 用清晰的邏輯排列表單項(xiàng)

3. 將表單項(xiàng)分組

三、使用清晰有效的標(biāo)簽

四、避免使用占位符文本

五、標(biāo)注可選或者必填的輸入框

六、 發(fā)生錯(cuò)誤時(shí)，提供反饋

1. 網(wǎng)頁標(biāo)題中顯示發(fā)生錯(cuò)誤數(shù)量

2. 在表單開頭顯示錯(cuò)誤提示總結(jié)

3. 實(shí)時(shí)提醒錯(cuò)誤

七、行動(dòng)按鈕

1. 在行動(dòng)按鈕上使用動(dòng)詞

2. 主要按鈕與次要按鈕

3. 行動(dòng)按鈕的位置

八、如果內(nèi)容復(fù)雜，可以使用多步驟表單

1. 盡早且頻繁地測(cè)試設(shè)計(jì)稿

基本結(jié)構(gòu)

輸入類型

文本輸入

數(shù)值輸入

日期和時(shí)間輸入

選擇輸入

特殊輸入

驗(yàn)證方法

必填字段

正則表達(dá)式

數(shù)值范圍

長(zhǎng)度限制

表單提交

完整例子

結(jié)論

您的項(xiàng)目需求

二、流程、順序和分組

五、標(biāo)注可選或者必填的輸入框

六、發(fā)生錯(cuò)誤時(shí)，提供反饋

七、行動(dòng)按鈕

八、如果內(nèi)容復(fù)雜，可以使用多步驟表單