【译】深入浅出Forms

avatar

原文web.dev/learn/forms… 由龙飞翻译

学习表单

本课程将 HTML 表单分解为易于理解的部分。在接下来的几个模块中，您将了解 HTML 表单的工作原理以及如何在您的项目中有效地使用它们。您将学习如何构建基本的 HTML 表单、关于 HTML 表单元素、样式表单、帮助用户重新输入数据、确保表单可访问且安全、如何测试您的表单以及特定表单类型。每个模块都充满了互动演示和自我评估，供您测试您的知识。本课程适合初学者和高级 HTML 开发人员。前几个模块帮助您开始构建 HTML 表单，其他模块提供更多详细信息。您可以从头到尾阅读本系列以大致了解 HTML 表单，或者选择您想要了解更多的特定模块。

预备知识

在开始本课程之前，您应该了解 HTML。对于 Web 开发新手，请查看来自 MDN 的 HTML 课程介绍，了解有关如何编写标记的所有信息。

演示

对于大多数演示，我们使用 CodePen。

查看演示，您可能想知道样式从何而来。我们使用包含在所有演示中的通用样式表，因此那里只显示相关样式。在 CodePen 中，您可以从设置中选择包含的 CSS 文件。

表单控件和表单字段

表单控件是支持用户交互和输入或选择数据的元素：<input>、<select>、<textarea>、<button>

表单字段有时用于指代表单控件，特别是用于文本输入：<input>和<textarea>。

使用表单从用户那里获取数据

什么是表单元素？

<form>
    <label for="animal">What is your favorite animal?</label>
    <input type="text" id="animal" name="animal">
    <button>Save</button>
</form>

表单元素由开始标签<form>、开始标签中定义的可选属性和结束标签</form>组成。

在开始和结束标签之间，您可以包含表单元素，例如<input>和<textarea>用于用户不同类型的输入。

使用 HTTPS 保护所有网站和表单，而不仅仅是在处理敏感数据时。这样，所有数据都被加密。了解更多信息：使用 HTTPS 的安全连接。

数据在哪处理？

提交表单时（例如，当用户单击 “Submit” 按钮时），浏览器会发出请求。脚本可以响应该请求并处理数据。

需要一个脚本(在服务器或客户端上运行)来处理表单。它可以验证数据，将数据保存到数据库中，或者基于表单数据执行其他操作。

默认情况下，请求被发送到显示表单的页面。

假设您希望在https://web.dev上运行一个脚本来处理表单数据——您会怎么做？试试吧！

查看示例 
<form action="https://example.com/animals">
    ...
</form>

前面的示例向 https://example.com/animals 发出请求。后端上的脚本可以处理对 /animals 的请求和来自表单的数据。

数据是如何传输的？

默认情况下，表单数据发送GET请求，提交的数据附加到 URL。如果用户在上面的示例中提交“frog”，浏览器会向以下 URL 发出请求：

example.com/animals?ani…

在这种情况下，您可以通过从 URL 中获取数据来访问前端或后端的数据。

如果需要，可以通过更改方法属性来指示表单使用POST请求。

<form method="post">...</form>

使用POST请求，数据包含在请求体中。

数据在 URL 中不可见，只能从前端或后端脚本访问。

您应该使用什么方法？

这两种方法都有用例。

对于处理敏感数据的表单，请使用POST方法。数据已加密（如果您使用 HTTPS）并且只能由处理请求的后端脚本访问。数据在 URL 中不可见。一个常见的例子是登录表单。

如果数据是可共享的，则可以使用GET方法。这样，数据将被添加到您的浏览器历史记录中，因为它包含在 URL 中。搜索表单经常使用它。这样您就可以为搜索结果页面添加书签。

资源

表单<form>

帮助用户在表单中输入数据

要使表单具有交互性，您需要添加表单元素。有用于输入和选择数据的控件、描述控件的元素、用于对字段进行分组的元素以及用于提交表单的按钮。

什么是表单元素？

您看到两个<input>元素，<input type="text">和<input type="file">。为什么它们看起来不一样？

基于元素名称和类型属性，浏览器显示不同的用户界面，使用不同的验证规则，并提供许多其他功能。使用适当的表单控件可以帮助您构建更好的表单。

表单控件的默认样式因浏览器、操作系统和平台而异。您将在后面的模块中学习如何跨平台设置表单样式。

表单元素的标签

假设您要添加一个输入，用户可以在其中输入他们喜欢的颜色。为此，您需要向表单添加一个<input>元素。但是，用户怎么知道他们应该填写自己喜欢的颜色呢？

使用<label>描述表单控件。

<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">

label 元素上的for属性与 input 元素上的id属性相匹配。

使用<label>而不是使用其他一些 HTML 元素来描述每个表单控件。这使得屏幕阅读器可以访问表单控件，并提供更大的目标，因为您可以点击或单击标签以将焦点设置在控件上。单击我们演示中的标签来尝试一下。

捕获用户输入

顾名思义，该<input>元素用于收集用户的输入。

<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">

如前所述，id属性将<input>和<label>连接在一起。这个例子中的 name 和 type 属性怎么样？

名称属性

使用name属性来标识用户使用控件输入的数据。如果您提交表格，此名称将包含在请求中。假设您命名了一个表单控件mountain并且用户输入了该Gutenberg请求，该请求将此信息包含为mountain=Gutenberg。

尝试将表单控件的名称更改为hill.  如果您正确执行此操作并提交表单，hill则在 URL 中可见。

输入类型

表单控件的类型有很多种，它们都具有适用于不同浏览器和平台的有用的内置功能。基于type属性，浏览器呈现不同的用户界面，显示不同的屏幕键盘，使用不同的验证规则等等。让我们看看如何更改类型。

通过使用type="checkbox"浏览器，现在呈现一个复选框而不是文本字段。该复选框还带有其他属性。您可以设置checked属性，以将其显示为已选中。

type的默认值为text。这意味着如果您只想要一个文本<input>，则可以省略该type属性。

允许多行文本

比如，您需要一个用户可以写评论的字段。为此，如果他们可以输入多行文本不是很好吗？这就是<textarea>元素的目的。

<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>

从选项列表中选择

您如何为用户提供可供选择的选项列表？可以使用一个<select>元素来实现这一点。

如果您想启用带有额外预定义选项的文本输入，您还可以将一个<input>元素与datalist 元素一起使用。您可以在此处试用数据列表示例。

 <label for="color">Color</label>
 <select id="color" name="color">
   <option value="orange">Orange</option>
   <option value="pink">Pink</option>
 </select>

首先，您添加一个<select>元素。与其他所有表单控件一样，具有id属性且使用该属性为其指定一个唯一的名称name，之后将它连接到<label>控件上。

在<select>元素的开始和结束标签之间，您可以添加多个<option>元素，每个元素代表一个选项。

每个选项都有一个独特的value属性，因此您可以在处理表单数据时区分它们。选项元素内的文本是可读的。

如果您在不更改选择的情况下提交表单<select>，请求将包括color=orange.  但是浏览器如何知道应该使用哪个选项呢？

浏览器使用列表中的第一个选项，除非：

  • <option>元素具有selected属性。
  • 用户选择另一个选项。

预先选择一个选项

使用selected属性，您可以预先选择一个选项。无论元素定义的顺序如何，带有selected属性的<option>将成为默认值。

分组表单控件

有时您需要对表单控件进行分组。您可以使用<fieldset>元素来做到这一点。

<fieldset>
  <legend>What is your favorite web technology</legend>

  <label for="html">HTML</label>
  <input type="radio" name="webfeature" value="html" id="html">

  <label for="css">CSS</label>
  <input type="radio" name="webfeature" value="css" id="css">
</fieldset>

您注意到<fieldset>元素里面的<legend>元素了吗？觉得它有什么用？

如果您的答案是“描述表单控件”，那么您是对的！

每个<fieldset>元素都需要一个<legend>元素，就像每个表单控件都需要一个关联<label>元素一样。<legend>也必须是<fieldset>元素中的第一个。在<legend>元素之后，您可以定义应该属于该组的表单控件。

提交表格

在学习了如何添加表单控件并将它们分组之后，您可能想知道用户如何提交表单？

第一个选项是使用<button>元素。

<button>Submit</button>

用户单击 Submit 按钮后，浏览器向<form>元素的action 属性中指定的 URL 发出来自表单控件的所有数据的请求。

⚠️ 警告

默认情况下，表单中的每个<button>元素都用作提交按钮。有时您不希望这样：例如，当使用 <button>切换密码字段的可见性时。要禁用默认提交行为，您可以添加type="button"到<button>，  这告诉浏览器<button>不应该提交表单。

您还可以使用带有type="submit"属性的<input>元素而不是<button>元素。它的外观和行为就像一个<button>。  不用<label>元素来描述<input>，而是使用value属性。

<input type="submit" value="Submit">

另外，当表单域获得焦点时，也可以通过按键Enter提交表单。

资源

帮助用户避免重新输入数据

充分利用自动填充

填写表单可能很耗时。例如，在您想购买商品的每个网站上重复输入您的地址并不是很好的购物体验。

自动填充可以在这里帮助你。您输入一次地址。从现在开始，您的浏览器将为您提供自动为其他表单填写相同地址的选项。

您搬到另一个城市了吗？不要担心永远将旧地址作为一种选择。您可以编辑浏览器为您保存的地址数据，以使其保持最新。

浏览器也有助于记忆数据。您注册一个站点。对于密码字段，您可以选择生成和存储安全密码。如果您想稍后在同一站点登录，浏览器会为您提供填写存储密码的选项。

自动填充在浏览器中如何工作？

地址字段在不同站点上看起来可能非常不同。浏览器如何知道它是一个地址字段？

浏览器使用试探法来识别地址字段。name、type和id的属性值是什么？表单控件上是否存在autocomplete属性？

基于此信息，浏览器可以提供使用先前输入的相同类型数据自动填充字段的选项。浏览器甚至可以自动填充整个表单。

帮助浏览器自动填充

让我们看看您可以做些什么来帮助浏览器提供正确的自动填充选项。

