打开任何一个招聘网站,网页填完姓名、表单邮箱、数据上传简历,网页点提交。表单三秒后页面刷新,数据你的网页信息已经躺在对方的数据库里了。这背后跑的表单就是网页表单数据——浏览器把用户敲进去的字符打包,通过HTTP请求扔给服务器,数据服务器再拆包、网页验证、表单存库。数据整个过程快到你来不及想“我的网页手机号会不会被卖掉”。
表单的表单HTML骨架其实很朴素。<form action="/submit" method="post"> 这行标签决定了数据往哪送、数据怎么送。method选get,数据就挂在URL后面,像 ?name=zhang&age=28,谁都能在地址栏看见。选post,数据塞进请求体,表面上看不见,但别以为这就安全了——抓包工具一开,照样裸奔。我见过不少小网站图省事,登录表单用get,密码直接暴露在浏览器历史记录里。这种低级失误每年都能撞见几回。
每个输入框的name属性才是关键。<input type="text" name="username">,用户输入“张三”,提交时浏览器就生成 username=张三 这个键值对。多个字段用&拼接,中文和特殊字符会被编码成 %E5%BC%A0%E4%B8%89 这种百分号形式。后端拿到手得先解码,不然存进数据库就是一堆乱码。有个做后端的朋友跟我吐槽,他们系统上线第一天,用户提交的地址里带了个“#”,结果后面所有内容全被截断——因为#在URL里是锚点标志。这种坑踩一次就记住了。
前端验证靠JavaScript,输入框失去焦点时弹个红字“邮箱格式不对”。但这层防线形同虚设,禁用JS或者直接发请求就能绕过。真正管用的还是服务端验证。我参与过一个项目,前端限定了年龄必须18到60,后端没查,结果有人用工具提交了“-1”,数据库里多了一条年龄为负的记录。后来加了三行服务端校验才堵住。经验就是:前端验证是给普通用户看的,后端验证是给所有人看的。
文件上传是表单里最特殊的一类。普通字段是文本,文件得用 enctype="multipart/form-data" 编码,把二进制数据切成块,每块带自己的头部信息。服务器收到后先解析边界字符串,再把文件流写到磁盘。这里有个细节:如果表单里同时有文本字段和文件字段,文本部分也会被当成multipart处理,解析起来更麻烦。很多新手在这里翻车,上传的文件名变成乱码,或者内容缺了最后几个字节。
表单数据落到数据库之前,还得过一道叫“防CSRF”的关卡。简单说,攻击者伪造一个页面,诱导你点击,利用你已登录的cookie向目标网站发请求。防御手段是在表单里埋一个随机token,服务器比对token和session里的值是否一致。没这个token,请求直接拒掉。我检查过一些开源CMS,有的token生成用了弱随机数,理论上能被预测。安全这事,细节上偷懒就是给自己埋雷。
数据存进去只是开始。用户填错了想改,你得提供编辑功能;用户想注销账号,你得把关联的表单数据删干净。GDPR那套“被遗忘权”不是闹着玩的,我见过一家创业公司因为没做级联删除,被用户投诉后罚了款。表单数据从生成到销毁,每个环节都得有人盯着。下次你填完表单点提交,不妨想想这三秒钟里到底发生了什么——那串字符的旅程,比你想象的要长。