html表单提交的反应

最新推荐文章于 2025-12-18 23:38:54 发布

原创最新推荐文章于 2025-12-18 23:38:54 发布 · 374 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

Vue.js 专栏收录该内容

64 篇文章

订阅专栏

当然可以。

一个没有任何 JavaScript 干预的普通 HTML 表单，在点击提交按钮后，最显著的反应就是整个页面会刷新，并且浏览器会尝试将表单中的数据发送出去。

最直观的观察方式是使用默认的 GET 方法。

示例代码：一个最普通的表单

您可以将下面这段代码完整地复制到一个 .html 文件中，然后用浏览器打开它。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>普通表单的默认行为</title>
</head>
<body>

    <h1>一个正常的 HTML 表单</h1>
    <p>这个表单没有使用任何 Vue 或 JavaScript 来阻止它的默认行为。</p>

    <form>
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" value="Alice">
        </div>
        <div style="margin-top: 10px;">
            <label for="city">城市:</label>
            <input type="text" id="city" name="city" value="Beijing">
        </div>

        <button type="submit" style="margin-top: 20px;">
          点击提交
        </button>
    </form>

    <hr>
    <h3>操作指南</h3>
    <ol>
        <li>直接点击上面的“点击提交”按钮。</li>
        <li>仔细观察**浏览器地址栏**的变化。</li>
        <li>注意页面是否**刷新**了。</li>
    </ol>

</body>
</html>

您会观察到的“反应”

当您点击“点击提交”按钮后，请仔细观察两件事：

页面会闪一下，重新加载了。
这就是表单提交的默认行为之一：浏览器会导航到一个新的地址，即使这个新地址就是当前页面。
浏览器地址栏的 URL 变了。
这是 GET 方法提交的特点。您会看到地址栏的 URL 后面被追加了一串文本，变成了类似这样：
.../yourfile.html?username=Alice&city=Beijing
- ? 问号代表查询参数的开始。
- username=Alice 和 city=Beijing 是将您表单中 input 的 name 属性和 value 属性组合成的数据。
- & 符号用来分隔多个数据。