news 2026/4/15 19:45:23

那在HTML中,action是什么

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
那在HTML中,action是什么

在 HTML 中,action<form>(表单)元素的一个属性,用于指定表单提交时数据发送的目标 URL


基本语法

<form action="目标地址" method="请求方法"> <!-- 表单内容 --> </form>

作用说明

  • 当用户点击提交按钮(如<input type="submit"><button type="submit">)时,浏览器会将表单数据发送到action属性指定的 URL。
  • 若未设置action,默认提交到当前页面 URL(即刷新当前页)。

示例

1. 提交到服务器接口

<form action="/submit-form" method="POST"> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <button type="submit">登录</button> </form>

用户点击“登录”后,数据会被 POST 请求发送到/submit-form


2. 使用完整 URL(跨域提交)

<form action="https://api.example.com/register" method="POST"> <input type="email" name="email" required> <button type="submit">注册</button> </form>

3. 不设置action(默认行为)

<form method="GET"> <input type="text" name="search"> <button type="submit">搜索</button> </form>

表单提交时会刷新当前页面,并将数据附加到 URL 查询参数中(如?search=关键词)。


配合属性

  • method:指定 HTTP 请求方式(GETPOST)。
  • enctype:指定表单数据编码方式(如上传文件时用multipart/form-data)。

与 JavaScript 结合

即使使用 JavaScript 处理表单(如 AJAX),保留action有助于语义化和降级兼容(即 JS 失效时仍可提交):

<form action="/backup-submit" method="POST" onsubmit="handleSubmit(event)"> <input type="text" name="message"> <button type="submit">发送</button> </form>

总结

属性作用默认值
action表单提交的目标 URL当前页面 URL
method请求方式(GET/POST)GET
enctype数据编码格式application/x-www-form-urlencoded

核心理解action告诉浏览器:“把数据送到哪儿去”。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/13 8:52:27

AI一键生成Gradle国内镜像配置,告别手动修改

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个AI辅助工具&#xff0c;能够根据用户输入的Gradle项目信息&#xff0c;自动生成适用于国内镜像的配置文件。工具应支持自动检测当前Gradle版本&#xff0c;推荐最优的国内…

作者头像 李华
网站建设 2026/4/11 23:06:29

人机通信中的“非”数学理论

在1949年的一篇神文中&#xff0c;瓦伦韦弗&#xff08;机器翻译的鼻祖&#xff0c;数学家&#xff0c;二战时帮助防空与轰炸&#xff0c;撰写电磁场教科书&#xff0c;担任洛克菲勒基金会主任&#xff0c;投资医学和生物领域&#xff0c;并提出分子生物学&#xff09;受香农信…

作者头像 李华
网站建设 2026/4/14 16:34:28

人机:交互~协同~融合

人机关系的演进是人类与技术互动的历史缩影&#xff0c;其发展轨迹大致可分为交互&#xff08;Interaction&#xff09;、协同&#xff08;Collaboration&#xff09;、融合&#xff08;Integration&#xff09;三个阶段。这一过程不仅是技术的迭代&#xff0c;更是人类对自身能…

作者头像 李华
网站建设 2026/4/15 13:40:28

MinerU支持中文吗?中英混合文档识别实测指南

MinerU支持中文吗&#xff1f;中英混合文档识别实测指南 1. 引言&#xff1a;MinerU能否胜任中文PDF提取&#xff1f; 你有没有遇到过这样的情况&#xff1a;手头有一份排版复杂的中英文混合PDF&#xff0c;里面夹着公式、表格和多栏布局&#xff0c;想把内容转成Markdown却无…

作者头像 李华
网站建设 2026/4/15 3:45:37

Z-Image-Turbo开发避坑指南:workspace/output_image路径权限问题解决

Z-Image-Turbo开发避坑指南&#xff1a;workspace/output_image路径权限问题解决 Z-Image-Turbo_UI界面设计简洁直观&#xff0c;功能布局清晰&#xff0c;适合图像生成任务的快速上手与调试。界面左侧为参数设置区&#xff0c;包含图像尺寸、风格选择、生成步数等常用选项&am…

作者头像 李华
网站建设 2026/4/14 15:51:20

ENSP PRO在大型数据中心网络规划中的实战应用

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 基于ENSP PRO设计一个云计算数据中心网络&#xff1a;1) 采用Spine-Leaf架构&#xff1b;2) 支持VXLAN overlay&#xff1b;3) 实现多租户隔离&#xff1b;4) 包含负载均衡和冗余设…

作者头像 李华