html input 的 type 属性拼写错误或大小写不符会导致浏览器静默降级为 text，使邮箱校验、数字键盘、min/max 等原生功能全部失效，必须严格按 html5 规范小写书写并借助工具校验。
HTML input 标签看着简单，但实际项目里出问题最多——不是不能用，而是“看似正常却悄悄失效”。核心原因就一条：浏览器对 type 属性的解析是硬编码逻辑，拼错、用错、漏兼容，它不会报错，只会默默降级成 type="text"，然后你花半天调试 JS 验证或 CSS 样式，其实问题早就在第一行 HTML 里了。
type 属性拼写错误或大小写敏感导致原生功能丢失
这是最隐蔽也最高频的问题。比如把 email 写成 emial，把 number 写成 NUMBer，浏览器不报错，但所有关联行为全消失：邮箱校验没了、移动端键盘还是字母键盘、min/max 失效、甚至 required 提交时都不拦。
- 检查所有
type值是否严格匹配 HTML5 规范小写拼写（email、tel、search、datetime-local等） - 避免手写拼写，直接从 MDN 或 VS Code 自动补全中选，别凭记忆敲
- 用 Lint 工具（如 eslint-plugin-html）配置
input[type]白名单校验，提前拦截非法值
移动端数字/电话输入框弹出全键盘而非数字键盘
写了 type="number" 却在 iOS 或 Android 上仍弹出字母键盘？常见原因是语义错配：number 是为纯数值计算设计的，它禁止输入空格、括号、连字符——而手机号、身份证号、带分隔符的金额显然不符合。
- 手机号优先用
type="tel"：它不校验格式，但强制调起数字键盘，且允许任意字符输入 - 需要数值计算的场景（如年龄、价格）才用
type="number"，并配合inputmode="numeric"作双重保险（部分安卓机更认这个） - 避免给
type="number"加pattern或正则，它会和原生数字校验冲突，反而禁用上下箭头或清空按钮
密码框右侧“小眼睛”图标与自定义 UI 冲突
Chrome/Edge 默认加的 ::-webkit-credentials-auto-fill-button 和 IE 的 ::-ms-reveal 不是装饰，是可交互控件。它会覆盖你写的图标、挡住点击区域，甚至在 autofill 时自动触发显示逻辑。
- 隐藏必须分内核处理：
input[type="password"]::-webkit-credentials-auto-fill-button+input[type="password"]::-ms-reveal缺一不可 - 仅设
visibility: hidden不够，得加pointer-events: none，否则它仍会拦截鼠标事件 - 如果用了第三方密码强度库或自定义 toggle 按钮，记得在 JS 中手动控制
type切换（password↔text），别只靠 CSS 显隐
表单回车提交刷新页面，但页面里明明没有 submit 按钮
只要 form 里有且仅有一个可交互的 input（哪怕其他 input 是 disabled 或 type="hidden"），回车就会触发表单提交。这不是 bug，是 HTML 规范明确写的默认行为。
- 最稳解法：给
form加onsubmit="return false;"或用 JSevent.preventDefault()拦住 submit 事件 - 轻量解法：加一个不可见但可聚焦的
input，比如<input type="text" style="position: absolute; left: -9999px;" tabindex="-1">，破坏“唯一可交互”条件 - 注意
type="hidden"不算可交互项，但type="text"即使readonly或display: none仍算——浏览器只看标签类型和是否被禁用，不看样式
真正难的从来不是写对一行 input，而是意识到：浏览器的“默认行为”不是建议，是契约；你没显式声明的每一个细节，它都按规范默默执行了。所以排查时别急着查 JS，先盯着那一行 type 值，看三遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
