8个简单且包容的表单设计技巧请查收

辑导语：在工作中我们时常会遇到一些关于表单优化的问题，虽然表单听起来是比较简单而常见的设计要素，但要想设计出简洁直观，清晰明了的表单还需要考虑更多的细节因素。本文总结了如何设计出简单且包容的表单的一些技巧，希望对你有所启发。

最近我的工作涉及一项艰巨的任务——如何为我的产品设计出体验更好的表单。当我接到这个任务时，我根本不知道好的表单和坏的表单有什么区别。我需要思考：我应该设计一个多步骤的表单还是一个单页的表单？我应该使用占位符吗？如何使我的表单更符合包容性设计的原则呢?

几乎每一个在网页端发生的重要交互，从注册登陆、购买产品服务到发起客户帮助或者获得反馈，都需要通过表单来完成。因此，虽然表单可能不是设计中最激动人心的设计元素，但学会如何设计一个好的表单是一项非常有价值的技能。

在学习了一些资料之后，我把我认为最好的最有效的表单设计进行了罗列。然而，我们需要记住的是：表单是一个高度依赖上下文的设计元素，所以在实际操作中是有例外的，设计师需要具体情况具体分析。在我们开始之前，让我们快速的来回顾一下表单的五个主要元素：

结构：表单的布局以及表单项的顺序
输入框：文本框、单选或者是多选等界面元素
输入框标签：输入框的相应提示文案
行动按钮：用户执行一个操作，比如提交他们的个人信息
反馈：让用户意识到自己的提交是否成功，反馈可以是视觉暗示也可以是听觉暗示

一、让表单尽量保持单列

多列表单容易让人产生误解：用户非常容易忽略一些必填的内容，把信息填入错误的文本框或者完全放弃填写表单。下面的图片展示了用户面对多列表单时视线是如何移动的。

当一个表单没有提供清晰的填写路径时，用户需要很长时间去理解它，更别说去完成它了。当一个表单的填写路径是线性的，比如说单列表单，用户在完成时就不会存在误解。

二、流程、顺序和分组

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协议。

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

在这个例子中：

我们定义了一个包含姓名和电子邮件输入字段的表单，以及一个按钮，当点击按钮时会调用submitForm函数。
在submitForm函数中，我们首先获取表单元素并创建一个FormData对象。然后，我们遍历FormData对象，将表单数据复制到一个普通的JavaScript对象formObject中。
接着，我们使用JSON.stringify方法将formObject转换成JSON字符串。
最后，我们使用alert函数弹出一个包含JSON字符串的对话框。

注意，这个例子中我们使用了type="button"而不是type="submit"，因为我们不希望表单有默认的提交行为。我们的JavaScript函数submitForm会处理所有的逻辑，并且通过返回false来阻止默认的表单提交。如果你想要使用type="submit"，你需要在<form>标签上添加一个onsubmit="return submitForm()"属性来代替按钮上的onclick事件。

结论

HTML5的表单功能为开发者提供了强大的工具，以便创建功能丰富、用户友好且安全的网站。通过使用HTML5的输入类型和验证方法，可以确保用户输入的数据是有效的，同时提高用户体验。随着技术的不断进步，HTML5表单和相关API将继续发展，为前端工程师提供更多的可能性。

、表单在网页中的应用：登录、注册常用到表单

2、表单的语法：

<p>

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

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

个人简介：

</label>

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

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

</form>

</body>

</html>

效果图链接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlThree/form.html

在线咨询

上一篇：一起盘点下做问答都有哪些平台！你还知道哪些？
下一篇：人人都是产品经理主编首分享：如何写好一篇测评文章

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

8个简单且包容的表单设计技巧请查收

一、让表单尽量保持单列

二、流程、顺序和分组

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

2. 用清晰的逻辑排列表单项

3. 将表单项分组

三、使用清晰有效的标签

四、避免使用占位符文本

五、标注可选或者必填的输入框

六、 发生错误时，提供反馈

1. 网页标题中显示发生错误数量

2. 在表单开头显示错误提示总结

3. 实时提醒错误

七、行动按钮

1. 在行动按钮上使用动词

2. 主要按钮与次要按钮

3. 行动按钮的位置

八、如果内容复杂，可以使用多步骤表单

1. 尽早且频繁地测试设计稿

基本结构

输入类型

文本输入

数值输入

日期和时间输入

选择输入

特殊输入

验证方法

必填字段

正则表达式

数值范围

长度限制

表单提交

完整例子

结论

您的项目需求

六、发生错误时，提供反馈