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