使用合理的属性值

如您所知，浏览器可以通过查看表单控件的属性来识别数据类型。

<label for="email">Email</label>
<input type="email" name="email" id="email">

您是否有用户输入其电子邮件地址的字段？用email作为name id和属性type的值。给浏览器三个提示，这是一个电子邮件字段。

自动完成属性

在其他示例中，浏览器仍然很难仅通过name、id和type属性来识别数据类型。您可以使用autocomplete属性在此处提供帮助。

您之前在浏览器中输入过名称吗？在演示中，浏览器可能会再次为您提供填写此字段的选项。

您可以在后面的模块中了解有关使用自动完成和自动填充的更多信息。

资源

帮助用户输入正确的数据

了解如何在前端验证您的表单。

浏览器具有用于验证的内置功能，以检查用户是否以正确的格式输入数据。您可以通过使用正确的元素和属性来激活这些功能。最重要的是，您可以使用 CSS 和 JavaScript 增强表单验证。

这个模块是关于前端的表单验证。您还必须确保在后端服务器上存储或共享数据之前验证数据：了解更多信息。

为什么要验证表单？

您在上一个模块中学习了如何帮助用户避免在表单中重新输入信息。您如何帮助用户输入有效的数据？

在不知道哪些字段是必需的或不知道字段的限制条件的情况下填写表单是令人沮丧的。例如，您输入用户名并提交表单 - 却发现用户名必须至少包含八个字符。

您可以通过定义验证规则并传达它们来帮助用户。

帮助用户避免意外遗漏必填字段

您可以使用 HTML 为表单中输入的数据指定正确的格式和限制。您还需要指定哪些字段是必填的。

尝试在不输入任何数据的情况下提交此表单。您是否看到<input>附加的错误信息告诉您该字段是必需的？

发生这种情况是因为required属性。

<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">

不同的浏览器使用不同的文本作为错误信息。措辞还取决于用户的浏览器语言。如果您使用 Safari 并且您的首选浏览器语言是德语，您会收到与 Chrome 中用户选择英语作为浏览器语言的不同的错误消息。稍后在本模块中了解如何使用 JavaScript 更改默认错误消息。

您已经了解到可以使用更多类型，例如type="email"，让我们看一下必需的电子邮件<input>。

尝试在不输入任何数据的情况下提交此表单。和之前的 demo 有什么区别吗？现在在电子邮件字段中输入您的姓名并尝试提交。您会看到一条不同的错误消息。这怎么可能？您收到不同的信息，因为您输入的值不是有效的电子邮件地址。

该required属性告诉浏览器该字段是必填字段。浏览器还会测试输入的数据是否与type类型的格式匹配。示例中显示的 email 字段只有在它不为空并且输入的数据是有效的电子邮件地址时才有效。

帮助用户输入正确的格式

您学习了如何使字段成为必填的。您将如何指示浏览器用户必须在表单域中输入至少八个字符？

试一试演示。更改后，如果您输入的字符少于八个，您将无法提交表单。

查看示例 
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password">

属性的名称是minlength。将值设置为8，您就拥有了所需的验证规则。如果您想要相反的结果，请使用maxlength.

对于数字输入类型，使用min和max可获得相同的结果。

传达您的验证规则

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
  name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>

确保所有用户都了解您的验证规则。为此，将表单控件与解释规则的元素连接起来。向表单具有id属性的元素中添加一个aria-describedby属性。

模式属性

有时您想要定义更高级的验证规则。同样，您可以使用 HTML 属性。它叫做pattern，您可以定义一个正则表达式作为值。

<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">

在这里，只允许使用小写字母；用户必须输入至少两个字符，但不超过二十个。

您将如何更改pattern以允许使用大写字母？试试吧。

查看答案 
正确答案是`pattern="[a-zA-Z]{2,20}"`。

添加样式

您现在已经学习了如何在 HTML 中添加验证。如果您还可以根据验证状态设置表单控件的样式，那不是很好吗？这可以通过 CSS 实现。

如何设置必填表单域的样式

在用户与您的表单交互之前，向他们表明一个字段是必填的。

您可以使用 CSS 伪类required为字段设置样式:required。

input:required {
  border: 2px solid;
}

无效的表单控件样式

您还记得如果用户输入的数据无效会发生什么吗？出现附加到表单控件的错误消息。发生这种情况时调整元素的外观不是很好吗？

您可以使用:invalid 伪类将样式添加到无效的表单控件。此外，还有:valid用于设置有效表单元素样式的伪类。

有时设计者使用:invalid伪类将无效状态涂成红色。然而，要传达错误或成功，你不应该只依赖颜色。对于红绿色盲的人来说，绿色和红色边框看起来几乎一样。他们不可能看到是否有错误或成功。添加文本或图标以使其显而易见。

有更多方法可以根据验证调整您的样式。在 CSS 的模块中，您将了解有关样式表的更多信息。

在实践中:invalid很难使用。无效的表单字段在用户交互之前已经被标记为:Invalid，这可能会使用户感到困惑。:user-invalid伪类解决了这个问题，因为样式仅在用户交互后应用。详细了解 :user-invalid

使用 JavaScript 验证

要进一步增强表单的验证，您可以使用JavaScript Constraint Validation API。

提供有意义的错误信息

您之前了解到，每个浏览器中的错误消息都不相同。您如何向所有人显示相同的信息？

为此，请使用 setCustomValidity() Constraint Validation API 的方法。让我们看看这是如何工作的。

const nameInput = document.querySelector('[name="name"]');

nameInput.addEventListener('invalid', () => {
  nameInput.setCustomValidity('Please enter your name.');
});

查询要设置自定义错误消息的元素。监听您定义元素的invalid事件。在那里你设置了消息setCustomValidity()。Please enter your name.此示例显示输入无效时的消息。

在不同的浏览器中打开演示，你应该看到到处都是相同的消息。现在，尝试删除 JavaScript 并重试。您会再次看到默认错误消息。

您可以使用约束验证 API 做更多的事情。在后面的模块中，您将详细了解如何使用JavaScript 进行验证。

您可以通过监听表单控件的onblur事件在JavaScript中添加实时验证，并在用户离开表单字段时立即验证输入。

单击演示中的表单字段，输入“web”并单击页面上的其他位置。您会在表单字段下方看到minlength错误消息。

在下面的模块中了解有关使用 JavaScript 实现实时验证的更多信息。

资源

设计基础

创建用户友好的界面

填写表格可能既费时又令人沮丧，其实不必如此。为保证出色的用户体验，请确保用户界面直观。确保您提供最佳的表单结构和图形设计（布局、间距、字体大小和颜色）以及逻辑 UI（例如标签措辞和适当的输入类型）。让我们来看看如何改进表单并使其易于使用。

标签

你还记得这个<label>元素是做什么用的吗？一个标签描述了一个表单控件。可见且写得很好的标签有助于用户理解表单控件的用途。

为每个表单控件使用标签

您想向表单添加新的表单控件吗？首先为新字段添加标签。这样，您就不会忘记添加它。

首先添加标签还可以帮助您专注于表单的目标——我需要什么数据？一旦清楚了，您就可以专注于帮助用户输入数据和完成表单。

警告

切勿将placeholder属性滥用为标签。占位符用于提示您应该输入的数据类型，而不是用于描述表单控件。详细了解为什么应考虑避免使用占位符。

标签描述

假设您要描述一个电子邮件字段。你可以这样做：

<label for="email">Enter your email address</label>

或者您可以这样描述它：

<label for="email">Email address</label>

您选择哪种描述？

对于我们的示例，首选措词Email address，因为短标签更易于扫描、减少视觉混乱并帮助用户更快地了解需要哪些数据。

标签位置

使用CSS，您可以将标签放置在表单控件的顶部、底部、左侧和右侧。您把它放在哪里？

研究表明，最佳做法是将标签放在表单控件上方，这样用户可以快速扫描表单并查看哪个标签属于哪个表单控件。

设计表单

帮助用户浏览表单

奢侈的布局可能很有趣，但可能会妨碍填写表格。

特别是，研究表明最好只使用一个列。用户不想花时间搜索下一个表单控件的位置。通过使用一列，只有一个方向可以遵循。

始终确保表单对于只使用键盘浏览网站的人来说是可访问的。Tab 键顺序应遵循视觉顺序。您可以在 Chrome DevTools 中查看源代码顺序。

帮助用户与表单交互

为了避免意外点击，并帮助用户与您的表单交互，请让您的按钮足够大。建议的按钮点击目标大小至少为 48 像素。您还应该使用 CSS 属性在表单控件之间添加足够的间距margin，以帮助避免意外交互。

表单控件的默认大小太小而无法真正使用。您应该通过使用padding和更改font-size默认值来增加字体大小。

至少使用1rem（大多数浏览器的默认值为 16px）作为您的表单控件font-size。这可以防止在表单控件获得焦点时在 iOS Safari 上进行页面缩放。

// pointer device, for example, a mouse
@media (pointer: fine) {
  input[type='checkbox'] {
    width: 15px;
    height: 15px;
  }
}

// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
  input[type='checkbox'] {
    width: 30px;
    height: 30px;
  }
}

了解有关pointerCSS 媒体功能的更多信息。

在错误发生的地方提示

为了让用户直接找出需要他们注意的表单控件，在他们引用的表单控件旁边显示错误消息。在提交表单显示错误时，请确保导航到第一个无效的表单控件。

让用户清楚要输入什么数据

确保用户了解如何输入有效数据。他们是否需要输入至少八个字符作为密码？告诉他们。

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>

让用户清楚哪些字段是必需的

<label for="name">Name (required)</label>
<input name="name" id="name" required>

如果一个字段是必填的，让它显而易见！The Anatomy of Accessible Forms解释了指示必填字段的替代方法。如果表单中的大多数字段都是必需的，则最好指示可选字段。

资源

辅助功能

您构建的表单是为人们准备的。人们使用不同的设备。有些使用鼠标，有些使用触摸设备，有些使用键盘，有些使用眼球运动控制的设备。有些使用屏幕阅读器，有些使用小屏幕，有些使用文本放大软件。每个人都想使用你的表格。学习如何使您的表单可供所有人访问和使用。

