在第一部分中,您学习了如何构建基本表单。 本部分主要介绍最佳实践。 本单元介绍用户体验 (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>
如果字段是必填字段,请明确指出!“无障碍表单详解”介绍了 必填字段。如果表单中的大部分字段都是必填字段, 表示选填字段。
如何将错误消息与表单控件相关联,以便屏幕阅读器可以读取? 您可以在下一单元中了解相关信息。
检查您的理解情况
测试您对表单设计知识的掌握情况
如何描述表单控件?
<label>
元素。placeholder
属性。description
属性。<description>
元素。推荐的点按目标尺寸是多少?
您应将错误消息放在什么位置?
<form>
的顶部。