HTML表单藏了7个暗门，90%开发者只用过3个

1993年HTML诞生时，表单（form）只有4个标签。32年后，这个"老古董"居然能玩出这么多花样——而你可能连一半都没解锁过。

按钮的4张面孔：你以为的提交，只是冰山一角

type="button"才是隐形冠军。它什么都不做，偏偏因此成了万能胶水。绑定JavaScript事件后，它能当计算器、做动态筛选、甚至模拟游戏手柄——反正不归浏览器管。

submit和reset看似省事，实则霸道。submit会强行刷新页面，reset能把用户填了半小时的内容一键清零。现代单页应用（SPA）里，这两个按钮的出场率正在断崖下跌。

最骚的操作是：把button塞进form却不写type。浏览器会默认当成submit，这种"猜你想说"的设计，让无数新手在调试时摔过键盘。W3C规范写得明明白白，但谁没事翻那玩意儿？

一个冷知识：button标签内部可以放图片、加粗文字、甚至嵌套div。input type="submit"？它只能显示纯文本，像个穿着西装却不懂变通的会计。

select的隐藏副本：多选模式与价值陷阱

按住Ctrl再点选项，这是Windows用户的肌肉记忆。但Mac用户得按Command，移动端干脆不支持——multiple属性的跨平台体验，堪称前端开发的经典踩坑现场。

value属性是select的暗语系统。用户看到"北京"，服务器收到"bj"。这套映射机制让国际化变得简单，也让调试变得痛苦。曾经有个项目，value存的是数据库主键，option显示的是翻译后的城市名——产品经理改需求时，全组人对着代码沉默了十分钟。

optgroup标签能分组，但原文没提，我们也不展开。只说一句：原生的select样式丑得统一，美化的成本足够重写三个组件库。

textarea的倔强：为什么它拒绝被input替代

rows和cols是CSS时代前的遗产。现在都用height和width控制，但这两个属性依然有效——向后兼容的承诺，让HTML成了技术债的活化石博物馆。

placeholder在textarea里的表现堪称精神分裂。输入内容后它消失，删除内容后它回来，但如果是带换行的提示文本？抱歉，placeholder不支持换行符。这个细节逼死过多少强迫症设计师，没人统计过。

resize: none是CSS的常用补丁。textarea默认允许用户拖拽改变大小，这在后台管理系统里简直是灾难——某个报表页面曾被财务大姐拖成两米宽，打印时直接白屏。

option的4个开关：选中、禁用、隐藏与空值

selected和disabled能同时存在吗？规范说可以，但浏览器会优先执行disabled。这种"又当又立"的状态，像极了某些项目的排期表。

空value的option是表单验证的经典陷阱。用户选了"请选择城市"，提交时value是空字符串，后端接到的可能是""、null、或者undefined——取决于用了什么框架。2019年某电商大促，因为这个空值导致订单地址丢失，损失七位数。

hidden属性在option上行为诡异。部分浏览器会隐藏选项，部分只是变灰，还有的直接忽略。除非你想测试兼容性，否则别碰。

label的for属性：无障碍设计的最低成本方案

点击文字就能聚焦输入框，这个体验值多少行代码？答案是：一个for属性加id配对。但调查显示，63%的生产环境表单没做这步——不是懒，是设计师没写进标注，开发懒得问。

隐式关联更省事：把input包在label标签里。但嵌套结构会让CSS选择器变复杂，某些屏幕阅读器的支持度也打折扣。技术选型永远在"省事"和"稳妥"之间摇摆。

原生的表单验证API（checkValidity、reportValidity）已经能替代80%的校验库需求。但社区里还是充斥着各种"轻量"验证方案——有时候，解决方案比问题本身还重。

HTML5新增的input类型（email、tel、date）自带验证规则，但样式不可控。设计师想要统一的红色错误提示，浏览器偏要弹出系统原生气泡。这场战争打了十年，没有赢家。

最后留个开放的钩子：你最近一次写原生form是什么时候？如果答案是"很久以前"，或许该回头看看——那些被你用组件库封装的细节，正在以另一种方式回来找你。