说句扎心的大实话：HTML表单这玩意儿，确实老得像上个世纪出土的文物。然而，令人悲哀的是，我们之中绝大多数的前端打工人，时至今日敲出的代码，依然和大学刚毕业时学的那套“老破小”表单毫无二致。与此同时，HTML这门语言早就暗搓搓地完成了基因进化，它悄悄塞进了一大堆极其彪悍的原生机制——这帮小天才就静静地躺在那里，随时准备将你从无尽的JavaScript验证泥沼中拯救出来。

在咱们正式开始受虐（划掉，学习）之前，先把这份压箱底的完整代码示例甩给你们：

1. autocomplete （自动填充）

表单自动填充，绝对是提升用户体验的王炸。它能精准地告诉浏览器这个输入框到底要装什么数据，从而实现如同读心术一般的智能补全。

<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<input type="text" name="cc-number" autocomplete="cc-number">

别再让人家第一百次手动输入那个长到恶心的邮箱地址了，这极其反人类。老老实实地用上 email、tel、street-address、cc-number（信用卡号）、bday（生日）等规范词汇，你的转化率会感谢你的。

支持率：现代浏览器全员通过。Chrome 17+，Firefox 4+，Safari 5.1+，Edge 12+。

2. autofocus （自动聚焦）

页面一加载，光标就自动乖乖就位。对于那些靠搜索框续命的网站，或者极其关键的登录页面来说，这简直是神来之笔。

<input type="text" name="search" autofocus>

不过，克制一点。一个页面只配拥有一个自动聚焦，而且你得百分百确定，这就是用户点进来后最想“临幸”的地方。

支持率：Chrome 5+，Firefox 4+，Safari 5+，Edge 12+，IE 10+。

3. inputmode （输入模式）

试想一下，当你的用户正拿着最新款的 iPhone 准备付款时，inputmode 能够直接唤起最匹配的虚拟键盘，这种丝滑的体验难道不香吗？ 毫不夸张地说，这是移动端交互的终极救星。

<input type="text" inputmode="numeric">
<input type="text" inputmode="decimal">
<input type="text" inputmode="email">
<input type="text" inputmode="url">

即便你为了绕过某些奇怪的校验，硬着头皮用了 type="text"，inputmode 依然能赋予手机用户最正确的输入姿势。输验证码用 numeric，填金额用 decimal，别再让用户在符号键盘里迷路了。支持率：Chrome 66+，Firefox 95+，Safari 12.1+，Edge 79+，iOS Safari 12.2+。

4. pattern （正则校验）

用正则表达式搞定自定义验证。强大到令人发指。

<input type="text" pattern="[0-9]{4}" placeholder="PIN (4 digits)">
<input type="text" pattern="[A-Za-z]{3,}" placeholder="At least 3 letters">

一旦用户的输入被判定为不匹配，浏览器就会无情地拦截并抛出错误提示。配合下面要说的 title 一起食用，堪称前端防脱发利器。支持率：Chrome 10+，Firefox 4+，Safari 10.1+，Edge 12+，IE 10+。

5. title （配合 pattern 使用）

当它与 pattern 双剑合璧时，title 就摇身一变，成了定制化的报错文案。

<input type="text" 
       pattern="[0-9]{4}" 
       title="求求你，只能输入正好4个数字">

千万别省这一步。浏览器自带的报错文案往往像机器人一样冰冷且不知所云。给用户一点温暖且有用的人话吧。支持率：全宇宙所有浏览器。

6. minlength 与 maxlength （字符长度限制）

强制设定输入字符的下限与上限。它不仅是被用来卡验证的，在某些高光时刻，浏览器甚至会贴心地为你展示字数统计。

<input type="text" minlength="3" maxlength="20">
<textarea minlength="10" maxlength="500"></textarea>

只要用户试图作死，输入过短或过长的内容，立刻就会被系统“打回原形”。支持率：maxlength: 通杀（Chrome 4+，Firefox 4+，Safari 5+，IE 10+）minlength: Chrome 40+，Firefox 51+，Safari 10.1+，Edge 17+（IE这个老古董不支持）。

