深入了解表单属性

帮助用户填写表单控件

为了让用户更轻松地填写表单，请为您的 元素使用适当的 type 属性。

浏览器会显示适合 type 的用户界面，例如类型为 date 的 的日期选择器。移动设备上的浏览器会显示经过调整的屏幕键盘，例如 type="tel" 的电话号码键盘。

某些 类型还会更改元素在其表单提交时的验证规则。例如， 仅在非空且值为 URL 时才有效。

确保用户输入数据

有不同的属性可用于在触摸设备上提供合适的屏幕键盘。第一个选项是使用上面提到的 type 属性。

另一个选项是 Android 和 iOS 上支持的 inputmode 属性。与 type 属性相比，inputmode 属性仅更改提供的屏幕键盘，而不更改元素本身的行为。如果您想保留 的默认用户界面和默认验证规则，但仍然想要优化的屏幕键盘，则使用 inputmode 是一个不错的选择。

注意： 仅将 type="number" 用于增量字段，例如产品的数量。浏览器会为 type="number" 显示向上/向下箭头，这对于电话号码、支付卡号或帐号没有意义。对于电话号码，请使用 type="tel"。对于其他数字，请使用 inputmode="numeric" 以获得数字屏幕键盘。

您可以使用 enterkeyhint 属性更改屏幕键盘上的 Enter 键。例如，enterkeyhint="next" 或 enterkeyhint="done" 会将按钮标签更改为适当的图标。这有助于使用户更清楚地了解在提交当前表单时会发生什么。

警告： 使用 autofocus 属性自动聚焦表单控件可能会使人们感到困惑，包括屏幕阅读器用户和有认知障碍的人。因此，我们的建议是您不应使用 autofocus 属性。

确保用户可以提交表单

假设您填写了 ，单击提交按钮，但没有任何反应。问题可能是按钮已通过 disabled 属性禁用。在表单有效之前禁用提交按钮是一种常见的模式。

从理论上讲，这听起来是明智的，但在等待完整且有效的用户输入时，您不应禁用提交按钮。相反，在输入无效数据时突出显示无效数据，并在用户提交表单时向用户突出显示有问题的字段。

但是，您可能希望在表单成功提交但尚未处理时禁用提交按钮。了解有关禁用按钮的更多信息。

通过显示用户先前输入的数据来帮助用户

假设您有一个包含多个步骤的结帐表单。当用户返回上一步时，您如何确保先前输入的值仍然存在？使用 value 属性显示已完成的值。

Name

有多种方法可以在 JavaScript 中检索表单控件的值。您可以使用 value 属性，也可以使用 getAttribute('value') 访问值。两者之间有一个很大的区别，value 属性始终返回当前值，而使用 getAttribute() 始终返回初始值。

亲自试用！更改姓名字段的文本并观看控制台。请注意 value 属性如何返回当前可见的文本，而 getAttribute('value') 始终返回初始值。

详细了解 DOM 属性和 DOM 属性之间的区别。

注意： 要获取所有表单控件值，请使用 FormData。FormData 对象是一组表示表单控件的键/值对，并且格式与 submit() 方法使用的格式相同。

对于类型为 checkbox 或 radio 的 元素，请使用 checked 属性。如果用户选择了某个选项，请添加它，否则请删除它。

确保用户理解预期的格式

placeholder 属性的值是关于预期信息类型的提示。

Name

这可能会使用户感到困惑，因为它可能看起来不合逻辑，为什么表单控件似乎已预先填写。此外，添加占位符可能会使查看哪些表单字段仍需要填写变得困难。此外，占位符文本的默认样式可能难以阅读。

总的来说，在使用 placeholder 属性时要谨慎，并且永远不要使用 placeholder 属性来解释表单控件。请改用 元素。详细了解为什么您应该考虑避免使用 placeholder 属性。

为用户提供关于预期信息类型的提示的更好方法是在表单控件下方使用额外的 HTML 元素来添加解释或示例。

确保表单控件已准备好进行验证

有各种 HTML 属性可用于激活内置验证。使用 required 属性来阻止提交空字段。可以使用 type 属性强制执行其他验证。例如，type="url" 的必需 的值必须是 URL。

为了确保用户输入最少数量的字符，请使用 minlength 属性。要禁止任何值超过最大字符数，请使用 maxlength 属性。对于数字输入类型，例如 ，请改用 min 和 max 属性。

了解有关验证的更多信息：帮助用户在表单中输入正确的数据。

检查您的理解程度

测试您对表单属性的了解

您可以使用哪个属性来更改屏幕键盘上 Enter 键的标签？

enterkey

再试一次！

enterkeyhint

🎉

enterkeytext

再试一次！

enterkeylabel

再试一次！

value 属性和 getAttribute('value') 之间有什么区别？

value 属性返回当前值，getAttribute('value') 返回初始值。

🎉

value 属性返回初始值，getAttribute('value') 返回当前值。

再试一次！

没有区别。

再试一次！

value 属性返回键和值，getAttribute('value') 仅返回该值。

再试一次！

资源

HTML 属性

全局 HTML 属性