type="number"不实时阻止非法输入，仅提交时校验；需结合inputmode、pattern和input事件正则清理实现纯数字输入，value始终为字符串，数值运算须显式转换。
HTML 表单里 input 的 type 不是随便选的——选错类型，轻则移动端弹出错误键盘，重则浏览器跳过原生验证、提交非法值、甚至被屏幕阅读器误读。
type="number" 为什么有时不校验？
浏览器只在用户输入「纯数字字符串」时触发 number 类型的内置验证；一旦输入中混入空格、单位（如 "18px"）、逗号或中文数字，它就退化为普通文本框，min/max/step 全部失效。
- 确保
value属性值是数字字符串（如value="25"），不要写成value="25岁" - 用
inputmode="numeric"强制软键盘数字布局，但注意它不替代type的语义和验证 - 后端必须二次校验——因为用户可绕过前端禁用 JS 或直接修改 DOM
-
pattern在type="number"中被忽略，需改用 JavaScript 监听invalid事件补位
type="email" 和 type="url" 的验证边界在哪？
它们只做基础格式检查：type="email" 接受 "a@b.c" 这种极简写法；type="url" 允许无协议（如 "example.com"）或仅含路径（如 "/login"），并不真正联网验证可达性。
- 别依赖它防恶意 URL 注入——
"javascript:alert(1)"在部分旧浏览器中可通过type="url"校验 -
required+type="email"能阻止空提交，但无法替代邮箱真实性验证（如发送确认信） - 移动端会自动调起邮箱/网址专用键盘，这是唯一确定性收益
- 若需更严格式（如限制域名后缀），必须配合
pattern和title提示，例如pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$" title="请输入有效邮箱"
radio 和 checkbox 的 name 与 value 怎么配才不出错？
radio 组必须共用完全相同的 name 值才能互斥；checkbox 若需提交为数组，name 后加 [] 是常见做法，但实际是否解析为数组取决于后端语言（PHP 自动识别，Node.js 需中间件处理）。
-
radio没有选中项时，整个name键不会出现在提交数据中——不是传null，而是根本不存在 -
checkbox未勾选时，对应name完全不提交；不能靠默认值兜底，得在后端设 fallback -
value必须是字符串，不要写value={true}（JSX 中易犯），应写value="true" - 用
<label></label>包裹input或用for关联，否则点击文字无法触发选中——这是可访问性硬要求，不是样式问题
date/time 等语义类型在 Safari 和旧 Android 上怎么降级？
这些类型在 iOS Safari 和 Android 4.4 以下基本不可用，会回退为 type="text"，且不触发任何日期选择器。没有“优雅降级”机制，只有“功能降级”。
- 不要给
type="date"加placeholder="YYYY-MM-DD"——它在支持的浏览器中不显示 placeholder - 检测支持性用
document.createElement('input').type = 'date'，但注意赋值后返回的是实际生效的类型（不支持时返回"text"） - 第三方库（如 flatpickr）是主流解法，但引入前要权衡：一个日期控件是否值得增加 50KB JS
-
inputmode="numeric"对type="tel"有效，但对type="date"无效——别混用
最常被忽略的一点：所有 input 的 name 属性一旦缺失，该字段就永远不会出现在表单提交数据中，无论类型多正确、值多合法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