7. min 与 max （数值/日期边界）

针对数字和日期输入框，无情地画出楚河汉界。

<input type="number" min="1" max="100">
<input type="date" min="2025-01-01" max="2025-12-31">
<input type="time" min="09:00" max="17:00">

那些试图钻空子的非法数值，根本连被提交的资格都没有。重点是：一行 JS 都不用写！支持率：Chrome 10+，Firefox 16+，Safari 5+，Edge 12+，IE 10+。

8. step （步长控制）

精准拿捏数字、日期和时间的增减幅度。

<input type="number" step="0.01" placeholder="Price">
<input type="time" step="900"> <input type="range" min="0" max="100" step="5">

涉及钱的敏感地带，请乖乖用 step="0.01"；如果想彻底放飞自我、接受任意小数，那就祭出 step="any"。支持率：Chrome 6+，Firefox 16+，Safari 5+，Edge 12+，IE 10+。

9. multiple （多重选择）

允许一次性上传多个文件，或者豪迈地填入一长串邮箱地址。

<input type="file" multiple>
<input type="email" multiple placeholder="用逗号把邮箱隔开">

选文件时终于不用一个个痛苦地点击了。至于邮箱，浏览器会自动对逗号分隔开的每一个地址进行严格审视。

支持率：Chrome 6+，Firefox 3.6+，Safari 4+，Edge 12+，IE 10+。

10. accept （文件类型限制）

把丑话说在前面，严格限制用户能上传的文件格式。

<input type="file" accept="image/*">
<input type="file" accept=".pdf,.doc,.docx">
<input type="file" accept="image/png,image/jpeg">