确保用户理解表单字段的用途

您可以选择许多表单控件。他们有什么共同点？每个表单控件都必须有一个关联的<label>元素。该<label>元素描述了表单控件的用途。文本<label>在视觉上与表单控件相关联，并由屏幕阅读器读出。

此外，点击<label>焦点关联的表单控件，使其成为更大的目标。

下次添加表单控件时，第一个添加<label>。考虑表单控件的用途，并向用户描述用途。方便人们快速准确地输入有效数据。

使用有意义的 HTML 访问内置浏览器功能

理论上，您可以仅使用<div>元素来构建表单。您甚至可以让它看起来像原生<form>。使用非语义元素有什么问题？

内置表单元素提供了许多内置功能。让我们看一个例子。

从视觉上看，<input>（示例中的第一个）和 <div>看起来是一样的。您甚至可以为两者插入文本，因为<div>有一个contenteditable属性。但是，使用合适的<input>元素和<div>看起来像<input>。

屏幕阅读器用户无法识别<div>为输入元素，因此无法完成表单。屏幕阅读器用户听到的只是“Name”，没有任何迹象表明该元素是用于添加文本的表单控件。

提交表单后，在<div>输入的数据不包含在请求中。虽然可以使用 JavaScript 附加数据，但<input>默认情况下会这样做。

内置表单元素还有其他特性。例如，使用适当的表单元素和正确的inputmode或type，屏幕键盘会显示适当的字符。

确保用户了解预期的数据格式

您可以为表单控件定义各种验证规则。例如，假设一个表单域应该始终至少有八个字符。您使用minlength属性，向浏览器指示验证规则。您如何确保用户也知道验证规则？告诉他们。

在表单控件正下方添加有关预期格式的信息。要明确辅助设备，请使用表单控件上的aria-describedby属性和具有相同值的错误消息上的id属性来连接两者。

帮助用户找到表单控件的错误信息

<label for="name">Name</label>
<input type="text" name="name" id="name" required>

例如，如果一个字段有一个required属性，并且输入了无效数据，那么在提交表单时，浏览器会在表单控件旁边显示一条错误消息。屏幕阅读器还会播报错误消息。

您还可以定义自己的错误消息：

此示例需要更多更改才能将错误消息连接到表单控件。

一种简单的方法是使用与错误消息元素匹配的表单控件上的aria-describedby属性。然后，用于aria-live="assertive"错误消息。ARIA 实时区域在显示错误时向屏幕阅读器用户宣布错误。

对于具有多个字段的表单，这种方法的问题在于，aria-live在出现多个错误的情况下，通常只会宣布第一个错误。正如这篇关于aria-live同一操作的多个公告的文章中所解释的，您可以通过连接所有错误来创建一条消息。另一种方法是宣布存在错误，然后在聚焦字段时宣布个别错误。

确保用户识别错误

有时设计者使用伪类:invalid将无效状态涂成红色。然而，要传达错误或成功，你不应该只依赖颜色。对于红绿色盲的人来说，绿色和红色边框看起来几乎一样。无法查看消息是否与错误相关。

除了颜色之外，还可以使用图标或在错误消息前加上错误类型。

<span class="error">
  <strong>Error:</strong>Please use at least eight characters.
</span>

帮助用户浏览您的表单

您可以使用 CSS 更改表单控件的视觉顺序。视觉顺序和键盘导航（DOM 顺序）之间的脱节会给屏幕阅读器和键盘用户带来问题。

详细了解如何确保页面上的视觉顺序遵循 DOM 顺序。

帮助用户识别当前获得焦点的表单控件

使用键盘浏览此表单。您是否意识到表单控件的样式一旦被激活就会发生变化？这是默认的焦点样式。:focus您可以使用 CSS 伪类覆盖它。无论您在内部使用什么样式，:focus始终确保默认状态和焦点状态之间的视觉差异是可识别的。

如果您想删除默认:focus样式但仍然为键盘用户显示焦点指示符，您可以使用:focus-visibleCSS 伪类。

了解有关设计焦点指示器的更多信息。

确保您的表格可用

您可以通过使用不同设备填写表单来识别许多常见问题。仅使用键盘，使用屏幕阅读器（例如 Windows 上的NVDA 或 Mac 上的VoiceOver），或将页面放大到 200%。始终在不同平台上测试您的表单，尤其是一些不常用的低端设备。您认识使用屏幕阅读器或使用文本放大软件的人吗？请他们填写您的表格。可访问性评论很棒，与真实用户一起测试更好。

了解有关进行辅助功能审查以及如何与真实用户进行测试的更多信息。

资源

国际化和本地化

为国际数据格式做好准备，并了解如何规划您的表单以进行本地化。

如果您正在阅读本文，则说明您正在使用万维网。您的表格可能会被说不同语言的人、来自不同国家的人以及具有不同文化背景的人使用。了解如何为国际化和本地化准备表单。

确保您的表单适用于不同的语言

让我们看看如何确保您的表单适用于不同的语言。

使您的站点为本地化做好准备的第一步是在<html>元素上定义语言属性lang。此属性使屏幕阅读器能够调用正确的发音，并在定义的语言不是默认浏览器语言时帮助浏览器提供页面翻译。

<html lang="en-us"></html>

了解有关lang属性的更多信息。

假设您将表单翻译成德语。您如何确保搜索引擎和浏览器知道翻译版本？您可以在站点的<head>中添加<link>元素来描述替代版本。

<link rel="alternate" title="The form element" href="https://example.com/en/form" hreflang="en">
<link rel="alternate" title="Das Formularelement" href="https://example.com/de/form" hreflang="de">

帮助说另一种语言的用户使用您的表单

您无法将表单翻译成每种语言，但可以确保翻译工具可以为您翻译。

试试看！在 Google Translate中输入表单的 URL ，选择一种语言，然后进行翻译。您网站的所有可见内容都将被翻译。这是一个很好的测试，看看是否每个文本都是可翻译的。

为确保翻译工具翻译表单上的所有文本，请确保所有文本均以 HTML 定义且可见。一些工具也可以处理在 JavaScript 中定义的内容，但为了提高兼容性，请尝试在 HTML 中包含尽可能多的文本。

避免使用aria-label属性来描述元素。许多翻译工具无法翻译该aria-label属性。了解更多为什么aria-label不翻译。

确保您的表单适用于不同的书写系统

不同的语言使用不同的书写系统和字符集。有些脚本是从左到右写的，有些是从右到左写的。

使间距独立于书写系统

为确保您的表单适用于不同的书写系统，您可以使用CSS 逻辑属性。

输入的所有边的边框厚度都是1px，除了左边，那里的边框4px很粗。现在，编辑CodePendir="rtl"属性并添加到<main>元素来将书写系统更改为从右到左

该dir属性指示元素文本的方向。如果整个站点使用相同的书写系统，请在元素<html>上定义属性dir。在 CodePen 中，您无权访问该<html>元素，这就是为什么您需要将其添加到<main>。  您也可以使用 CSSdirection属性来获得相同的结果。

粗边框现在位于右侧。那是因为我们使用逻辑属性定义了边框。

input {
  border-inline-start-width: 4px;
}

了解有关逻辑属性的更多信息。

确保您的表单可以处理不同的名称格式

假设您有一个表单，用户应在其中填写他们的姓名。您将如何将字段添加到表单中？

您可以为名字添加一个字段，为姓氏添加一个字段。但是，世界各地的名字都不一样：比如有些人没有姓氏——那么姓氏字段应该怎么填呢？

为了使输入姓名变得快速和容易——并确保每个人都可以输入他们的姓名，无论格式如何——尽可能使用一个单一的姓名表单字段。

了解有关个人姓名的更多信息。

允许多种地址格式

谷歌总部位于 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States。

此地址包括街道号码、街道、城市、州、邮政编码和国家/地区。在您所在的国家/地区，地址格式可能完全不同。您如何确保每个人都可以在您的表格中输入他们的地址？

一种方法是使用通用输入。

详细了解使用国际地址字段的其他方式。

资源

安全和隐私

了解如何确保表单安全并保护用户数据的私密性。

创建表单时，您使用的是用户数据。您最关心的应该是确保用户数据保密并安全传输。让我们看看可以做什么。

安全形式意味着所有数据都经过加密，保持安全，并且不会发生未经授权的访问。为确保隐私，仅保存您需要的数据，仅在同意后才保存个人数据，确保用户对其数据拥有完全控制权，绝不在未经用户同意的情况下与他人共享用户数据。

确保您的表单安全

第一步，确保请求的数据越少越好。不要访问您不需要的数据，并始终质疑您是否需要所有请求的数据。更少的数据意味着更少的风险、更少的成本和更少的责任。此外，减少表单中的字段数量可以降低表单的复杂性、更容易填写并降低放弃率。

始终使用 HTTPS，尤其是对于包含表单的页面。使用 HTTPS，数据在来自服务器和返回服务器时都被加密。

假设您正坐在一家使用公共 Wi-Fi 的咖啡馆里。你打开一个电子商务网站并填写你的信用卡信息来购买东西。如果该网站使用 HTTP，则同一公共 Wi-Fi 上的任何人（具备这样做的技能）都可以看到您的信用卡信息。如果网站使用 HTTPS，则数据会被加密，因此防止任何人试图访问它。

在您的网站上，您还应该确保将任何 HTTP 请求重定向到 HTTPS。详细了解如何将所有流量重定向到 HTTPS。

帮助用户保护他们的数据隐私

在第一个模块中，您了解了两种可能的数据传输方式：使用请求GET和使用POST请求。

对于请求，表单数据作为查询字符串GET包含在请求 URL 中。如果您提交使用请求的表单，浏览器会将包含表单数据的请求 URL 添加到您的浏览历史记录中。如果您想查找过去的表单提交，例如搜索表单，这很方便。如果提交了敏感数据，并且每个有权访问您的浏览器历史记录或本地网络的人都可以看到此信息，这一点都不好。

