在 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    → 出现在请求体中
相关推荐
余防21 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump21 小时前
前端部署工具 PinMe
运维·前端·开源
Baklib梅梅1 天前
优秀文档案例解析:打造高效用户体验的最佳实践
前端·ruby on rails·前端框架·ruby
慧一居士1 天前
VUE、jquery、React、Ant Design、element ui、bootstrap 前端框架的 功能总结,示例演示、使用场景介绍、完整对比总结
前端
GISer_Jing1 天前
0926第一个口头OC——快手主站前端
开发语言·前端·javascript
MediaTea1 天前
Jupyter Notebook:基于 Web 的交互式编程环境
前端·ide·人工智能·python·jupyter
少年阿闯~~1 天前
CSS——重排和重绘
前端
个人看法1 天前
h5实现一个吸附在键盘上的工具栏
前端·javascript·vue
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
jason_yang1 天前
JavaScript 风格指南 精选版
前端·javascript·代码规范