在第一部分中，您学习了如何构建基本表单。本部分主要介绍最佳实践。 在本单元中，您将了解用户体验 (UX)，以及为什么设计完善的界面 (UI) 可以带来巨大改变。
创建方便用户使用的界面
填写表单可能既耗时又令人沮丧。 不一定非要如此。 为了保证出色的用户体验，请确保界面直观明了。 确保提供最佳的表单结构和图形设计（布局、间距、字体大小和颜色）以及逻辑界面（例如标签措辞和适当的输入类型）。让我们来看看如何改进表单并使其易于使用。
标签
您还记得 <label> 元素的用途吗？
标签用于描述表单控件。
精心编写的可见标签有助于用户了解表单控件的用途。
为每个表单控件使用标签
您想在表单中添加新的表单控件吗？ 首先，为新字段添加标签。 这样，您就不会忘记添加它。
先添加标签还能帮助您专注于表单的目标 - 我需要哪些数据？ 明确这一点后，您就可以专注于帮助用户输入数据并填写表单。
标签措辞
假设您想要描述一个电子邮件地址字段。具体方法如下：
<label for="email">Enter your email address</label>
或者，您可以这样描述：
<label for="email">Email address</label>
您选择哪一条广告内容描述？
在我们的示例中，最好使用“电子邮件地址”一词，因为简短的标签更易于扫描，减少视觉上的混乱，并帮助用户更快地了解需要哪些数据。
标签位置
借助 CSS，您可以将标签放置在表单控件的顶部、底部、左侧和右侧。放置位置
研究表明，最佳实践是将标签放置在表单控件上方，以便用户快速扫描表单并查看哪个标签属于哪个表单控件。
设计表单
良好的表单设计可以显著降低表单放弃率。使用适当的元素和输入类型帮助用户输入数据。您可以从各种表单元素和输入类型中进行选择。为了提供最佳用户体验，请为您的用例使用最合适的元素和输入类型。
如果用户应填写多行文本，请使用 <textarea> 元素。如果客户需要接受您网站的条款及条件，请使用 <input type="checkbox">。
您还应该直观地区分不同类型的表单控件。 按钮应该看起来像按钮。一种输入，类似于输入。 让用户能够轻松识别表单控件的用途。 例如，如果某个内容看起来像链接，点击该链接会打开一个新页面，而不是提交表单。
帮助用户浏览表单
过于冗长的布局可能会很有趣，但可能会妨碍用户填写表单。
特别是，研究表明最好仅使用一列。用户不想花时间搜索下一个表单控件的位置。 如果使用一列，则仅需要一个方向。
帮助用户与表单交互
为避免意外点按和点击，并帮助用户与您的表单互动，请设置足够大的按钮。建议的按钮点按目标大小至少为 48 像素。您还应使用 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 媒体功能。
显示发生错误的位置
为了让用户直接找到需要注意的表单控件，请在他们引用的表单控件旁边显示错误消息。在提交表单时显示错误时，请务必导航到第一个无效的表单控件。
向用户明确输入哪些数据
确保用户了解如何输入有效数据。 他们是否需要至少输入 8 个字符的密码？告诉他们。
<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> 的顶部。