选错 input type 会导致表单行为异常：type=”text” 无法替代 type=”number”/”tel”/”password”/”email”/”url”/”search”/”date”/”color”/”range” 的原生功能、验证逻辑、无障碍支持及兼容性表现，必须按语义严格选用。
input type 选错会导致表单行为异常
浏览器对不同 type 的 input 有完全不同的默认行为和验证逻辑，不是“长得像就行”。比如用 type="text" 做数字输入，用户能输字母、负号、小数点甚至多个小数点，但 type="number" 会拦截非法字符（部分浏览器下仍可粘贴），且原生支持上下箭头微调和移动端数字键盘。
- 手机号别用
type="number"：ios 会加 spinner，且提交时可能被转成科学计数法（如 0000000001 → 1）；改用type="tel"更稳妥 - 密码必须用
type="password"，不能靠 CSS 遮盖type="text"—— 否则 autofill、密码管理器无法识别 -
type="email"和type="url"触发基础格式校验（空值或明显错误如@.com会标红），但不替代后端验证
type=”search” 和 type=”text” 表现差异不止是放大镜图标
type="search" 在 safari 和 chrome 中自带清空按钮（×），按 Esc 键可一键清空；type="text" 没有。更重要的是，某些浏览器（如旧版 Safari）对 type="search" 应用特殊样式重置（如圆角、内边距），若未显式重置，可能和设计稿不一致。
- 搜索框优先用
type="search"，但需加 CSS 清除默认样式：input[type="search"]::-webkit-search-cancel-button { appearance: none; } - 不要指望
type="search"自动触发搜索 —— 它只是语义化标签，仍需监听input或submit事件 - 无障碍方面，
type="search"会被屏幕阅读器识别为“搜索字段”，比type="text"+aria-label更简洁可靠
date/time 类型在 iOS 和 android 上兼容性极差
type="date"、type="time"、type="datetime-local" 在桌面 Chrome/firefox 表现尚可，但在 iOS Safari 和部分安卓 webview 中要么不显示控件、要么弹出简陋的滚轮选择器（无年份范围、不支持 min/max）、甚至直接退化为文本框。
- 生产环境慎用原生日期控件，尤其面向移动端用户时；推荐用轻量 js 库（如 flatpickr）或自建输入+校验逻辑
- 若坚持用原生，必须设置
min、max和value（ISO 格式YYYY-MM-DD），否则 iOS 可能显示“Invalid Date” -
type="datetime-local"在 Safari 中不支持时区，且 value 必须带T和Z（如2024-05-20T14:30），否则解析失败
自定义 input 类型（如 type=”color”）不能靠 CSS 模拟
type="color" 是少数真正跨平台一致的类型：Chrome/Safari/Firefox 都弹出系统级取色器，返回标准 HEX 字符串（如 "#ff0000"）。试图用 type="text" + JS 插件模拟，会丢失系统集成能力（如 macos 的颜色面板、windows 的拾色器快捷键）。
立即学习“前端免费学习笔记（深入）”；
-
type="color"不支持透明度（alpha），要 RGBA 必须用其他方案 -
type="range"默认无刻度、无提示，需配合<output></output>和 JS 实时同步值，否则用户不知道当前滑块位置 - 所有非文本类
type（color、range、file）都不响应input.value.toUpperCase()这类字符串操作 —— 它们的value是只读语义值，类型固定
最常被忽略的一点：type 属性一旦设为非 text，就自动启用对应类型的原生验证，但这个验证不会阻止表单提交（除非加 required），也不会暴露错误信息给 JS —— 得靠 checkValidity() 和 validationMessage 主动查