真正能直接用、不翻车的只有text、password、number、checkbox、radio、submit、button、hidden这8个；其余类型必须搭配js降级或视觉补全，否则在safari、旧android或屏幕阅读器里大概率失效。
真正能直接用、不翻车的只有 text、password、number、checkbox、radio、submit、button、hidden 这 8 个；其余类型必须搭配 JS 降级或视觉补全，否则在 Safari、旧 Android 或屏幕阅读器里大概率失效。
哪些 type 值在生产环境敢写进 form 里
别被 MDN 列出的 20+ type 蒙蔽——浏览器原生支持 ≠ 行为稳定。现代浏览器（Chrome 80+、Firefox 75+、Safari 14+、Edge 90+）中真正可用的有：
-
text：通用，无校验，拼写检查默认开，适合用户名、地址等 -
password：掩码显示 + 禁用 autofill，但 pattern 不触发可见反馈 -
email：触发@键盘、基础正则（u@x合法），不查 MX 记录 -
tel：唤起电话键盘（含 * #），允许空格/括号/+，pattern 才管格式 -
url：要求协议头或域名结构（example.com可过），不强制https:// -
number：支持min/max/step，但 value 是字符串，valueAsNumber易返NaN -
search：语义明确，Chrome/Safari 自带 × 清空按钮，空值可能被某些 UA 忽略提交 -
checkbox和radio：必须带name才能分组，否则单选/多选失效
像 date、datetime-local、color 这类，Safari 15.4 之前没原生 picker，IE 完全不支持；datetime 已被 HTML 标准废弃，别用。
type="number" 的真实行为和避坑写法
它不是“只让输数字”的输入框，而是“带数字语义的文本框”——粘贴 12.3.4 或 abc 后，input.value 可能为空字符串，input.valueAsNumber 返回 NaN，但用户完全感知不到异常。
- 始终监听
input事件，用正则/^-?\d*\.?\d*$/实时过滤（保留负号和小数点） - 提交前用
parseFloat(value)转换，别依赖valueAsNumber - 要整数？加
step="1"+inputmode="numeric"，比单靠type="number"更稳 - iOS Safari 允许输入
e和+，导致科学计数法误入，需 JS 截断 - Android Chrome 中
step="0.01"不阻止手动输0.001，后端仍需校验精度
type="email"、type="tel"、type="url" 的验证边界在哪
它们只做最轻量的格式守门，不替代后端校验，也不防用户绕过：
-
type="email"：允许user@localhost、test@foo.bar，但不发 DNS 查询；若要更严，加pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$" -
type="tel"：连+86 138-1234-5678都合法，纯为键盘优化；真正校验手机号得靠 pattern 或后端 -
type="url"：google.com合法，https://开头才校验协议完整性；要强制 HTTPS，用pattern="^https?://.+" - 所有这些 type 的校验只在
form.checkValidity()或 submit 时触发，禁用 JS 或改 DOM 就能跳过
为什么建议多数自定义控件用 type="text" 起手
当你用 JS 实现日期选择器、标签输入、富文本编辑器时，强行套 type="date" 或 type="color" 会覆盖你的交互逻辑——原生 picker 弹出、颜色面板接管焦点、移动端键盘错乱。
- 统一用
type="text"，再通过role="textbox"、aria-label、aria-expanded暴露语义 - 需要键盘适配？加
inputmode：数字用inputmode="numeric"，小数用inputmode="decimal"，邮箱用inputmode="email" - 避免
type="search"用于非搜索场景——它的清空按钮和 UA 圆角是硬编码，CSS 很难重置 - 动态修改
input.type会导致valueAsNumber等属性失效，值丢失，不要 runtime 切 type
最易被忽略的一点：type 不只是“长得像什么”，它决定软键盘、无障碍播报、自动填充策略、表单提交逻辑——选错一个，后面全得 JS 补，而且补不干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
