表单

表单元素

表单用于提交数据,因此在设计时应尽可能的简洁。 考虑每个字段、每个数据提供的价值,你想要收集什么样的数据,想要通过数据获得什么?

在设计之前,确认:

  • 这是对我们有价值的信息吗?
  • 这是不是一条很有价值的信息,是否有必要设置为必填信息,用户不提供消息将无法继续?

通常,表单有以下元素:

标签 Label

有效的表单标签帮助用户了解要输入的文本信息。通常为了节省空间,会把占位文本用做表单标签,但并不推荐这么做,处理不当会影响表单可用性,得不偿失。

label 最佳可访性原则

  • 输入内容时(input 获取焦点进行输入时),标签必须可见。
  • 确保在输入时可以显示无障碍帮助文本。
  • 注意正确使用英文大小写(只在句子中的第一个单词和专有名词大写)。

默认值 Default values

尽可能的使用程序化帮助,检并设置默认值,以减少错误节省输入时间。无法确定输入中的值时,可以提出输入建议,配合使用自动完成辅助输入。

帮助文本 Help text

帮助文本是在用户输入时,在标签下方或输入框下方显示的帮助信息,帮助文本在聚焦输入时应始终可用。以便用户随时获得针对该信息录入的帮助。

占位文本 Placeholder text

占位文本提供了要输入内容的提示或示例。 用户在开始输入或输入数据后占位文本消失,占位文本不应包含重要信息。通常占位文本不使用标点符号。

动作 Action

表单提交

验证 Validation

表单验证,确保用户提交的表单内容符合标准。