HTML5表单新特性支持原生校验与约束：优先掌握email、tel、date、number、search等type值；善用required、placeholder、autofocus属性并注意其使用边界；pattern仅提交时校验且正则受限；autocomplete依赖语义化name/id匹配。
能不用 JavaScript 就校验、提示、约束输入的，就别写 JS —— HTML5 表单新特性已覆盖 80% 以上日常场景，关键在选对 type 和用准属性。
哪些 input type 值真正值得优先掌握
别把所有 type 都当“新功能”去记，只盯浏览器原生支持好、移动端体验明确、后端验证可省力的那几个：
-
email：触发邮箱格式校验（非万能，但拦截明显错误有效），iOS/Android 键盘自动切换为 @ 键优先布局 -
tel：不校验格式，但强制弹出数字键盘，适合国内手机号（注意：不要依赖它防乱输，后端仍需正则） -
date：生成日历控件，value必须是YYYY-MM-DD格式（如"2026-05-10"），否则控件不显示默认值 -
number：配合min/max/step可控输入范围，但注意：用户仍可手动输入超限值，仅 UI 层限制 -
search：右下角显示搜索图标，清空按钮自动出现，适合搜索框
required、placeholder、autofocus 这三个属性怎么用才不翻车
它们看着简单，但组合使用时容易互相干扰或被忽略细节：
-
required只在表单提交时触发，不阻止用户删除内容；若搭配placeholder，用户可能误以为“占位符就是默认值”，导致留空提交失败 -
placeholder不是label的替代品，必须配<label for="xxx">，否则屏幕阅读器无法识别字段用途 -
autofocus在页面加载时生效，但同一页面只能有一个元素带该属性；若多个表单共存（如登录+注册 Tab），需用 JS 动态控制，否则焦点会错乱
用 pattern 做自定义校验时的真实限制
pattern 看似强大，但浏览器实现有硬边界：
立即学习“前端免费学习笔记（深入）”；
- 正则默认加了
^和$，所以pattern="[0-9]{11}"要求**整个输入必须恰好 11 位数字**，不能多也不能少（比如带空格的手机号就直接失败） - 不支持
g、i等 flag，也不能用\d（部分旧版 Safari 不认，老老实实用[0-9]） - 错误提示文案不可定制，Chrome 显示 “Please match the requested format”，Firefox 是 “请填写符合指定格式的内容”——你改不了
- 它只在提交时校验，不监听输入过程；想实时反馈？还得靠
input事件 + JS
autocomplete 不是“自动填”，而是“按语义匹配历史记录”
很多人以为开了 autocomplete="on" 就能填邮箱或地址，其实它依赖的是字段的 name 或 id 是否符合规范语义：
- 填邮箱要写
name="email"或autocomplete="email"，不是随便起个name="user_mail" - 收货地址要拆成
autocomplete="street-address"、autocomplete="postal-code"等，整段填一个 input 不会被识别 - 敏感字段如密码，浏览器默认禁用自动填充；若真需要（如注册页两次输入），得显式写
autocomplete="new-password"
最常被忽略的一点：type="date" 和 type="number" 在 Safari 上默认样式极简，没边框没聚焦态，用户根本看不出它是可点的 —— 你得自己用 CSS 加 outline 或 border，否则移动端体验直接归零。
