使用 HTML 表单实现页面跳转并传递参数
在Web开发中，页面间传递参数是常见的需求，HTML表单是实现这一功能的传统且有效的方式。通过表单提交，我们可以将用户输入的数据传递到目标页面，同时触发页面跳转。本文将详细介绍如何使用HTML表单实现页面跳转并传递参数，包含基础用法、参数传递规则、代码示例以及注意事项。
一、HTML表单基础
HTML表单由<form>标签定义，是网页与用户交互的核心元素。表单内部可以包含输入框、下拉框、单选按钮等表单控件，用户填写完成后，点击提交按钮即可将表单数据发送到指定的服务器地址或页面。
实现页面跳转并传递参数，核心依赖<form>标签的两个关键属性：
action：指定表单提交的目标页面地址，即跳转后的页面路径。
method：指定表单数据的提交方式，常用值为get和post，不同方式下参数传递的规则不同。
二、GET方式传递参数与页面跳转
GET方式是表单默认的提交方式，其特点是将表单数据以查询字符串的形式拼接在目标URL后面，实现参数传递，同时触发页面跳转到action指定的地址。
2.1 工作原理
当表单使用method="get"提交时，表单中带有name属性的控件值会被编码后，拼接在action地址的后面，格式为：目标地址?参数名1=参数值1&参数名2=参数值2。跳转后的页面可以通过解析URL中的查询字符串获取传递的参数。
2.2 代码示例
以下是一个使用GET方式提交表单、实现页面跳转并传递参数的示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>GET方式表单提交示例</title> </head> <body> <h3>用户信息提交（GET方式）</h3> <form action="https://www.ipipp.com/receive.html" method="get"> <p> <label for="username">用户名：</label> <input type="text" id="username" name="username" placeholder="请输入用户名"> </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" placeholder="请输入年龄"> </p> <p> <input type="submit" value="提交"> </p> </form> </body> </html>
当用户填写用户名“张三”、年龄“25”后点击提交按钮，页面会跳转到https://www.ipipp.com/receive.html?username=%E5%BC%A0%E4%B8%89&age=25，其中中文参数会被URL编码，目标页面可以通过解析该URL获取对应的参数值。
三、POST方式传递参数与页面跳转
POST方式提交表单时，参数不会拼接在URL中，而是放在HTTP请求的消息体中传递，同样会触发页面跳转到action指定的地址，适合传递敏感数据或大量数据。
3.1 工作原理
使用method="post"提交表单时，表单数据会被封装在HTTP请求体中发送到目标地址，跳转后的页面需要通过对应的后端程序（如PHP、Java等）从请求体中获取参数，单纯的前端静态页面无法直接读取POST传递的参数。
3.2 代码示例
以下是一个使用POST方式提交表单的示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>POST方式表单提交示例</title> </head> <body> <h3>登录信息提交（POST方式）</h3> <form action="https://www.ipipp.com/login" method="post"> <p> <label for="account">账号：</label> <input type="text" id="account" name="account" placeholder="请输入账号"> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="请输入密码"> </p> <p> <input type="submit" value="登录"> </p> </form> </body> </html>
这里提交后页面会跳转到https://www.ipipp.com/login，账号和密码参数在请求体中传递，不会暴露在URL里。
四、两种方式的对比
为了更清晰地选择适合的提交方式，以下是GET和POST方式的核心差异对比：
| 对比项 | GET方式 | POST方式 |
|---|---|---|
| 参数位置 | 拼接在URL查询字符串中 | 放在HTTP请求体中 |
| 参数可见性 | URL中可见，不适合敏感数据 | 不可见，适合敏感数据 |
| 数据长度限制 | 受URL长度限制，通常较小 | 无明确长度限制，适合大量数据 |
| 前端获取参数 | 可通过JS解析URL获取 | 静态页面无法直接获取，需后端配合 |
五、注意事项
表单控件必须设置
name属性，否则提交时该控件的值不会被传递到目标页面。如果仅需要前端页面间传递参数且不需要敏感数据保护，优先选择GET方式，方便通过JavaScript解析URL获取参数。
若涉及密码、隐私信息等敏感数据，需使用POST方式，并且目标地址需要支持后端接收处理请求体参数。
action地址可以是相对路径、绝对路径，也可以是完整的URL，如示例中的
https://www.ipipp.com相关地址。
六、小结
使用HTML表单实现页面跳转并传递参数是Web开发的基础技能，核心是通过<form>标签的action和method属性控制跳转地址和参数传递方式。GET方式简单直观，适合非敏感、小体积的参数传递；POST方式更安全，适合敏感数据和大量数据的传递。开发者可以根据实际场景选择合适的提交方式，同时注意表单控件的name属性配置，确保参数能够正确传递。