对可能提交个人或其他敏感数据的每个表单使用POST请求。这样，数据仅对处理它的后端脚本可见。

直接在浏览器中保存和处理个人数据怎么样？例如，您可以使用客户端存储localStorage在浏览器中存储个人数据。关于隐私，这不太理想。同样，每个有权访问您的浏览器的人都可以阅读此信息。您应该只存储个人数据的加密值。

确保用户可以安全地注册和登录

就隐私和安全而言，用户帐户身份验证是一个复杂的问题。最好使用第三方身份提供程序，而不是构建自己的安全身份验证系统。

详细了解帐户身份验证和密码管理的最佳实践。

如果您确实选择构建自己的身份验证系统，请确保遵循密码管理的最佳实践： - 切勿以纯文本形式存储或传输密码。确保对密码进行加盐和散列处理——不要尝试发明自己的散列算法。- 确保用户输入安全密码。- 不允许泄露密码。- 不要强制更新密码。- 使用户更改或重置密码变得简单。

帮助用户访问他们的个人数据

许多地区都有关于数据保护和隐私的法律法规，包括加利福尼亚的CCPA和印度的PDPA 。欧盟 (EU) 的每个可用网站都必须遵守通用数据保护条例(GDPR)，即使该网站不在欧盟。

GDPR 为收集和处理来自欧盟居民的个人信息制定了指导方针。处理个人数据需要同意，用户可以随时请求您存储的个人信息，并且您必须正式宣布数据泄露。对用户来说是一件好事，因为这有助于确保他们的隐私得到尊重。了解有关GDPR 的更多信息。

确保您的用户知道您计划如何处理个人数据。透明度是信任的关键。用户应该始终能够访问、修改和删除您为他们保存的所有数据。

确保用户可以更新他们的个人数据

让用户可以轻松更新他们的个人数据，包括密码、电子邮件地址和用户名。通知用户有关其存储的个人数据的更改，并确保用户可以撤销更改。例如，在用户更改其电子邮件地址后向旧电子邮件地址和新电子邮件地址发送电子邮件。

将用户帐户和用户身份的概念分开，以简化实施第三方身份提供。允许用户更改他们的用户名并将多个身份链接到一个用户帐户，例如，如果他们使用电子邮件和密码注册，然后使用第三方身份提供商注册。

使用者可以轻松删除他们的帐户，包括所有相关数据，并在相关时允许下载数据。在某些地区，删除帐户是一项法律要求。

在每一页上用表单链接到您的隐私政策，特别是在处理个人数据时。

需要额外的身份验证步骤，例如，重新输入当前密码，才能查看或更改您网站上的个人信息。

了解更多信息：Web 应用程序隐私最佳实践。

确保所有数据都处于良好状态

在上一个模块中，您了解了前端验证,前端验证很重要，但用户可能仍然可以提交无效数据。下一步，您还必须在将数据保存到数据库之前在后端验证数据。这确保没有无效数据保存在您的数据库中。

验证有助于确保数据格式有效，但您仍不应信任用户输入的数据。如何安全输出数据？为防止跨站点脚本(XSS) 并确保所有数据都可以安全地包含在 HTML 中，您必须在输出前清理数据。

了解有关在输出前清理数据的更多信息，并在可能的情况下使用Sanitizer API。

确保所有提交都来自真实的人

为了帮助保护您的数据，您有多种选择来防止机器人提交垃圾邮件。

第一种选择是使用诸如reCAPTCHA之类的服务来区分真人和机器人。这需要您在页面上包含一个 JavaScript 片段，并向您的提交按钮添加额外的属性。

reCAPTCHA 执行各种检查以确定您是否是人类。例如，它可能会要求您识别图像。机器人等自动化软件无法完成这些挑战，也无法提交表单。

始终确保您的垃圾邮件保护可用。通过使用屏幕阅读器并仅使用键盘来试用它们。如果表单对真人来说无法使用，那么再好的垃圾邮件防护也是无用的。

资源

自动填充

了解有关自动填充和自动完成属性的所有信息。

必须第十次重新输入您的地址是很累人的。浏览器和您作为开发人员可以帮助用户更快地输入数据，并避免重新输入数据。本模块将向您介绍自动填充的工作原理，以及autocomplete其他元素属性如何确保浏览器提供适当的自动填充选项。

自动填充如何工作？

在自动填充简介中，您已经学习了自动填充的基础知识。但为什么浏览器提供自动填充功能？

填写表单不是一项有趣的活动，但仍然是您经常做的事情。随着时间的推移，你填写了很多表单，而且你经常填写相同的数据。帮助用户更快地填写表单的一种方法是为他们提供使用先前输入的数据自动填写表单字段的选项。那是自动填充。

浏览器如何知道要自动填充哪些数据？让我们看一个示例表单域来找出答案。

<label for="name">Name</label> <input name="name" id="name" />

如果您提交此表单字段，浏览器会存储该值（您输入的数据）以及属性值name（名称）。一些浏览器在存储和填充数据时也会查看id属性。

比如说，几周后，您在另一个网站上填写了另一个表单。该站点还包含一个带有name="name"。您的浏览器现在可以提供自动填充功能，因为名称的值已经存储。

使用:autofillCSS 伪类来设置浏览器自动填充的表单控件的样式。使用:autofill和前缀版本:-webkit-autofill以获得最佳浏览器兼容性。

自动填充在您经常使用的表单中特别有用，例如注册和登录、付款、结帐以及您必须输入姓名或地址的表单。

让我们看看如何通过为autocomplete属性使用适当的值来帮助浏览器提供最佳的自动填充选项。帮助用户输入他们的地址,有很多可能的值。让我们先看看地址。

您的浏览器是否已经为您保存了地址？太棒了！在您与地址表单中的第一个字段交互后，浏览器会向您显示已保存地址的列表。您可以选择一个，浏览器会填写与地址相关的所有字段。自动填充使填写表单变得快速和容易。

并非每个地址表都具有相同的字段，并且字段的顺序也各不相同。为autocomplete使用正确的值可确保浏览器为表单填充正确的值。

确保用户可以快速登录并使用安全密码

许多人不善于记住密码。最常用的密码是“123456”，其次是其他易于记忆的组合。您如何在不记住所有密码的情况下使用安全且唯一的密码？

浏览器内置密码管理器，可以为您生成、保存和填写密码。让我们看看如何帮助浏览器自动填充电子邮件和管理密码。

您可以使用autocomplete="email"电子邮件字段，以便用户获得电子邮件地址的自动填充选项。

由于这是一个注册表单，因此用户不应获得填写以前使用过的密码的选项。您可以使用autocomplete="new-password"以确保浏览器提供生成新密码的选项。

为确保注册表单安全，最好使用第三方身份提供程序，而不是构建您自己的身份验证系统。

在登录表单上，您可以使用autocomplete="current-password"告诉浏览器提供选项来填写以前保存的该网站的密码。

您可以在许多网站上设置双因素身份验证。除密码外，还会通过短信或双因素身份验证应用程序发送一次性代码。

如果你在短信中收到的代码是屏幕键盘提示的，你可以直接选择它来填写值，那不是很好吗？在 Safari 14 或更高版本上，您可以使用autocomplete="one-time-code"它来实现此目的。在 Android 上的 Chrome 上，您可以使用WebOTP API通过 JavaScript 实现此目的。

详细了解如何使用 SMS OTP 表单最佳实践验证 Web 上的电话号码。

帮助用户填写信用卡信息

在许多电子商务网站上，您可以使用信用卡购买产品。网站可能会使用提供自己表单的第三方支付平台，但如果您确实需要构建自己的支付表单，请确保人们可以轻松填写支付信息。

您可以再次使用autocomplete属性，以确保浏览器提供正确的自动填充选项。

信用卡号cc-number、信用卡有效期cc-exp和信用卡支付所需的所有其他信息都有值。

对信用卡号码和电话号码等数字使用单一输入，以确保浏览器提供自动填充功能。使用标准表单元素（例如，<select>用于支付卡日期的）而不是自定义元素，以确保自动完成功能可用。

确保自动填充适用于您的所有字段

除了地址、帐户信息和信用卡信息之外，浏览器还可以帮助用户自动填充更多字段。

在您的表单中添加电话字段时，请检查您是否可以使用任何可用的值来自动完成。为您的表单字段找到合适的值？添加它。

为autocomplete属性使用合适的值有助于浏览器提供最佳的自动填充选项，并帮助用户更快地填写表单。

帮助浏览器了解不应自动填充字段

您了解了自动填充的工作原理、如何帮助浏览器使用自动填充以及为什么自动填充可以方便用户填写表单。但是，有时您不希望浏览器提供自动填充功能。我们来看一下。

<label for="one-time-code">One-time code</label>
<input autocomplete="off" type="text" name="one-time-code" id="one-time-code" />

自动填充没有帮助的一个地方是输入一次性唯一值时，例如一次性代码字段。值每次都不同，浏览器不应保存值或提供自动填充选项。您可以使用autocomplete="off"此类字段来防止自动填充。

自动填充和自动完成提供可访问性优势。使用自动填充，人们不必记住信息或手动重新输入数据。有关详细信息，请参阅W3C 可访问性指南

您了解了使用唯一且安全的密码的重要性。浏览器内的密码管理器可确保您使用强密码。因此，浏览器仍将提供密码自动填充选项，即使已autocomplete="off"被使用，以允许这些密码管理器完成他们的工作。了解有关自动完成属性和登录字段的更多信息。

资源

如何测试表单的可用性

了解如何进行可用性测试并确保您的表单适用于所有用户。

什么是可用性测试？

可用性测试是一种评估设备或产品（例如 Web 表单）的技术。通过在真实用户身上测试您的表单，您可以识别自动化工具可能找不到的问题。您可以直接了解需要改进形式的地方。

要进行可用性测试，您给一个人一项任务，例如要求他们填写表单，观察他们完成任务，然后要求他们“大声思考”。在测试期间，您记下他们的互动。测试后，您提出问题。通过这种方式，您可以找出表单需要改进的地方。

与真实的人一起测试你的表单

