在 HTML5 中,为了提供更丰富的表单交互和更好的用户体验,引入了一系列新的表单属性。以下是对这些新增属性的具体介绍和示例。
1. autocomplete
autocomplete 属性用于控制浏览器是否可以自动完成表单数据。它接受以下值:
on:启用自动完成。off:禁用自动完成。
<input type="text" name="username" autocomplete="on">
2. autofocus
autofocus 属性可以指定页面加载时哪个表单元素应该自动获得焦点。
<input type="text" name="username" autofocus>
3. form
form 属性允许表单元素与另一个表单元素关联,即使它们不在同一个 HTML 文件中。这通过使用 form 属性的 ID 来实现。
<form id="myForm">
<input type="text" name="username">
</form>
<input type="submit" form="myForm">
4. formaction
formaction 属性允许用户覆盖表单的提交 URL。
<form action="default-url.com">
<input type="submit" formaction="new-url.com">
</form>
5. formenctype
formenctype 属性允许用户覆盖表单数据的编码类型。
<form enctype="application/x-www-form-urlencoded">
<input type="submit" formenctype="multipart/form-data">
</form>
6. formmethod
formmethod 属性允许用户覆盖表单数据的提交方法(GET 或 POST)。
<form method="get">
<input type="submit" formmethod="post">
</form>
7. formnovalidate
formnovalidate 属性允许用户取消 HTML5 表单验证。
<form>
<input type="submit" formnovalidate>
</form>
8. formtarget
formtarget 属性允许用户覆盖表单提交后页面跳转的目标窗口或框架。
<form target="_blank">
<input type="submit">
</form>
9. min 和 max
min 和 max 属性用于指定输入字段的数值范围。
<input type="number" name="age" min="18" max="99">
10. multiple
multiple 属性允许用户在文件输入字段中选择多个文件。
<input type="file" name="files" multiple>
11. pattern
pattern 属性允许使用正则表达式来验证输入字段的值。
<input type="text" name="username" pattern="^[a-zA-Z0-9]*$">
12. placeholder
placeholder 属性为输入字段提供一个占位符,以提示用户输入。
<input type="text" name="username" placeholder="Enter your username">
13. readonly
readonly 属性指定字段为只读,用户不能修改。
<input type="text" name="username" readonly>
14. required
required 属性指定字段为必填,用户必须填写。
<input type="text" name="username" required>
15. step
step 属性允许指定数值字段的合法数字间隔。
<input type="number" name="step" step="0.5">
16. type
type 属性扩展了新的输入类型,如 email、tel、url、date、month、week、time、datetime、datetime-local 等。
<input type="email" name="email">
<input type="tel" name="phone">
<input type="url" name="website">
<input type="date" name="birthdate">
这些新增的表单属性极大地增强了 HTML5 的表单功能,为开发者提供了更多的控制力和灵活性。
