使用 HTML 表单提交数据并重定向到指定页面
在网页开发中，使用 HTML 表单收集用户输入数据是非常常见的操作，而提交数据后跳转到指定页面也是表单交互的基础需求。本文将详细介绍如何通过 HTML 表单完成数据提交，并实现提交后的页面重定向。
HTML 表单基础结构
HTML 表单通过 <form> 标签定义，核心属性包括 action 和 method：
action：指定表单提交后数据发送的目标地址，也可以是提交后跳转的页面地址method：指定数据提交的方式，常用值为get和post
下面是一个简单的表单示例，收集用户的姓名和年龄，提交后跳转到指定页面：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>用户信息提交表单</title> </head> <body> <h3>用户信息提交</h3> <form action="https://www.ipipp.com/result.html" method="get"> <p> <label for="username">姓名：</label> <input type="text" id="username" name="username" required> </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="1" max="120" required> </p> <p> <input type="submit" value="提交数据"> </p> </form> </body> </html>
上述代码中，<form> 标签的 action 属性设置为 https://www.ipipp.com/result.html，当用户点击提交按钮时，表单数据会被发送到该地址，同时浏览器会跳转到这个页面。使用 get 方法提交时，表单数据会以查询参数的形式拼接在跳转地址的后面，例如 https://www.ipipp.com/result.html?username=张三&age=20。
使用 post 方法提交并重定向
如果提交的数据包含敏感信息或者数据量较大，通常使用 post 方法，此时数据不会显示在地址栏中。修改上面的表单 method 属性即可：
<form action="https://www.ipipp.com/result.html" method="post"> <p> <label for="username">姓名：</label> <input type="text" id="username" name="username" required> </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="1" max="120" required> </p> <p> <input type="submit" value="提交数据"> </p> </form>
使用 post 方法提交时，数据会通过请求体发送到 action 指定的地址，浏览器同样会跳转到该地址，只是地址栏不会显示提交的数据内容。
通过 JavaScript 控制提交重定向
有时候我们需要在提交数据前做一些校验，或者根据校验结果跳转到不同的页面，这时可以通过 JavaScript 监听表单的提交事件来实现。
下面的示例在提交前校验年龄是否大于等于18岁，符合条件则跳转到成功页面，否则跳转到提示页面：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>带校验的表单提交</title>
<script>
function handleSubmit(form) {
const age = parseInt(form.age.value);
if (age >= 18) {
form.action = "https://www.ipipp.com/success.html";
return true;
} else {
alert("年龄需大于等于18岁才能提交");
return false;
}
}
</script>
</head>
<body>
<h3>年龄校验提交</h3>
<form onsubmit="return handleSubmit(this)" method="post">
<p>
<label for="username">姓名：</label>
<input type="text" id="username" name="username" required>
</p>
<p>
<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="1" max="120" required>
</p>
<p>
<input type="submit" value="提交数据">
</p>
</form>
</body>
</html>在上述代码中，我们给 <form> 标签添加了 onsubmit 事件，事件处理函数 handleSubmit 会先校验年龄，然后根据校验结果修改表单的 action 地址，返回 true 则允许表单提交并跳转，返回 false 则阻止表单提交。
注意事项
在实际开发中需要注意以下几点：
确保
action指定的跳转地址是有效的，否则提交后会出现404错误根据数据特性选择合适的
method方法，敏感数据优先使用post如果表单中使用了
required等 HTML5 校验属性，浏览器会先执行原生校验，再触发自定义的onsubmit事件跳转后的页面如果需要获取提交的表单数据，服务端需要根据
method类型从对应的位置（查询参数或请求体）读取数据
通过上述内容，我们可以灵活使用 HTML 表单实现数据提交和页面重定向的需求，结合 JavaScript 还能实现更复杂的业务逻辑控制。