HTML表单是网页与用户交互、实现数据提交的重要载体,表单的各类属性决定了数据提交的目标、方式以及表单的行为表现,其中action和method是最核心的两个属性,下面逐一讲解这些常用属性的用法。

一、action属性
action属性用于指定表单数据提交的目标地址,当用户点击提交按钮后,表单收集到的所有数据会被发送到该地址对应的服务端接口进行处理。
action的取值可以是完整的URL,也可以是相对路径,如果不设置action属性,默认会将数据提交到当前页面本身。
<!-- 提交到指定服务端接口 --> <form action="https://ipipp.com/api/submit" method="post"> <input type="text" name="username" placeholder="请输入用户名"> <button type="submit">提交</button> </form> <!-- 提交到当前页面 --> <form action="" method="get"> <input type="email" name="email" placeholder="请输入邮箱"> <button type="submit">提交</button> </form>
二、method属性
method属性用于指定表单数据提交使用的HTTP请求方法,最常用的取值是get和post,两种方式的区别如下:
| 属性值 | 数据传递方式 | 数据长度限制 | 适用场景 |
|---|---|---|---|
| get | 数据拼接在URL后面,以查询参数的形式传递 | 有长度限制,不同浏览器限制不同 | 查询类请求,不涉及敏感数据、数据量小的场景 |
| post | 数据放在HTTP请求体中传递 | 无长度限制 | 提交敏感数据、上传文件、数据量大的场景 |
<!-- get方式提交,数据会显示在URL中 --> <form action="https://ipipp.com/search" method="get"> <input type="text" name="keyword" placeholder="搜索内容"> <button type="submit">搜索</button> </form> <!-- post方式提交,数据不会显示在URL中 --> <form action="https://ipipp.com/login" method="post"> <input type="password" name="password" placeholder="请输入密码"> <button type="submit">登录</button> </form>
三、其他常用表单属性
1. enctype属性
enctype属性用于指定表单数据提交时的编码方式,仅在method为post时生效,常用取值有三个:
application/x-www-form-urlencoded:默认值,所有字符都会进行编码,适合普通文本数据提交multipart/form-data:不对字符编码,用于上传文件场景,必须设置该值才能正确传递文件数据text/plain:纯文本编码,很少使用
<!-- 上传文件时必须设置enctype为multipart/form-data --> <form action="https://ipipp.com/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file"> <button type="submit">上传</button> </form>
2. target属性
target属性用于指定表单提交后响应内容在哪个窗口或框架中显示,常用取值和<a>标签的target取值一致:
- _self:默认值,在当前窗口打开响应
- _blank:在新窗口打开响应
- _parent:在父框架中打开响应
- _top:在顶层框架中打开响应
3. autocomplete属性
autocomplete属性用于指定表单是否开启自动填充功能,取值为on或off,设置为on时浏览器会根据用户之前输入的内容自动填充表单字段,默认值为on。
<!-- 关闭表单自动填充 --> <form action="https://ipipp.com/submit" method="post" autocomplete="off"> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <button type="submit">提交</button> </form>
四、注意事项
表单中的输入项如果要被提交,必须设置name属性,否则该字段的数据不会被传递到服务端。另外,method为get时,表单的enctype属性会被忽略,数据始终以查询参数形式传递。
实际开发中要根据场景选择合适的method和enctype属性,涉及敏感信息、文件上传的场景优先使用post方式,避免出现数据泄露或提交失败的问题。
HTML_formaction_attributemethod_attributeform_attributes修改时间:2026-06-04 18:07:23