首先，您需要找到可以测试您表单的人。请家人、朋友和同事测试您的表单。

测试不一定很困难。要改进您的表单，您不需要可用性实验室和复杂的报告方法！与一个人一起测试可能会帮助您改进表格。测试两个或更多更好。记下简单的笔记并相应地进行更改。

尝试获得尽可能多样化的测试人员：特别是考虑年龄和技术经验。

用户可能会因情境、暂时或永久受到损害。例如，用户可能有视力障碍，这使得他们在没有足够对比度的情况下难以阅读文本，或者用户可能有暂时性的手臂受伤，需要他们用一只手填写表单。

与各种各样的人一起进行测试可以帮助您发现可能没有意识到的可用性问题。了解有关包容性设计的更多信息，链接站点提供角色和示例活动，以帮助您进行包容性 UX 测试。

对于高流量站点，您应该与可访问性咨询公司合作，该公司可以提供全面的辅助技术测试和专家建议，以解决所发现的任何问题。

识别问题

您找到了人来测试表单。可用性测试在实践中如何运作？

要求人们完成特定任务。假设您想测试您的表单。请他们填写您的表单。他们能从主页找到表单吗？他们能够成功提交表单吗？询问他们的经历。当他们填写表单时，请他们解释他们在做什么以及他们遇到的任何问题。

确保您的表单可访问

您如何确保所有用户都可以访问您的表单？

确保您的表单按预期工作的最佳方法是让真人对其进行测试。请朋友或同事填写您的表单。您可能会惊讶于其他人使用您的表单的方式有多么不同，以及什么对他们很重要。

找到有不同需求的人，可以测试您的表单，并不总是可能的。但是，您应该始终自己进行可访问性审查。例如，您可以模仿视力缺陷，使用手机或电脑上的屏幕阅读器，或者只使用键盘填写表格。尝试通过屏幕阅读器（例如Mac 上的 VoiceOver或 Windows 上的NVDA）浏览您的表单。

了解更多关于进行可访问性审查的信息。

衡量和监控变化的影响

在对真人进行测试并收集反馈后，是时候根据用户的需求调整您的表单了。您如何确定新版本比以前的版本更好？

您可以请之前测试过您表单的同一个人再次测试您的表单。给他们同样的任务，然后问同样的问题。这次是不是更容易使用了？他们有没有遇到什么新问题？

您在家中或办公室测试了您的表单。您如何测试和监控最终用户的体验？使用分析和真实用户测量 (RUM)。在分析中实施目标漏斗，以检查更改是否减少了表单放弃以及用户完成表单所需的时间。

与最终用户一起测试不同的表单设计

更快获得结果的一种方法是进行 A/B 测试。您创建了表单的两个版本，并随机向用户提供一个或另一个版本：一些人获得版本 A，一些人获得版本 B。比较两个版本的结果有助于决定在以后的迭代中使用哪个版本。

详细了解A/B 测试。

资源

跨设备和平台的测试表单

确保您的表单适用于不同的设备、浏览器、平台和不同的环境。

您可以通过多种方式填写表单。人们可能会站在拥挤的公共汽车上、使用屏幕阅读器或旧笔记本电脑在智能手机上使用您的表单。让我们看看如何确保您的表单在不同的设备和不同的环境中工作。

确保您的表单适用于键盘用户

确保表单可访问的一个良好的第一个测试是仅使用键盘填写表单。打开您的表单并尝试使用tab键进行导航。是否清楚当前处于活动状态的表单字段？为了帮助用户了解哪个表单域处于活动状态，您可以使用焦点指示器。

试试吧。使用您的tab键导航到输入。当输入处于活动状态时，您是否看到轮廓？那是焦点指示器。您可以使用:focusCSS 伪类添加焦点指示器。

input:focus {
  outline: 4px solid #222;
}

了解有关设计易于访问的焦点指示器的更多信息。

如果你想删除默认:focus样式但仍然为键盘用户显示焦点指示符，你可以使用:focus-visibleCSS 伪类。详细了解:focus-visible。

帮助用户浏览您的表单

可用性和可访问性的另一个很好的测试是确保逻辑 Tab 键顺序遵循视觉 Tab 键顺序。如何测试 Tab 键顺序？Tab 键完全浏览您的表单。您是否注意到任何不合逻辑的导航跳跃？确保 DOM 顺序与视觉顺序相匹配。

详细了解如何确保页面上的视觉顺序遵循 DOM 顺序。

帮助用户在触摸设备上完成您的表单

您确保您的表单可以与键盘一起使用。现在，让我们看看如何确保它也适用于手机等触摸设备。

在触摸设备上打开您的表格，填写所有字段并提交表单。您是否必须点击多次才能选择表单控件？问题可能是水龙头区域太小。确保按钮的点击目标大小至少为 48px，并且每个<input>和<select>都足够大以便点击。您还可以通过在表单控件之间添加足够的间距来帮助用户在触摸设备上浏览您的表单。

确保用户获得优化的键盘

在前面的模块中，您学习了如何使用type或inputmode属性激活不同的屏幕键盘。

在手机上打开演示，然后点击电话号码字段。请注意，屏幕键盘上默认显示数字，以及电话号码可能需要的其他字符。用于type="tel"获取为输入电话号码而优化的屏幕键盘。

确保表单按钮没有被隐藏

想象一下，您填写了一个很长的表单，并准备好提交它。但是提交按钮在哪里？它可能位于屏幕底部的浏览器工具栏后面。确保按钮可见的一种方法是使用env()CSS 函数。了解如何确保按钮不会被设备用户界面遮挡。

确保您的表单适用于不同的平台

尝试在尽可能多的设备上测试您的表单。有旧笔记本电脑吗？打开它的默认浏览器并测试您的表单。你的朋友有平板电脑吗？借用它并在那里测试您的表格。

某些样式在同一个浏览器中看起来是否不同？您可以在后面的模块中了解如何确保您的样式跨平台工作。

BrowserStack为开源项目提供免费测试账户，Browserling提供免费试用以在不同的浏览器、设备和操作系统上进行测试。

帮助用户在不同的环境中完成您的表单

人们不仅仅使用不同的浏览器、设备和操作系统。人们还在不同的环境中使用您的表格。试试看！现在外面阳光明媚吗？拿起手机出去。在强光下使用表格是测试对比度是否可用的好方法。

了解有关颜色和对比度辅助功能的更多信息。

确保您的表单在连接性差的情况下工作

假设您乘火车去某个地方旅行。您在手机上打开一个网页。您想知道加载一个网站怎么会花这么长时间 😕。

您可以使用WebPageTest或DevTools模拟慢速连接和不同的网络类型。

了解有关低带宽和高延迟测试的更多信息。

帮助用户在旅途中使用您的表单

想象一下，您正步行去赴约。突然，您的电话响了，您接听了电话，同时，您的保险公司提醒您填写您开始的申请表。您打开表格，边走边说边尝试填写它。

请记住，人们会在许多不同的环境中使用您的表格。在压力大的情况下，一边做其他事情，一边在旅途中。您可以通过确保您的表单易于使用来帮助用户。

尝试给自己设定一个完成表单的时间限制。尝试模拟可以测试表单的不完美条件。

确保分享测试结果

记录所有测试，并与您的团队分享结果。这将有助于确定行动项目的优先级，以确保您团队中的每个人都知道最重要的任务。

了解有关共享测试结果的更多信息。

资源

收集数据

学习如何衡量和分析你的表单。

在本模块中，您将学习如何定义目标、分析表单、衡量变化以及获得有关新问题的通知。

确保您明确了问题和目标

作为第一步，您需要一种方法来确定问题和目标。一种方法是使用分析来大致了解您的表单可能需要改进的地方。

在为您的站点启动并运行分析后，您可以使用站点内的表单监控每个页面的跳出率和其他指标。如果跳出率很高，用户可能会在未提交表单的情况下离开您的网站。发生这种情况的潜在原因有很多：例如，表单可能过于复杂，或者不清楚应该输入哪些数据。

始终尊重用户的隐私，包括分析数据和表单数据。收集您需要的最少数据量，并让您的用户清楚了解您收集的数据。您还必须遵守隐私和数据保护法。在某些国家/地区，您需要征得用户同意才能收集数据。

要更清楚地了解高跳出率，您可以定义目标以详细确定用户离开表单的位置。

目标渠道（或转化渠道）是导致完成购买（转化 ） 等目标的一系列互动。每个目标渠道都包含单独的步骤，例如打开购物车页面或进入结帐页面。

您表单的目标渠道可能如下所示：

  1. 用户打开带有表单的页面 A。
  2. 用户填写名称字段。
  3. 用户填写邮政编码字段。
  4. 用户提交表单。
  5. 用户导航到页面 B。

目标渠道可以让您大致了解用户离开表单的位置以及您需要改进的地方。

除了使用分析来跟踪页面指标（例如页面停留时间或退出率），您还可以监控事件。这些允许您跟踪单个交互，例如按钮单击或与表单字段的交互。例如，您可以设置自定义事件，当用户填写特定的<input>。或者您可以跟踪提交表单的用户百分比。

分析你的表单

您可以为几乎每个交互创建自定义事件，并逐步监控表单完成情况。但这并不总是必要的：最好从少量自定义事件开始，只有在需要更多详细信息以查找表单问题时才添加更多。

首先关注最重要的目标，例如成功结账。如果需要更多详细信息，您可以随时扩展您的目标。确定您的主要目标，衡量这些目标的实现情况，分析数据，确定潜在的变化，调整您的形式并再次衡量。

确保您修复了表单的问题

假设您发现表单存在问题。接下来你应该做什么？首先，您需要更正问题并部署新版本的表单。几天后，现在是衡量变更效果的时候了。

您的表单的跳出率是否降低了？太好了，现在查看目标漏斗，看看哪些部分有所改进。例如，是否有很大一部分用户在填写邮政编码之前仍然离开？如有必要，调整您的目标渠道步骤，部署进一步的更改，并再次分析您的表单，直到您对结果满意为止。

出现问题时得到通知

