HTML 表单属性
表单属性控制表单的行为和提交方式。了解这些属性对于创建功能完善的用户表单至关重要。
action 属性
指定表单提交后数据发送到的URL地址。
<form action="/submit">
<!-- 表单内容 -->
</form> action 值
action="submit.php"- 提交到PHP文件action="/api/users"- 提交到API端点action="mailto:email@example.com"- 通过邮件发送action=""- 提交到当前页面
method 属性
指定HTTP请求方法。
| 方法 | 特点 | 使用场景 |
|---|---|---|
| GET | 数据在URL中，明文传输，有长度限制 | 搜索、查询等只读操作 |
| POST | 数据在请求体中，更安全，无长度限制 | 登录、注册、文件上传等 |
<form action="/submit" method="GET">
<form action="/submit" method="POST"> target 属性
指定表单提交后响应的显示位置。
<!-- 在新窗口打开 -->
<form target="_blank">
<!-- 在当前窗口（默认） -->
<form target="_self"> enctype 属性
指定表单数据的编码类型。
<!-- 默认值，url编码 -->
<form enctype="application/x-www-form-urlencoded">
<!-- 文件上传必须 -->
<form enctype="multipart/form-data"> 重要
如果有文件上传字段 <input type="file">，必须设置 enctype="multipart/form-data"
autocomplete 属性
启用或禁用浏览器的自动完成功能。
<form autocomplete="on">
<form autocomplete="off"> novalidate 属性
禁用浏览器默认的表单验证。
<form novalidate> 交互式示例
在下面的代码编辑器中，尝试创建不同属性的表单：
💻 在线代码编辑器
👁️ 预览效果
最佳实践
建议
- 敏感信息使用POST方法
- 文件上传必须设置 enctype="multipart/form-data"
- 使用HTTPS保护表单提交
- 同时使用客户端和服务端验证
- 为长表单添加autocomplete让用户省力