HTML action 属性

HTML action 语法

在 HTML 中，action 属性用于指定当表单被提交时，表单数据将被发送到哪个 URL 地址进行处理。只有 form 元素支持 action 属性。

语法：

<form action="URL">
</form>

说明：

action 属性的值是一个 URL，它告诉浏览器将表单数据发送到哪里。这个 URL 可以是：

绝对 URL：指向一个完整的域名和路径（例如：https://example.com/submit）。
相对 URL：相对于当前页面的路径（例如：/login）。
空字符串或省略：如果 action 属性为空字符串或被省略，表单数据将被提交到当前页面的 URL。

对于 form 元素来说，action 属性通常与 method 属性一起使用。action 属性决定了表单数据的目的地，而 method 属性决定了表单数据的发送方式（如 GET 或 POST）。

GET 方法：将数据附加到 URL 中（适合获取数据）。
POST 方法：将数据放在请求体中（适合提交数据）。

<form action="/submit" method="POST">
    <!-- 表单内容 -->
</form>

当表单被提交时，服务器端的应用程序（例如 Node.js、Go、Python 等）会接收并处理从 action 指定的 URL 发送过来的表单数据。

提示: 在 Vue、React等项目开发中，我们一般不直接使用 action 属性来提交表单，而是使用 JavaScript（AJAX 或 Fetch API）来拦截表单提交事件，并在后台异步发送数据。这样可以在不刷新页面的情况下提交数据，用户体验更好。

HTML action 摘要

适用元素	form
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML action 示例

接下来，我们将通过一个简单的例子来讲解一下 HTML action 属性是如何使用的。

示例：action 属性的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h3>用户登录</h3>
    <form action="/login" method="post">
        <p>
            <label>
                账号：
                <input type="text" name="account" required>
            </label>
        </p>
        <p>
            <label>
                密码：
                <input type="password" name="password" required>
            </label>
        </p>
        <p>
            <button type="submit">登录</button>
        </p>
    </form>
</body>
</html>

页面效果如下图所示。

HTML action属性示例

分析：

当我们点击【登录】按钮后，表单中的账号和密码数据会通过 POST 方式发送到当前网站的 “/login” 这个路由。

注意: 由于表单经常用于提交敏感数据（如密码、个人信息），action 指向的 URL 地址强烈建议使用 HTTPS 协议，以防止数据在传输过程中被窃取。