您如何在不经常检查分析仪表板的情况下获得有关潜在问题的通知？您可以设置警报。一个常见的警报是关于流量下降的。您可以监控您的表单页面，并在一天的流量异常低时收到通知。或者，回到跳出率，如果页面的跳出率显著增加，您可以设置警报。

警报可帮助您快速识别问题，并确保您不会错过表单的新问题。

想要获得您网站分析的摘要？您可以创建报告，并通过电子邮件获得通知。这是监视表单使用情况的好方法。

资源

深入学习表单

详细了解表单元素、何时应使用表单以及表单的工作原理。

您应该使用一个<form>元素吗？

您并不总是需要将表单控件放在<form>元素中。例如，您可以提供一个<select>元素供用户选择产品类别。您在这里不需要<form>元素，因为您没有在后端存储或处理数据。

但是，在大多数情况下，当您存储或处理来自用户的数据时，您应该使用该<form>元素。正如您将在本模块中了解到的那样，使用<form>可以为您提供许多浏览器的内置功能，否则您必须自己构建这些功能。<form>还默认内置了许多辅助功能。如果您想避免在用户提交表单时重新加载页面，您仍然可以使用该元素，但得使用JavaScript<form>对其进行增强。

可以使用 JavaScript 复制表单功能，但纯基于脚本的方法不太可能像内置的<form>.  找出为什么不是每个人都拥有 JavaScript。

表单是如何工作的？

您了解到<form>是处理用户数据的最佳方式。您现在可能想知道，表单是如何工作的？

<form>是交互式表单控件的容器。

<form method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name" />
  <button formaction="/name">Save</button>
</form>

表单提交如何工作？

当您提交<form>时，浏览器会检查<form>属性。数据根据方法属性作为GET或POST请求发送。如果不存在任何属性，则向当前页面的 URL 发出GET请求。

您如何访问和处理表单数据？提交的数据可以由 JavaScript 在前端使用GET请求处理，也可以在后端使用GET或POST请求由代码处理。

提交按钮可能有一个formmethod属性。如果是这种情况，则使用此处定义的值。

提交表单时，浏览器向作为属性值的 URL 发出请求action。此外，浏览器检查提交按钮是否有formaction属性。如果是这种情况，则使用此处定义的 URL。

此外，浏览器会查找<form>元素的其他属性，例如，决定是否应验证表单 ( novalidate)、是否应使用自动完成 ( autocomplete="off") 或应使用何种编码 ( accept-charset)。

确保用户可以提交您的表单

提交表单有两种方式。您可以单击提交Enter按钮，或在使用任何表单控件时按下。

为您的提交按钮使用可操作的名称，例如“继续付款”或“保存更改”，而不仅仅是“提交”。不要在等待有效用户输入时禁用 “提交” 按钮，而是在提交表单后考虑禁用它，以防止向服务器发出多个请求。了解有关提交按钮最佳实践的更多信息。

您可以通过多种方式添加提交按钮。 <button>一种选择是在表单中使用元素。只要您不使用type="button"，它就可以用作提交按钮。另一种选择是使用<input type="submit" value="Submit">.

您可以使用该属性更改屏幕键盘的键enterkeyhint标签。Enter这有助于让用户更清楚提交当前表单时会发生什么。

第三个选项是使用<input type="image" alt="Submit" src="submit.png">, 创建一个图形提交按钮。但是，既然您可以使用 CSS 创建图形按钮，就不建议使用type="image".

始终给用户尽可能多的时间来提交表单。在您的表单上定义超时将导致数据丢失，并使您的用户感到沮丧。有关详细信息，请参阅W3C 表单超时指南。

允许用户提交文件

用于<input type="file">使人们能够在必要时上传和提交文件。

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

首先，在您的表单中添加一个<input>元素type="file"。如果用户应该能够上传多个文件，请添加multiple属性。

还需要进行一项更改以确保用户可以上传文件——在您的表单上设置enctype属性。默认值为application/x-www-form-urlencoded。

<form method="post" enctype="multipart/form-data">
…
</form>

为确保可以提交文件，请将其更改为multipart/form-data，没有这种编码，文件就不能随POST请求一起发送。

资源

深入学习表单域

了解您可以使用的不同表单域，以及如何选择正确的表单元素。

我可以使用哪些表单域？

type为了提供最佳的用户体验，请确保使用最适合用户输入的数据的元素。

帮助用户填写文本

要为用户提供用于插入文本的表单域，请使用元素<input>。这是单个单词和短文本的最佳选择。对于较长的文本，请使用<textarea>元素。这允许多行文本，并使用户更容易看到他们输入的文本，因为该元素是可滚动和可调整大小的。

<textarea>默认可调整大小。您可以使用 CSS 和属性resize禁用调整大小：resize: none。但是，人们可能希望一次看到他们输入的所有文本。至少保留垂直调整<textarea>大小的选项。resize: vertical确保用户可以垂直但不能水平调整大小。详细了解为什么禁用调整<textarea>大小不利于用户体验。

确保用户以正确的格式输入数据

你想帮助用户填写电话号码吗？将<input>的type属性更改type="tel"。使用移动设备的用户会得到一个经过调整的屏幕键盘，确保他们可以更快、更轻松地输入电话号码。

对于电子邮件地址，请使用type="email"。  再次显示经过调整的屏幕键盘。使用required属性使表单字段成为必填字段。提交表单时，浏览器会检查输入是否有值并且是否有效：在本例中，它是一个格式正确的电子邮件地址。

详细了解不同的input type。

帮助用户填写日期

你想什么时候开始你的下一次旅行？为了帮助用户填写日期，请使用type="date"。  一些浏览器将格式显示为占位符，例如yyyy-mm-dd，演示如何输入日期。

所有现代浏览器都提供自定义界面，用于以日期选择器的形式选择日期。

帮助用户选择一个选项

为确保用户可以选择或取消选择一个可能的选项，请使用type="checkbox".  你想提供多种选择吗？根据您的用例，有多种选择。首先，如果用户只能选择一个选项，让我们看看可能的解决方案。

您可以使用具有相同值的多个<input>元素，type="radio[jcode](https://code.juejin.cn/pen/7215426876095856677)"且name值相同。用户一次看到所有选项，但只能选择一个。

另一种选择是使用<select>元素。用户可以滚动浏览可用选项列表并选择一个。

对于某些用例，例如选择一个数字范围，类型为range的<input>可能是一个不错的选择。

您是否需要提供选择多个选项的能力？使用具有multiple属性的<select>元素或多个具有checkbox属性的<input>元素。

确保用户可以填写不同类型的数据

特定用例有更多输入类型。

有一种类型为color的<input>，可以在支持的浏览器中为用户提供颜色选择器，还有其他各种类型。为确保用户可以输入密码，请使用<input>的type="password"。输入的每个字符都被星号（“*”）或点（“•”）遮盖，以确保无法读取密码。

您要在表单数据中包含唯一的安全令牌吗？<input>与type="hidden"一起使用。<input>类型为hidden的值不能被用户看到或修改。

要使用户能够上传和提交文件，请使用<input>的type="file"。

帮助用户填写您的表单

表单元素和类型有很多，但您应该选择哪一种呢？

对于某些用例，选择合适的元素和类型非常简单，例如<input type="date">。对于其他人，视情况而定。例如，你可以用type="checkbox"或者一个<select>元素使用多个<input>元素。了解有关在列表框和下拉列表之间进行选择的更多信息。

通常，请确保与真实用户一起测试您的表单，以找到最佳的表单元素和类型。

资源

深入学习表单属性

了解有关表单属性的所有信息：如何修改屏幕键盘的布局、激活内置验证等。

HTML 元素属性可以增强您的<form>表单控件。

帮助用户填写表单控件

为了使用户更容易填写表单，请为您的<input>元素使用适当的type属性。

浏览器显示适合该类型的用户界面，例如<input>类型为date的日期选择器。移动设备上的浏览器显示经过调整的屏幕键盘，例如电话号码键盘type="tel"。

某些<input>类型还会在提交表单时更改元素的验证规则。<input type="url">，例如，仅当它不为空且值为 URL 时才有效。

确保用户输入数据

在触摸设备上提供适当的屏幕键盘有不同的属性。如上所述，第一个选项是使用type属性。

另一个选项是Android 和 iOSinputmode上支持的属性。与属性相反，属性仅更改提供的屏幕键盘，而不更改元素本身的行为。如果您想要保留默认用户界面和<input>的默认验证规则，但仍想要一个优化的屏幕键盘，则使用inputmode是一个不错的选择。

警告

type="number"仅用于增量字段，例如产品数量。type="number"浏览器显示向上/向下箭头，对于电话号码、支付卡或帐号没异义义。对于电话号码，请使用type="tel"。对于其他数字，使用inputmode="numeric"获取数字屏幕键盘。

1,.avif

您可以使用enterkeyhint属性更改屏幕键盘上的Enter键。例如，enterkeyhint="next"或enterkeyhint="done"将按钮标签更改为适当的图标。这有助于让用户更清楚提交当前表单时会发生什么。

2..avif

警告

使用autofocus属性自动聚焦表单控件可能会使人感到困惑，包括屏幕阅读器用户和有认知障碍的人。因此，我们的建议是您不应使用该autofocus属性。

确保用户可以提交表单

比方说，您填写了一个<form>，单击提交按钮，但没有任何反应。问题可能是该按钮已被该disabled属性禁用。在表单有效之前禁用提交按钮是一种常见的模式。

从理论上讲，这听起来很合理，但您不应该在等待完整有效的用户输入时禁用提交按钮。相反，在输入无效数据时突出显示，并在用户提交表单时向用户突出显示有问题的字段。

但是，您可能希望在表单成功提交但尚未处理后禁用“提交”按钮。 了解有关禁用按钮的更多信息。

通过显示他们之前输入的数据来帮助用户

假设您有一个包含多个步骤的结账表单。当用户返回上一步时，您如何确保之前输入的值仍然存在？使用value属性显示已完成的值。

<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text" />

有多种方法可以在 JavaScript 中检索表单控件的值。您可以使用value属性，也可以使用getAttribute('value')访问该值。有一个很大的区别，value属性总是返回当前值，而使用getAttribute()总是返回初始值。

