在第一部分中，您学习了如何构建基本表单。 本部分将重点介绍最佳实践。 在本模块中，您将了解用户体验 (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> 顶部。