打开一个政府网站，填完身份证号、手机号、上传完证明材料，点击提交——你刚刚用过的就是 Webform。它的全称是 Web 表单，本质上是网页上的一组输入控件，让用户把数据填进去，再传给服务器处理。听起来简单，但没有它，整个互联网的交互几乎瘫痪。

1993 年，HTML 2.0 规范里第一次出现了 <form> 标签。那时候网页只能看，不能摸。表单的出现让网页变得可以“说话”——你能填东西，网页能收东西。最早的用途很朴素：搜索框。Yahoo 和 Lycos 靠一个输入框加一个按钮，撑起了整个搜索引擎的入口。这个模式至今没变过，Google 首页还是那个样子。

Webform 的核心构件就那么几个。<input> 负责收单行文本、密码、邮箱、日期；<textarea> 收多行文本；<select> 做下拉选项；<checkbox> 和 <radio> 管勾选。每个控件都有 name 属性，这是服务器识别数据的钥匙。用户点提交，浏览器把 name=value 的键值对打包，通过 GET 或 POST 发给后端。就这么直接。

但真正让 Webform 变得复杂的，不是这些标签本身，而是围绕它的两件事：验证和提交后的处理。

早期表单几乎没有前端验证。用户填错手机号，提交后等三秒，服务器返回一个错误页，告诉你格式不对。然后你按返回键，发现所有内容清空了，得从头再填一遍。这种体验在 2000 年代初的电商网站上随处可见。我至今记得在某个机票预订页面填了二十多个字段，提交后因为日期格式写成了“2024.1.1”而不是“2024-01-01”，全部重来。

HTML5 改变了这个局面。type="email"、type="tel"、required、pattern 这些属性让浏览器原生就能做基础校验。输入框旁边直接弹出“请输入有效的电子邮件地址”，不用等服务器。这是 Webform 发展史上最实用的一次升级。不过前端验证只能防手滑，不能防恶意。后端验证永远不能省，否则 SQL 注入和 XSS 攻击会教你做人。

另一个常被忽视的点是表单的可用性设计。<label> 标签和输入框的关联，不只是为了点击文字能聚焦输入框。屏幕阅读器靠它来告诉视障用户这个框要填什么。for 属性和 id 的对应关系，是无障碍访问的基础。很多开发者嫌麻烦不写，结果就是一部分人根本用不了你的表单。

现代前端框架把 Webform 包装得更高级。React 有受控组件，Vue 有 v-model，表单状态和 UI 自动同步。但剥开这些抽象层，底下跑的还是那套 HTML 表单逻辑。浏览器提交表单的原生行为——页面跳转、URL 参数、编码方式——一点没变。框架只是让你少写几行 document.getElementById。

有个细节值得注意：表单的 enctype 属性。默认是 application/x-www-form-urlencoded，适合普通文本。一旦要传文件，必须改成 multipart/form-data，否则文件内容根本传不过去。这个坑我见过至少五个工作三年的开发者踩过。不是他们笨，是平时用封装好的上传组件用惯了，不知道底层发生了什么。

Webform 从来不是炫技的东西。它安静地待在页面某个角落，用户填完就走，几乎不会注意到它的存在。但每一次登录、每一次下单、每一次搜索，背后都是这套诞生了三十年的机制在运转。它不性感，但缺了它，互联网就只剩只读的静态页面。你此刻能在网页上打字、勾选、提交，得感谢 1993 年那几个在 CERN 写规范的人。