想要图片就写 image/*，想要视频就是 video/*，或者精确到骨子里的MIME类型和后缀名。文件选择器会自动把那些不合格的垃圾文件屏蔽掉。

支持率：Chrome 16+，Firefox 9+，Safari 6+，Edge 12+，IE 10+。

11. formnovalidate （特定按钮跳过验证）

赋予某个特定按钮“免死金牌”，直接无视整个表单的校验规则。搞“保存草稿”功能时，这玩意儿就是神。

<button type="submit">正经提交</button>
<button type="submit" formnovalidate>存个草稿</button>

正常点击提交，规矩照旧；点击存草稿，一路绿灯，不管填成什么鬼样都能被保存下来。

支持率：Chrome 10+，Firefox 4+，Safari 10.1+，Edge 12+，IE 10+。

12. formaction （花式提交路径）

让不同的按钮，把数据引向不同的彼岸。

<form action="/save">
  <button type="submit">保存</button>
  <button type="submit" formaction="/preview">预览</button>
</form>

完全抛弃JavaScript的事件拦截，纯靠HTML原生力量实现多路分发。

支持率：Chrome 10+，Firefox 4+，Safari 5.1+，Edge 12+，IE 10+。

13. formmethod （暴力篡改请求方法）

为特定的按钮，强行改写表单默认的传输方式。

<form method="get" action="/search">
  <button type="submit">搜索</button>
  <button type="submit" formmethod="post">保存此搜索</button>
</form>

同一个屋檐下，有人走 GET 的阳关道，有人过 POST 的独木桥，互不干扰。

支持率：Chrome 10+，Firefox 4+，Safari 5.1+，Edge 12+，IE 10+。

14. formenctype （编码类型特权）

当且仅当特定按钮被按下时，重置表单的数据编码规则。

<form>
  <input type="text" name="title">
  <button type="submit">只传文字</button>
  <button type="submit" formenctype="multipart/form-data">带上文件一起飞</button>
</form>

杀鸡焉用牛刀？只有在确实需要传文件的时候，才启动那套笨重的编码机制。

支持率：Chrome 10+，Firefox 4+，Safari 5.1+，Edge 12+，IE 10+。

15. formtarget （结果响应归处）

决定提交后的结果页面，到底该在哪张脸（窗口）上显现。

<form action="/submit">
  <button type="submit">当前页提交</button>
  <button type="submit" formtarget="_blank">新开窗口去浪</button>
</form>

可选值包括 _self、_blank、_parent 等。当你需要生成预览页，又死活不想毁掉用户当前辛辛苦苦填了一半的页面时，这个特性简直闪闪发光。

支持率：Chrome 10+，Firefox 4+，Safari 5.1+，Edge 12+，IE 10+。

16. readonly （只读不可碰）

把输入框变成一块高贵的展示牌——只能看不能摸，但偏偏还能被提交上去。这和彻底被废的 disabled 可是两码事。

<input type="text" value="订单号：12345" readonly>

当你渴望某个值参与最终的表单决战，却绝对不容许用户对其指手画脚时，选它。反之，如果是连提交都不配的弃子，请用 disabled。支持率：全部拿下。

17. placeholder （占位提示）

在框框里留下的幽灵文字。你肯定天天在用，但你真的用对了吗？

<input type="email" placeholder="you@example.com">

敲黑板：绝对不要拿它去替代正儿八经的 <label> 标签！一旦用户开始敲击键盘，这些提示就会灰飞烟灭。老老实实用回你的 label，别作妖。

支持率：Chrome 10+，Firefox 4+，Safari 5+，Edge 12+，IE 10+。

18. list 与 <datalist> （自定义选项池）

亲手打造一个下拉提示库。用户既可以像大爷一样直接从中挑选，也可以无视它自己随便填。

<input type="text" list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

这就好比是你自己驯化的自动补全功能，既给了选择的自由，又暗藏着你的引导。

支持率：Chrome 20+，Firefox 4+，Safari 12.1+，Edge 12+（IE退群了）。

19. spellcheck （拼写警察）

把指挥棒交到你手里：到底要不要让浏览器那多管闲事的红波浪线跑出来抓错？

<textarea spellcheck="true"></textarea>
<input type="text" name="code" spellcheck="false">

写代码的框、填用户名的框、极其硬核的技术字段，趁早把它关掉（false）。但是写小作文的文本域，还是留着它保命吧。

支持率：Chrome 10+，Firefox 2+，Safari 3.1+，Edge 12+，IE 10+。

20. enterkeyhint （回车键换装）

赋予手机端键盘上的“回车键”以新的灵魂。

<input type="search" enterkeyhint="search">
<input type="text" enterkeyhint="next">
<textarea enterkeyhint="send"></textarea>

你可以把它变成“搜索(search)”、“下一步(next)”、“发送(send)”等等。表面上看这只是微不足道的面子工程，但这微小的细节，往往能决定用户体验的生死。

支持率：Chrome 77+，Firefox 94+，Safari 13.1+，Edge 79+，iOS Safari 13.4+。

21. dirname （文字方向追踪器）

自动打包并上报用户输入的文本书写方向。在做那些跨越国界的国际化项目时，这玩意儿就是续命神药。

<input type="text" name="comment" dirname="comment.dir">

表单一按，不仅把内容（comment）交上去，还会顺带附上方向属性（comment.dir，告诉你到底是 ltr 还是 rtl）。这对于处理阿拉伯语这种从右往左写的奇葩文字来说，根本离不开。

支持率：Chrome 17+，Safari 6+，Edge 79+（Firefox和IE双双装死）。

22. form （异地恋连线）

就算输入框被无情地发配到了 <form> 标签的十万八千里之外，只要一线牵，它们依然生死相依。

<form id="myForm" action="/submit">
  <input type="text" name="username">
</form>
<input type="email" name="email" form="myForm">
<button type="submit" form="myForm">远程提交</button>

当你的页面布局错综复杂，表单骨架被拆得七零八落时，通过 form 属性指名道姓，瞬间就能完成跨越千山万水的灵魂绑定。

支持率：Chrome 10+，Firefox 4+，Safari 5.1+，Edge 12+，IE 11+。

23. capture （暴力抢占摄像头）

针对手机端的文件上传，直接绕过那些磨叽的文件夹，一脚踹开摄像头的门。

<input type="file" accept="image/*" capture="environment">
<input type="file" accept="video/*" capture="user">

设为 user 就怼脸自拍，设为 environment 就拍大好河山。对于那些必须要求“立此存照”的App来说，简直是神仙级待遇。

支持率：Chrome 53+ (Android)，Safari 11+ (iOS)。至于桌面端？人家傲娇地选择了无视。

24. novalidate （一键禁魔）

简单粗暴，直接强行阉割掉整个表单的HTML5自带校验机制。

<form novalidate>
  <input type="email" required>
  <button type="submit">不管了，给我交</button>
</form>

当你决心把命运掌握在自己手里，打算用一套极其庞大且复杂的纯 JavaScript 体系来接管一切验证规则时，请务必写上它，以防原生机制跑出来捣乱。

支持率：Chrome 10+，Firefox 4+，Safari 10.1+，Edge 12+，IE 10+。

25. autocapitalize （自动大写狂魔）

在手机键盘上，暗中操控英文字母的大写规则。这就像我们在微信公众号排版时一样，细节的讲究往往决定了逼格的高低。

<input type="text" autocapitalize="words">
<input type="text" autocapitalize="sentences">
<input type="email" autocapitalize="none">

填邮箱和账号绝对要设为 none，输人名用 words（首字母大写），普通文字聊天就留给 sentences。

支持率：Safari 5+ (iOS)，Chrome 43+，Edge 79+。（Firefox再次表示不伺候）。

26. size （面子工程）

单纯控制输入框在视觉上能显示多宽（按字符数算）。

<input type="text" size="30">
<input type="text" size="5" placeholder="验证码">

搞清楚，它绝不会限制你真正能输入多少字，它只管表面能露出来多少。想限制骨子里的长度？出门左转找 maxlength。

支持率：全宇宙浏览器。

27. cols 与 rows （文本域的圈地运动）

赤裸裸地划定一个大文本框（textarea）的初始视觉疆域。

<textarea cols="50" rows="10"></textarea>

cols 管多宽，rows 管多高。当然，如果你没在 CSS 里把人家锁死，用户还是能像拽面条一样把它拉变形的。

支持率：依然是全宇宙浏览器。

28. wrap （换行哲学家）

主宰多行文本在最终被提交那一刻的换行命运。

<textarea wrap="soft"></textarea>
<textarea wrap="hard" cols="40"></textarea>

选 soft，表面看着换行了，实际交上去还是一坨没断开的字符串；选 hard，就会在达到 cols 宽度时，残忍地在数据里硬生生插入物理换行符。绝大多数情况下，你只需要一个温柔的 soft。

支持率：全部拿下。

29. disabled （彻底封杀）

毫不留情地将一个元素变成废人。不能摸，不能改，连被提交的资格都被无情剥夺。

<input type="text" disabled>
<button type="submit" disabled>灰飞烟灭的按钮</button>

切记，这和 readonly 是两重天地。被封杀的元素通常会呈现出一种死气沉沉的灰色。当你觉得某个字段暂时不配出场时，就祭出这个大招。

支持率：全部拿下。

30. required （霸王条款）

不填完？就算天王老子来了，你也别想点提交。

<input type="text" required>
<input type="email" required>
<select required>
  <option value="">请主子先选一个...</option>
  <option value="1">选项1</option>
</select>

任何企图蒙混过关的空手套白狼行为，都会被浏览器当场逮捕并示众。通吃所有输入类型。

支持率：Chrome 10+，Firefox 4+，Safari 10.1+，Edge 12+，IE 10+。

最后

底牌已经亮完了。这30个原生能力，绝非什么虚无缥缈的未来大饼。它们深深扎根于HTML的骨髓中，背靠庞大的浏览器生态，专门用来搞定那些恶心人的痛点。我们大多数人放着这么好用的现成武器不用，偏要去手写一座座脆弱的 JavaScript 屎山，何苦呢？

​

阅读原文：原文链接