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

在 HTML 表单中，name 和 value 属性在 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" 时：

name 和 value 会拼接在 URL 的查询字符串中
格式：?name1=value1&name2=value2

示例请求 URL：

复制代码

http://example.com/submit?username=John&pwd=123456

对应关系 ：
- name 属性 → URL 中的参数名（如 username）
- value 属性 → URL 中的参数值（如 John）

3. POST 请求中的位置

当使用 method="post" 时：

name 和 value 会放在 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. 关键注意事项

GET 的可见性

GET 请求的参数直接暴露在 URL 中（浏览器历史/服务器日志可见）
POST 的编码问题

需要在 Servlet 中设置字符编码：
java 复制代码
```
request.setCharacterEncoding("UTF-8"); // 处理中文
```
同名参数处理

若多个元素同名（如复选框）：
java 复制代码
```
String[] hobbies = request.getParameterValues("hobby");
```
文件上传特殊处理

需使用 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    → 出现在请求体中