表单属性详细介绍

HTML 元素属性可以增强您的 <form> 和表单控件。

帮助用户填写表单控件

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

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

某些 <input> 类型还会在元素提交表单时更改其验证规则。例如，<input type="url"> 仅在不为空且值为网址时才有效。

确保用户输入数据

有多个属性可用于在触摸设备上提供适当的屏幕键盘。第一个选项是使用 type 属性（如上所述）。

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

注意 ：type="number" 只能用于商品数量等增量字段。浏览器会显示 type="number" 的向上/向下箭头，这对电话号码、支付卡或账号没有任何意义。对于电话号码，请使用 type="tel"。对于其他数字，请使用 inputmode="numeric" 获取数字屏幕键盘。

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

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

确保用户可以提交表单

假设您填写了 <form>，点击 Submit 按钮，但没有任何反应。 问题可能是通过 disabled 属性停用了该按钮。 停用 Submit 按钮直至表单生效是一种常见模式。

从理论上讲，这听起来是合理的，但在等待完成且有效的用户输入时，您不应停用 Submit 按钮。正确做法是，在用户输入无效数据时突出显示，在用户提交表单时向其突出显示有问题的字段。

但是，如果表单成功提交但尚未得到处理，您可能希望停用 Submit 按钮。详细了解已停用的按钮。

显示用户之前输入的数据，为用户提供帮助

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

<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">

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

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

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

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

对于 checkbox 或 radio 类型的 <input> 元素，请使用 checked 属性。 如果用户选择了某个选项，则添加此字段，否则将其移除。

确保用户了解预期格式

placeholder 属性的值用于提示需要什么类型的信息。

<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin">

这可能会让用户感到困惑，因为表单控件已预填充似乎似乎不合逻辑。此外，添加占位符会使用户很难查看哪些表单字段仍然需要填写。 此外，占位符文本的默认样式可能很难看懂。

一般情况下，请谨慎使用 placeholder 属性，切勿使用 placeholder 属性解释表单控件。 请改用 <label> 元素。 详细了解为何应考虑避免使用 placeholder 属性。

一种更好的方法是使用表单控件下方的额外 HTML 元素来添加说明或示例，以便让用户了解需要哪些类型的信息。

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

有各种 HTML 属性可用于启用内置验证。 使用 required 属性防止提交空字段。 您可以使用 type 属性强制执行其他验证。例如，必需 <input> 的值 type="url" 必须是网址。

为了确保用户输入最少字符数，请使用 minlength 属性。如需禁止任何值超过字符数上限，请使用 maxlength 属性。 对于数字输入类型（例如 <input type="number">），请改用 min 和 max 属性。

详细了解验证：帮助用户在表单中输入正确的数据。

检查您的掌握程度

测试您对表单属性知识的掌握情况

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

enterkey

再试一次！

enterkeyhint

🎉

enterkeytext

再试一次！

enterkeylabel

再试一次！

value 属性与 getAttribute('value') 有什么区别？

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

🎉

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

再试一次！

没有区别。

再试一次！

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

再试一次！

资源

• <input> HTML 属性
• 全局 HTML 属性