HTML 里的意思 <form> 标签就是 Web 表单的骨架。你在网页上填过的意思登录框、注册页、意思搜索栏、意思收货地址那一堆输入框，意思背后都是意思这个东西。它做的意思事情很具体：把用户敲进去的数据打包，然后发给服务器。意思

没有 Web 表单之前，意思网页基本只能“看”。意思有了它，意思网页才变成能“用”的意思东西。你去京东下单，意思选规格、意思填地址、意思点提交——这一整套动作，全靠表单在中间传话。

一个最朴素的表单长什么样

<form action="/login" method="POST"> <input type="text" name="username" /> <input type="password" name="password" /> <button type="submit">登录</button> </form> 

就这么几行。浏览器看到 <form> 就知道：这里面的输入控件是一伙的，点提交的时候要把它们的数据一起送走。action 决定送到哪个地址，method 决定用什么方式送——GET 把数据拼在 URL 后面，POST 把数据塞在请求体里。

GET 和 POST 的区别，很多人背过八股文。实际写代码的时候，判断标准很简单：你愿意让这些数据出现在浏览器地址栏里吗？搜索关键词可以，密码绝对不行。所以搜索框用 GET，登录注册用 POST。就这么直白。

表单里不只有输入框

输入框只是最常见的一种控件。下拉菜单用 <select>，多行文本用 <textarea>，单选用 radio，多选用 checkbox。还有一类容易被忽略的——<input type="hidden">。它在页面上看不见，但提交时会带着数据走。CSRF token 就经常藏在这里，防止别人伪造请求。

每个控件都得有 name 属性。没有 name，浏览器提交的时候直接忽略它，服务器根本收不到。这个坑我踩过：前端调试了半天，以为后端接口挂了，结果是输入框忘了写 name。查了半天网络请求，发现 payload 里空空如也，才反应过来。

浏览器帮你做了很多事，但不够

HTML5 给表单加了不少原生校验。required 让字段必填，type="email" 会自动检查邮箱格式，pattern 可以用正则约束输入。这些在用户点提交时浏览器会直接拦下来，不用等服务器响应。

但别指望它。前端校验只是提升体验，后端该验的一个都不能少。用户可以在开发者工具里删掉 required，也可以用 curl 直接发请求绕过整个页面。安全边界永远在服务器那边。

表单提交之后发生了什么

传统表单提交会让整个页面刷新——浏览器把数据发出去，等服务器返回一个新页面，然后整页替换。这个过程在 2005 年以前是唯一的选择。后来 Ajax 出来了，JavaScript 可以拦截提交事件，用 fetch 或 XMLHttpRequest 把数据异步发出去，页面不用刷新就能拿到结果。

现在大部分现代前端框架——React、Vue 这些——都在做同一件事：接管表单提交，让开发者用状态管理的方式处理用户输入。但底层逻辑没变，数据还是要发给服务器，只不过路径从“浏览器原生提交”变成了“JS 手动发送”。

有个细节挺有意思：即使你用 React 写了个完全受控的表单，最终如果不阻止默认行为，浏览器还是会尝试原生提交。所以 e.preventDefault() 几乎是每个表单处理函数的第一行代码。

Web 表单的本质

它就是一个数据管道。用户在浏览器端输入，经过序列化、编码、传输，到达服务器端被解析。中间涉及 URL 编码、multipart 格式、字符集处理这些琐碎但重要的细节。文件上传为什么必须用 POST 加 enctype="multipart/form-data"？因为二进制数据没法塞进 URL 里。

搞懂 Web 表单，其实就是搞懂浏览器和服务器之间最基础的一次对话。这个对话从 1993 年 HTML 有 <form> 标签开始就没怎么变过，只是包装越来越花哨了。