HTML 元素属性可以增强您的 <form>
和表单控件。
帮助用户填写表单控件
为了让用户能够更轻松地填写表单,请为 <input>
元素使用适当的 type
属性。
浏览器会显示适合 type
的界面,例如 date
类型的 <input>
的日期选择器。移动设备上的浏览器会显示经过调整的屏幕键盘,例如 type="tel"
的电话号码键盘。
某些 <input>
类型还会在元素提交表单时更改其验证规则。例如,<input type="url">
仅在不为空且值为网址时才有效。
确保用户输入数据
有多个属性可用于在触摸设备上提供适当的屏幕键盘。第一个选项是使用 type
属性(如上所述)。
另一个选项是 Android 和 iOS 支持的 inputmode
属性。与 type
属性相比,inputmode
属性只会更改提供的屏幕键盘,而不会更改元素本身的行为。如果您希望保留 <input>
的默认界面和默认验证规则,但仍需要优化的屏幕键盘,则使用 inputmode
是一个不错的选择。
您可以使用 enterkeyhint
属性更改屏幕键盘上的 Enter
键。
例如,enterkeyhint="next"
或 enterkeyhint="done"
可将按钮标签更改为相应的图标。
这有助于让用户更清楚地了解提交当前表单后会发生什么。
确保用户可以提交表单
假设您填写了 <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 属性之间的区别。
对于 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')
仅返回值。