type属性仅负责语义与基础行为，js和后端校验缺一不可；number类型易致值变空或nan，长数字吞零、step异常；推荐text+inputmode组合；date/time需严格iso格式；file控件前端限制无效，服务端必须重校验。
别指望 type 属性“自动帮你校验一切”——它只管语义、键盘和基础行为，真要拦住非法输入，JS 和后端一个都不能少。
type="number" 为什么总让你的表单值变空或错乱
用户粘贴 "123abc"、连续敲 "1.2.3"、输入 "-1-2"，浏览器不会截断，而是让 input.value 变成空字符串；valueAsNumber 则返回 NaN。提交时字段仍是字符串类型，后端若直接解析为数字会失败。
- step="0.1" 在 Chrome 中可能跳过 0.3，Firefox 不支持
step="any" - 长数字（如手机号）用
type="number"会导致开头0被吞，Android 还可能显示成1.23e+10 - 真正可控的做法：用
type="text"+inputmode="numeric"或inputmode="decimal"，再配合oninput正则过滤或parseFloat()校验
移动端键盘不弹对？问题大概率出在 type 和 inputmode 搭配上
type="tel" 唤起带 * 和 # 的电话键盘，type="email" 键盘右下角显示 @ 和 .com 快捷键——这些不是 CSS 控制的，是浏览器 UA 硬编码行为。但仅靠 type 不够精准：
- 国内手机号建议
type="tel"+inputmode="numeric"，避免type="number"吞零 - 金额输入需小数点？用
type="text"+inputmode="decimal"，比type="number"更稳 - 别给
type="email"加inputmode="text"，否则会丢掉邮箱键盘的快捷符号
date/time 类型的 value 必须严格 ISO 格式，错一位就白设
type="date" 的 value、min、max 都必须是 "YYYY-MM-DD"（如 "2026-05-11"），写成 "2026-5-11" 或 "11/05/2026"，浏览器直接忽略——控件看起来空，但 DOM 里 value 属性还在，容易误判。
-
datetime-local必须含T，如"2026-05-11T14:30"；time只接受"14:30"或"14:30:45"，不认"2:30 PM" - Safari 14+ 才有原生 date picker，旧版本需降级为
type="text"+ 第三方日历库 - 服务端接收时别信前端传来的格式，始终按 ISO 字符串解析并校验范围
file 输入框的 value 无法用 JS 设置，accept 也不是保险锁
<input type="file"> 是沙箱最严的控件之一：JS 赋值 input.value = "xxx" 完全无效；accept="image/*" 只是 UI 过滤提示，用户切到“所有文件”仍能选任意类型。
- 多文件必须显式加
multiple，否则 Ctrl+Click 选多个也只传第一个 -
capture="camera"在部分 Android 浏览器中会直接崩溃（截至 2026 年 4 月） - 服务端必须重新校验 MIME 类型（不能只看扩展名）、文件头、大小上限，前端校验只是体验优化
最常被忽略的一点：动态修改 type 属性（比如从 text 改成 number）会导致 valueAsNumber 等属性异常，甚至清空当前值——需要控制类型切换，优先用显隐替换，而非改 type。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
