HTML的<input> type属性需兼顾语义、校验与移动端体验：type=tel适配数字键盘并提升可访问性，type=email/url提供基础校验但须后端补充，type=date/time存在兼容性问题需降级处理，动态修改type会导致valueAsNumber等属性异常。
HTML 的 <input> 标签 type 属性不是“选一个就行”，而是要按语义、校验需求和移动端体验三者共同决定——选错 type，轻则触发不了软键盘正确布局，重则绕过浏览器原生校验、埋下表单兼容性坑。
type=text 和 type=tel 在移动端表现差异极大
很多人以为 type="text" 能通用，但实际在 iOS/Android 上，type="tel" 会唤出数字键盘（带 * # 键），而 type="text" 默认是全键盘。更关键的是：type="tel" 不触发浏览器邮箱/URL 类型的自动校验，也不会阻止用户输入字母（这点常被误认为“失效”）；但它能让屏幕阅读器识别为电话字段，且部分浏览器支持 inputmode="numeric" 进一步约束输入习惯。
- 手机号、固话、分机号等纯数字或含符号的字段，优先用
type="tel"，再配合pattern="[0-9*#+\s]{5,20}"做轻量级格式提示 - 避免用
type="number"接收手机号——它会把开头 0 吞掉，且 Android Chrome 对长数字会显示科学计数法 - 若需强制纯数字+禁止粘贴，得额外加
oninput="this.value=this.value.replace(/\D/g,'')"，但这是兜底手段，非 type 本职
type=email 和 type=url 的校验逻辑很实在，但别依赖它做唯一验证
type="email" 和 type="url" 触发的是浏览器内置正则校验（如 Chrome 对 type="email" 要求含 @ 符且前后有字符），失败时调用 reportValidity() 会弹原生提示。但要注意：它们不校验域名是否存在、协议是否完整（foo@bar 通过 type="email"，example.com 也能通过 type="url"）。
-
type="email"必须含 @，但不要求 TLD（所以u@x合法）；建议搭配required和后端二次校验 -
type="url"允许无协议（google.com可通过），但若写成https://开头，必须格式完整；真正要限制 HTTPS，得用pattern="^https?://.+" - 别给
type="email"加inputmode="text"——这会覆盖默认软键盘行为，失去邮箱键盘的 @ 和 .com 快捷键
type=password 和 type=search 的隐藏副作用
type="password" 除了掩码显示，还会禁用自动填充（autofill）的用户名字段联想；而 type="search" 在 Safari 和部分 Android 浏览器中，会自动添加清空按钮（× 图标），且默认圆角比 text 更明显——这些不是 CSS 控制的，是 UA 样式硬编码。
立即学习“前端免费学习笔记（深入）”；
- 密码框若需“显示明文”，不要切换
type值（如从 password 改 text），应保持type="password"+ CSStext-security: none（仅 Safari 支持）或用两个字段 toggle 显示 -
type="search"输入内容为空时，value是空字符串，但提交时不会被忽略；若想清空后不参与提交，得手动设value=""或用formdata.delete("key") - 搜索框建议加
autocomplete="off"，否则 Chrome 可能强行注入历史记录下拉项，盖住自定义下拉菜单
type=date / time / datetime-local 的兼容性现实
type="date" 在 Chrome/Edge/Firefox 桌面端已稳定，但在 iOS Safari 仍渲染为 text 输入框（无日期选择器），仅在 iOS 原生 WebView 或 PWA 添加到主屏后才生效。而且所有浏览器对 min/max 的解析粒度不同：Chrome 支持 datetime-local 的秒级控制，Safari 却只认到分钟。
- 生产环境用
type="date"前，必须 fallback 到 JS 日期库（如 flatpickr）或至少提供placeholder="YYYY-MM-DD"和格式提示文案 -
type="datetime-local"的 value 始终是本地时区字符串（如"2024-05-20T14:30"），没有时区标识；若需 UTC 时间，得靠 JS 转换，不能靠 input 自身 - 不要给
type="time"设step="60"期望只显示整点——Firefox 忽略该属性，Chrome 虽支持但 UI 仍显示秒数选择器
最易被忽略的一点：type 属性变更后，input 元素的 valueAsNumber、valueAsDate 等只读属性行为会突变，且不可逆；比如从 type="text" 改成 type="number"，之前存的 "123abc" 会变成 NaN——这类隐式转换在动态表单中极易引发逻辑断裂。