试试吧！更改名称字段的文本并观察控制台。请注意value属性如何返回当前可见的文本，同时getAttribute('value')始终返回初始值。

详细了解 DOM 属性和 DOM 属性之间的区别。

要获取所有表单控件值，请使用FormData。FormData对象是一组表示表单控件的键值对，格式与submit()方法相同。

对于<input>类型为checkbox或radio的元素使用checked属性。如果用户选择了一个选项，则添加它，否则将其删除。

确保用户理解预期的格式

placeholder属性的值是对预期信息类型的提示。

<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin" />

这可能会使用户感到困惑，因为为什么表单控件看起来已经被预填充似乎不合逻辑。此外，添加占位符会使您很难看出哪些表单字段仍需要填写。此外，占位符文本的默认样式可能难以阅读。

通常，使用placeholder属性时要小心，不要使用placeholder属性来解释表单控件,用<label>元素代替它。详细了解为什么应考虑避免使用placeholder属性。

向用户提示预期信息类型的更好方法是在表单控件下方使用额外的 HTML 元素来添加解释或示例。

确保表单控件已准备好进行验证

有多种 HTML 属性可用于激活内置验证。使用required属性来防止提交空字段。可以使用type属性强制执行其他验证。例如，input类型type="url"的值必须是一个 URL。

要确保用户输入最少数量的字符，请使用minlength属性。要禁止任何超过最大字符数的值，请使用maxlength属性。对于诸如<input type="number">之类的数字输入类型，请改用min和max属性。

资源

表单样式

使用 CSS 设计表单样式，同时确保它们对每个人都可用和可读。

帮助用户在他们喜欢的浏览器中使用您的表单

为确保尽可能多的人可以访问您的表单，请使用为该任务构建的元素：<input>、<textarea>、<select>和<button>。这是可用表单的基线。

默认的浏览器样式看起来不太好！让我们改变它。

渐进增强是一种为尽可能多的用户提供基本内容和功能基线的策略。它可确保用户在现代浏览器上获得最佳体验。您从内容开始，使用语义 HTML，添加面向未来的 CSS，并在最后一步添加健壮的 JavaScript。

确保表单控件对每个人都是可读的

大多数浏览器中表单控件的默认字体太小。为确保您的表单控件可读，请使用 CSS 更改字体大小：

增加font-size和line-height提高可读性。

.form-element {
  font-size: 1.3rem;
  line-height: 1.2;
}

使用font-size相对单位，例如em（相对于元素父元素的基本大小）或rem（相对于文档的基本大小）以确保大小响应用户偏好。用户可以更改基数font-size，所有具有相关性的元素font-size都会自动调整。对于line-height使用无单位值（例如1.5, ）来保持相对于字体大小的行高。详细了解CSS 中的像素与相对单位。

帮助用户浏览您的表单

下一步，更改表单的布局，增加表单元素的间距，以帮助用户了解哪些元素属于一起。

CSSmargin属性增加了元素之间的空间，padding属性增加了元素内容周围的空间。

对于一般布局，使用Flexbox或Grid。了解有关CSS 布局方法的更多信息。

确保表单控件看起来像表单控件

通过为您的表单控件使用易于理解的样式，使人们可以轻松填写您的表单。例如，<input>带有实线边框的样式元素。

许多浏览器的默认<input>边框颜色太浅。缺乏对比度会使元素难以看清，尤其是在移动设备上。在 Android 上的 Chrome 中打开此演示以查看默认样式。

input,
textarea {
  border: 1px solid;
}

帮助用户提交你的表单

考虑使用<button>的<background>来匹配你的网站风格，并覆盖或删除默认的边框风格。

在现代浏览器中，您可以设置<button>的样式像任何其他元素一样，因此您应该始终使用语义化的<button>, 或<input type="submit">。使用为工作构建的元素提供了许多内置的可用性和可访问性优势，这是使用通用元素（例如<div>。您将了解其他模块中的内置功能。了解更多关于恢复默认样式的<button>信息。

帮助用户了解当前状态

浏览器使用默认样式给:focus。您可以覆盖样式以使:focus颜色与您的品牌相匹配。

button:focus {
  outline: 4px solid green;
}

资源

样式化表单控件

学习如何使用 CSS 实现表单控件。

在本模块中，您将学习如何设置表单控件的样式，以及如何匹配您的其他站点样式。

警告

样式化 HTML 表单控件可能是一个挑战，但您仍应尽可能使用内置元素。诸如<input>和<button>之类的元素在浏览器和平台上得到广泛支持，并且具有内置的功能来增强可用性和可访问性，您无需自己实现这些功能。使用 <div>并不能提供这些好处。

帮助用户选择一个选项

元素

元素的默认样式<select>看起来不太好，并且浏览器之间的外观不一致。

首先，让我们改变箭头。

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url(arrow.png);
  background-repeat: no-repeat;
  background-position: right 0.7em top 50%, 0 0;
  background-size: 0.65em auto;
}

要删除元素的默认箭头<select>，请使用 CSSappearance属性。要显示您选择的箭头，请将箭头定义为background。

appearance为确保最佳的跨浏览器兼容性，您还必须包含:-moz-appearance和的前缀版本-webkit-appearance。了解有关供应商前缀的更多信息。

您还应该将<select>元素的font-size至少更改为1rem（对于大多数浏览器而言，默认值为 16px）。这样做将防止在表单控件获得焦点时在 iOS Safari 上进行页面缩放。

当然，您也可以更改元素颜色以匹配您的品牌颜色。:hover在为间距、和添加更多样式后:focus，元素的外观<select>现在在浏览器之间保持一致。

在下面的演示中看到这个，来自Styling a Select Like It's 2019

元素呢<option>？<option>元素是所谓的替换元素，其表示超出了 CSS 的范围。在撰写本文时，您无法为该<option>元素设置样式。

有一项正在进行的提案允许 Web 开发人员设计和扩展内置 Web UI 控件，包括<select>和<option>元素。这使将来设计表单控件的样式变得更加容易。详细了解开放式用户界面。

复选框和单选按钮

不同浏览器的<input type="checkbox"> <input type="radio">外观不同。

在各种浏览器上打开演示，看看区别。让我们看看如何确保复选框和单选按钮与您的品牌匹配并且在跨浏览器中看起来相同。

过去，开发人员无法直接设置<input type="checkbox">和<input type="radio">控件样式。复选框和单选按钮现在可以通过它们的伪元素来设置样式。或者可以使用以下替换技术为这些元素创建自定义样式。

首先，在视觉上隐藏默认的复选框和单选按钮。

input[type='radio'],
input[type='checkbox'] {
  position: absolute;
  opacity: 0;
}

重要的是position: absolute和opacity: 0结合使用，而不是display: none或visibility: hidden以便控件仅在视觉上隐藏。这将确保它们仍然被浏览器的可访问性树暴露。请注意，可能需要进一步的样式来确保视觉上隐藏的表单控件保持位于其替换元素的“顶部”。这样做将有助于确保将鼠标悬停在这些元素之一上时，当屏幕阅读器打开时，或者当使用启用了屏幕阅读器的触摸设备时，如果通过触摸浏览，则可以发现视觉上隐藏的控件，并且屏幕阅读器的可见焦点指示器将通常出现在控件在屏幕上呈现的位置。

要显示您的自定义复选框和单选按钮，您有不同的选择。您使用::beforeCSS 伪元素和 CSSbackground属性，或使用内联 SVG 图像。

input[type='radio'] + label::before {
  content: '';
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type='radio']:checked + label::before {
  background: black;
}

如何将站点的颜色用于表单控件

您想用一行代码将您的站点样式带入窗体控件吗？您可以使用accent-colorCSS 属性来实现此目的。

checkbox {
  accent-color: orange;
}

在撰写本文时，只有 Chrome、Firefox 和 Edge 支持accent-color。为确保跨浏览器兼容性，您可能希望使用变通方法，直到accent-color所有平台都支持它。

资源

JavaScript

了解如何使用 JavaScript 来增强您的表单。

响应表单事件

您可以使用 JavaScript 响应表单上的用户交互、显示其他表单字段、提交表单等等。

帮助用户填写额外的表单控件

想象一下，您构建了一个调查表。在用户选择一个选项后，您希望显示一个附加选项<input>以询问与选择相关的特定问题。你怎么能只显示相关<input>元素？

只有当相关的<input type="radio">当前被选中时，才可以使用 JavaScript 显示<input>。

if (event.target.checked) {
  // show additional field
} else {
  // hide additional field
}

警告

如果 JavaScript 不可用，请确保您的表单仍然可用。所有用户的核心体验应该是相同的，JavaScript 仅用作增强功能。

让我们看一下演示的JavaScript 代码。你注意到aria-controls和aria-expanded属性了吗？使用这些ARIA 属性可帮助屏幕阅读器用户了解何时显示或隐藏附加表单控件。

警告

<input type="radio">的aria-expanded属性不是每个屏幕阅读器都能正确显示的。

确保用户可以在不离开页面的情况下提交表单

假设您有一个评论表单。当读者添加评论并提交表单时，如果他们无需刷新页面即可立即看到评论，那将是理想的选择。

为此，监听事件onsubmit，然后使用event.preventDefault()以防止默认行为，并使用Fetch API发送FormData。

FormData是一组表示表单字段及其值的键值对。您可以将所有表单域添加到该FormData对象，或者只发送一些表单域及其值。

后端脚本可以检查POST请求是来自浏览器(使用表单元素的action属性，其中method="POST")还是来自 JavaScript，例如fetch()请求。

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
  // return JSON
} else {
  // return HTML
}

总是通知屏幕阅读器用户动态内容的变化。在 HTML 中添加带有aria-live="polite"属性的元素，并在更改后更新元素的内容。例如，在用户提交评论后，将文本更新为“您的评论已成功发布”。

了解有关 ARIA 实时区域的更多信息。

使用 JavaScript 验证

确保错误消息符合您的网站风格和基调

