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