在 HTML 表单中,name 和 value 属性在 GET 和 POST 请求中的对应关系如下:

在 HTML 表单中,namevalue 属性在 GET 和 POST 请求中的对应关系如下:

1. 表单元素的基本结构

html 复制代码
<form action="/submit" method="get"> <!-- 或 method="post" -->
  <input type="text" name="username" value="John">
  <input type="password" name="pwd" value="123456">
  <button type="submit">提交</button>
</form>

2. GET 请求中的位置

当使用 method="get" 时:

  • namevalue 会拼接在 URL 的查询字符串中

  • 格式:?name1=value1&name2=value2

  • 示例请求 URL:

    复制代码
    http://example.com/submit?username=John&pwd=123456
  • 对应关系

    • name 属性 → URL 中的参数名(如 username
    • value 属性 → URL 中的参数值(如 John

3. POST 请求中的位置

当使用 method="post" 时:

  • namevalue 会放在 HTTP 请求体中

  • 格式(默认 application/x-www-form-urlencoded):

    复制代码
    username=John&pwd=123456
  • 实际 HTTP 请求示例:

    http 复制代码
    POST /submit HTTP/1.1
    Content-Type: application/x-www-form-urlencoded
    Content-Length: 28
    
    username=John&pwd=123456
  • 对应关系

    • name 属性 → 请求体中的键(如 username
    • value 属性 → 请求体中的值(如 John

4. JavaWeb 中获取参数(Servlet 示例)

无论 GET/POST,获取方式相同:

java 复制代码
protected void doPost(HttpServletRequest request, HttpServletResponse response) {
    // 通过 name 获取 value
    String username = request.getParameter("username"); // 返回 "John"
    String password = request.getParameter("pwd");       // 返回 "123456"
}

5. 特殊表单元素示例

元素类型 HTML 代码示例 生成的请求数据
文本框 <input name="email"> email=user@example.com
单选按钮 (Radio) <input type="radio" name="gender" value="male"> gender=male (选中的值)
复选框 (Checkbox) <input type="checkbox" name="hobby" value="sports"> hobby=sports (选中的值)
下拉列表 (Select) <select name="city"><option value="bj">北京</option></select> city=bj
隐藏域 (Hidden) <input type="hidden" name="token" value="abc123"> token=abc123
文件上传 (File) <input type="file" name="myFile"> POST 时使用 multipart/form-data 格式

6. 关键注意事项

  1. GET 的可见性

    GET 请求的参数直接暴露在 URL 中(浏览器历史/服务器日志可见)

  2. POST 的编码问题

    需要在 Servlet 中设置字符编码:

    java 复制代码
    request.setCharacterEncoding("UTF-8"); // 处理中文
  3. 同名参数处理

    若多个元素同名(如复选框):

    java 复制代码
    String[] hobbies = request.getParameterValues("hobby");
  4. 文件上传特殊处理

    需使用 multipart/form-data 格式 + 专用库(如 Apache Commons FileUpload):

    html 复制代码
    <form method="post" enctype="multipart/form-data">
      <input type="file" name="file1">
    </form>

图示总结

复制代码
HTML 表单
┌───────────────────────┐
│ <input name="key"     │
│        value="data">  │
└──────────┬────────────┘
           │
           ▼
GET 请求 ?key=data   → 出现在 URL 中
POST 请求 key=data    → 出现在请求体中
相关推荐
li35745 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj6 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel6 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel6 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
西陵7 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld7 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷9 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
howard20059 小时前
VMWare上搭建Hive集群
hive·hadoop
萌萌哒草头将军9 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js