默认错误消息的措辞因浏览器而异。您如何确保向所有用户显示相同的消息，并且该消息与您网站的风格和基调保持一致？使用Constraint Validation API 的 setCustomValidity()方法来定义您自己的错误消息。

如果您有一个多语言网站，请务必翻译和本地化您的错误消息。

确保用户实时收到有关错误的通知

用于表单验证的内置 HTML 功能非常适合在将数据发送到后端之前通知用户无效的表单字段。在用户离开表单域时立即通知他们不是很好吗？

监听当元素失去焦点时触发的blur事件，并使用ValidityState接口检测表单控件是否无效。

确保用户可以看到他们输入的密码

<input type="password">输入的文本默认是隐藏的，以尊重用户的隐私。帮助用户输入他们的密码，通过一个<button>来切换输入文本的可见性。

试用演示。使用Show Password <button>切换输入文本的可见性。这是如何运作的？单击Show Password，将密码字段的type属性从type="password"更改为type="text"，<button>文本更改为Hide Password。

如果密码当前显示或隐藏，要通知屏幕阅读器用户，请使用带有aria-live="polite"的隐藏元素，并相应地更改其文本。重要的是要让屏幕阅读器用户知道何时显示密码，并且对正在查看他们屏幕的其他人可见。

<span class="visually-hidden" aria-live="polite">
  <!-- Dynamically change this text with JavaScript -->
</span>

Microsoft Edge 显示了一个内置的密码显示控件<input type="password">。  为防止有两个显示按钮，隐藏内置控件：css ::-ms-reveal { display: none } 了解有关自定义密码显示按钮的更多信息。

了解有关实现显示密码选项的更多信息。

资源

身份

了解如何构建安全且易于访问的注册表单和登录表单，并了解如何帮助用户更改其帐户设置。

警告

就隐私和安全而言，用户帐户身份验证是一个复杂的问题。为了保证用户账户的安全，最好使用第三方身份提供商，而不是构建自己的安全认证系统。详细了解帐户身份验证和密码管理的最佳实践。

帮助用户注册

注册表单通常是与您网站上的表单的第一次交互。良好的注册表单设计至关重要，安全的表单也必不可少。

仅在您确实需要时才需要注册。如果只想在导航之间存储信息，请考虑使用客户端存储。对于结帐表单，默认添加客户结帐。您可以在新客户完成购买后或输入详细地址后询问他们是否要注册。

让我们看一下注册表单，以及如何帮助用户在您的网站上注册。

注册表单保持最小化，只显示创建帐户所需的表单控件。不要为了帮助用户获得正确的帐户详细信息而重复使用表单控件。改为发送确认电子邮件。

帮助用户填写他们的账户信息

您可以使用适当的autocomplete属性帮助用户填写他们的帐户详细信息。电子邮件字段使用autocomplete="email"和新密码字段使用autocomplete="new-password"。

警告

不要禁止粘贴到密码字段。这对用户来说很烦人，鼓励使用易于记忆且安全性较低的密码，这使得密码管理器更难建议和自动填充安全密码。详细了解为什么应始终允许粘贴密码。

确保您注册表单是安全的

切勿以纯文本形式存储或传输密码。确保对密码进行加密和散列处理——不要尝试发明自己的散列算法。

提供多重身份验证，尤其是当您存储个人或敏感数据时。SMS OTP 最佳实践和使用 WebAuthn 启用强身份验证解释了如何实施多重身份验证。

确保用户不使用泄露的密码。例如，使用Have I Been Pwned中的 API 来检测泄露的密码，并建议您的用户填写不同的新密码，或者在他们的密码泄露时警告他们。

帮助用户登录

让我们看看如何构建登录表单以确保用户可以轻松登录您的网站。

使注册和登录按钮的位置明显。确保您的表单可在触摸设备上使用：

  • 按钮的点击目标大小至少为 48px。
  • 您的表单元素font-size足够大（20px在移动设备上差不多）。
  • 表单控件之间有足够的空间 ( margin)，并且输入足够大（至少padding: 15px在移动设备上使用）。

帮助用户填写邮箱和密码

帮助浏览器和密码管理器自动填充帐户详细信息。电子邮件字段使用autocomplete="email"和新密码字段使用autocomplete="new-password"。

为了帮助用户手动填写他们的帐户详细信息，请使用type="email"电子邮件字段在移动设备上显示适当的屏幕键盘。

将required属性用于您的电子邮件和密码字段，以便您可以在用户提交表单时警告无效值。考虑使用来帮助用户在输入无效数据后立即更正无效数据，而不是等待表单提交。

确保用户可以看到他们输入的密码

您为<input type="password">填写的文字默认是隐藏的，以尊重用户的隐私。帮助用户输入他们的密码，通过一个按钮来切换输入文本的可见性。

帮助用户更改他们的帐户设置

确保用户可以更改每个帐户设置，包括电子邮件地址、密码和用户名。

使您存储的数据透明化，并帮助用户随时下载他们的所有个人数据。确保用户可以根据需要删除他们的帐户。诸如此类的账户管理功能在某些地区可能是法律要求。

确保用户可以更新他们的密码

让用户更容易更新他们的密码。

在更改密码之前请用户提供当前密码，并发送一封关于密码更改的电子邮件，并提供恢复和锁定帐户的选项。

添加请求新密码的选项，并考虑提供一个.well-knownURL 。用于请求新密码。

资源

付款方式

通过构建更好的付款方式来提高转化率。

该模块是关于付款表格的，并没有解释如何在您的站点上执行交易。您可以通过实施Web Payments或使用第三方支付平台来添加支付功能。

付款表格通常是完成购买前的最后一步。为了最大限度地提高转化率，请确保您的付款方式易于使用且安全。

确保用户知道要填写什么

使您的付款表单尽可能简单，只显示必填字段。

您无需为卡片类型添加选择器——支付处理器会根据卡号自动计算出卡类型。但是，您可能希望通过根据输入的号码指示卡类型来增强您的卡号字段。您可以使用正则表达式来测试卡类型，并在卡号<input>旁边显示品牌标志。

注明支付金额。提交按钮是理想的选择。

<button>Pay $300.00</button>

为<label>元素使用自解释的文字。例如，使用“安全代码”，而不是仅由某些品牌使用的首字母缩略词，如“CVV”。

每个姓名和卡号字段使用单个<input>。让用户保持打字模式，不要强迫他们在多个姓名或卡号字段之间跳转来浪费他们的时间。

帮助用户输入他们的付款细节

为了最大限度地提高转化率，请确保用户可以尽快填写您的付款表单。

使用inputmode="numeric"用于卡号和安全码字段，以显示用于输入数字的优化屏幕键盘。

autocomplete为您的付款表单控件添加适当的值，以确保浏览器提供自动填充功能。autocomplete="cc-name"用于姓名、autocomplete="cc-number"用于卡号和autocomplete="cc-exp"用于有效期。

您可以使用输入掩码帮助用户填写到期日期的正确格式。与真实用户进行测试，仅使用您的键盘和屏幕阅读器（例如 Mac 上的VoiceOver 或 Windows 上的NVDA）以确保输入仍然可访问。

确保用户以正确的格式输入数据

为每个<input>添加required来确保用户填写完整的表单。

支付卡安全码可以是三位或四位数字。使用minlength="3"或maxlength="4"只允许三位和四位数字。

确保用户只输入卡号和安全码的数字。pattern="[0-9 ]+"用于允许用户在输入卡号时包含空格，因为这是数字在实体卡上的显示方式。

支付卡品牌使用不同的格式，例如卡号和安全码。总是用你支持的每种卡类型测试你的支付表单。确保您的验证规则考虑了所有可能的格式。

资源

地址表单

帮助用户快速轻松地填写地址表。

填写地址可能既费时又令人沮丧。什么是地址行 2？您可能没有姓氏，那么您应该在姓氏字段中输入什么？避免这些混淆并帮助用户填写地址表。

确保您的地址表易于使用

许多表单使用一个字段作为名字，一个字段作为姓氏。但是，有些人没有姓氏，或者名字没有两部分，那么姓氏字段应该怎么填写呢？对名称字段使用单个<input>。了解有关处理不同名称格式的更多信息。

警告

切勿将允许的名称字符限制为仅限拉丁语。姓名允许使用Unicode 字符，以确保每个人都可以填写自己的姓名。

还可以使用单个<input>作为街道地址——不是每个地址都有街道号。

根据研究，地址行 2可能会让用户感到困惑。考虑使用<textarea>作为整个地址，或将地址第 2 行字段隐藏在 reveal <button>后面。

小心表单控件的描述。例如，美国的用户说ZIP，在英国的说postcode。使用<label for="zip">ZIP or postal code (optional)</label>确保用户知道要输入的数据。将邮政编码字段设为可选——并非每个地址都有邮政编码。

您可以使用Place Autocomplete或Loqate等服务来帮助用户查找地址。考虑避免邮政编码地址查询，并且只提供地址查询作为一个额外的选项：不要强迫人们使用它。

帮助用户输入他们的地址

autocomplete属性可以帮助用户重新输入他们的地址：

  • autocomplete="name"
  • autocomplete="street-address"
  • autocomplete="postal-code"
  • autocomplete="country"

您可以定义多个用空格分隔的值用于autocomplete。假设您有一个包含送货地址的表单和另一个包含账单地址的表单。要告诉浏览器账单地址的邮政编码，您可以使用autocomplete="billing postal-code"。对于送货地址，用shipping作为第一个值。

使用enterkeyhint属性更改屏幕键盘上Enter键的标签。enterkeyhint="done"用于最后一个表单控件，以及enterkeyhint="next"用于其他表单控件。

资源

结论和后续步骤

更多资源可帮助您采取后续步骤。

恭喜！你已经走到了尽头。到目前为止，您已经了解了很多有关表单的知识，希望您现在可以更轻松地构建自己的表单。

下一步是什么？最好的学习方法之一是尝试您所学的内容：实现您自己的 HTML 表单。要继续构建您的 HTML 表单知识，这里有一些额外的资源可供探索：

其他资源

avatar
文章
阅读
粉丝