在第一部分中，您学习了如何构建基本表单。本节全部是关于最佳实践。在本模块中，了解用户体验 (UX)，以及为何良好实现的用户界面 (UI) 能够带来巨大的改变。
创建用户友好的界面
填写表单可能既耗时又令人沮丧。但不必如此。为了保证出色的用户体验，请确保用户界面直观。确保您提供最佳的表单结构和图形设计（布局、间距、字体大小和颜色）以及符合逻辑的用户界面（例如标签措辞和适当的输入类型）。让我们看一下如何改进您的表单并使其易于使用。
标签
您还记得 <label> 元素的用途吗？标签描述表单控件。可见且编写良好的标签有助于用户理解表单控件的用途。
为每个表单控件使用标签
您想向表单添加新的表单控件吗？首先为新字段添加标签。这样，您就不会忘记添加它。
首先添加标签还有助于您专注于表单的目标——我在这里需要什么数据？一旦明确了这一点，您就可以专注于帮助用户输入数据并完成表单。
标签措辞
假设您要描述电子邮件字段。您可以按如下方式进行描述
<label for="email">Enter your email address</label>
或者您可以像这样描述它
<label for="email">Email address</label>
您选择哪种描述？
对于我们的示例，首选措辞“电子邮件地址”，因为简短的标签更易于扫描、减少视觉混乱，并帮助用户更快地了解需要什么数据。
标签位置
使用 CSS，您可以将标签放置在表单控件的顶部、底部、左侧和右侧。您将其放置在哪里？
研究表明，最佳实践是将标签放置在表单控件上方，以便用户可以快速扫描表单并查看哪个标签属于哪个表单控件。
设计表单
良好的表单设计可以显着降低表单放弃率。通过使用适当的元素和输入类型来帮助用户输入数据。您可以从各种表单元素和输入类型中进行选择。为了提供最佳的用户体验，请为您的用例使用最合适的元素和输入类型。如果用户应填写多行文本，请使用 <textarea> 元素。如果他们需要接受您网站的条款和条件，请使用 <input type="checkbox">。
您还应该在视觉上区分不同类型的表单控件。按钮应该看起来像按钮。输入框应该像输入框。让用户轻松识别表单控件的用途。例如，如果某物看起来像链接，则单击它应该打开一个新页面，而不是提交表单。
帮助用户导航表单
花哨的布局可能很有趣，但可能会妨碍完成表单。
特别是，研究表明，最好只使用单列。用户不想花时间搜索下一个表单控件在哪里。通过使用一列，只有一个方向可遵循。
帮助用户与表单交互
为避免意外点击和单击，并帮助用户与您的表单交互，请使您的按钮足够大。按钮的建议点击目标大小至少为 48px。您还应使用 margin CSS 属性在表单控件之间添加足够的间距，以帮助避免意外交互。
表单控件的默认大小太小，实际上无法使用。您应该使用 padding 并更改默认的 font-size 来增加大小。
您可以为不同的指针设备（例如鼠标）定义不同的大小，使用 pointer CSS 媒体功能。
// 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;
}
}
了解更多关于 pointer CSS 媒体功能的信息。
在错误发生的位置显示错误
为了让用户直接找出哪个表单控件需要他们注意，请在错误消息旁边显示它们所指的表单控件。在表单提交时显示错误时，请确保导航到第一个无效的表单控件。
明确告知用户要输入的数据
确保用户了解如何输入有效数据。他们是否需要为密码输入至少八个字符？告诉他们。
<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>
如果一个字段是必填的，请使其显而易见！可访问表单的剖析解释了指示必填字段的替代方案。如果表单中的大多数字段都是必填字段，则最好指示可选字段。
如何将错误消息连接到表单控件，使其对屏幕阅读器可访问？您可以在下一个模块中了解这一点。
检查您的理解情况
测试您对设计表单的知识
您如何描述表单控件？
<description> 元素。<label> 元素。description 属性。placeholder 属性。建议的点击目标大小是多少？
您应该将错误消息放置在哪里？
<form> 的顶部。