HTML5新增input类型及属性大幅简化表单开发：13种type（如email、date）实现原生校验与软键盘适配；required/placeholder/autocomplete提升无障碍体验；验证API（checkValidity等）支持动态规则；需注意回退方案与移动端差异。
HTML5 新增的
HTML5 引入了 13 种新的 type 值，比如 email、url、number、date、tel 等。这些不是“花架子”——现代浏览器会自动触发原生校验、调出对应软键盘（移动端）、甚至阻止非法提交。
常见错误现象：仍用 type="text" + 正则 JS 校验邮箱，结果在 iOS Safari 上无法唤起邮箱专用键盘，用户输入体验差，且校验时机滞后（提交时才报错）。
-
type="email"会检查是否含@和域名结构，表单submit时自动阻断非法值 -
type="number"支持min/max/step，且在 Chrome 中显示上下微调按钮；但注意：它返回的是字符串（非数字），需手动parseFloat() -
type="date"在桌面 Chrome/Firefox 显示日期选择器，在 Safari/旧 Edge 则回退为文本框——必须搭配pattern和 JS 补充校验
required、placeholder、autocomplete 这三个属性已成表单标配
它们不依赖 JS 就能生效，且语义明确、无障碍友好。尤其 autocomplete 不只是“记住密码”，而是精确控制字段用途（如 autocomplete="billing street-address"），直接影响密码管理器能否正确填充。
容易踩的坑：placeholder 不是 label 替代品——它不提供可访问性（screen reader 不读），且焦点进入后消失，会导致表单意图丢失。
-
required触发浏览器原生提示（如 “请填写此字段”），但文案不可自定义；如需定制提示，得用setCustomValidity() -
autocomplete="off"在现代浏览器中基本失效（尤其密码字段），真正禁用应设为autocomplete="new-password" -
autocomplete值必须严格匹配 WHATWG 规范列表（如"email"、"organization"），拼错等于没写
HTML5 表单验证 API 让你绕过正则手写校验逻辑
不用再监听 input 或 blur 手动比对正则——checkValidity()、reportValidity()、setCustomValidity() 这套 API 与原生校验深度绑定，且兼容 CSS 伪类 :valid/:invalid。
使用场景：需要动态控制校验规则（例如“手机号仅当国家选中国时才必填”），或整合后端返回的业务级错误（如“用户名已被占用”）。
const phoneInput = document.querySelector('input[name="phone"]');
phoneInput.addEventListener('input', () => {
if (phoneInput.value && !/^1[3-9]\d{9}$/.test(phoneInput.value)) {
phoneInput.setCustomValidity('请输入有效的 11 位中国大陆手机号');
} else {
phoneInput.setCustomValidity(''); // 清空才能恢复原生校验
}
});
- 调用
setCustomValidity('')是关键动作，否则后续所有校验都失败 -
reportValidity()主动触发校验并显示气泡提示，适合在自定义按钮点击时调用 - CSS 中用
input:invalid:not(:placeholder-shown)可避免 placeholder 状态下误标红
移动端软键盘适配差异极大，别假设所有 type 都有效
iOS 和 Android 对同一 type 的软键盘响应不一致。比如 type="number" 在 iOS 上只弹数字键盘（无小数点），而 Android 大多带小数点和负号；type="search" 在 iOS 有搜索按钮，Android 却可能仍是回车键。
性能影响：滥用 type="number" 做金额输入反而引发问题——用户无法粘贴、无法输入千分位逗号、无法输入货币符号，最终不得不切回 text + JS 格式化。
- 金融类输入建议用
type="text"+inputmode="decimal"（更细粒度控制键盘类型，iOS 16.4+ / Android Chrome 100+ 支持） -
inputmode是比type更轻量的键盘提示，不影响校验逻辑，可与type="text"共存 - 永远为
type="date"或type="time"提供fallback文本输入方案（如加一段说明：“如无法选择日期，请输入 YYYY-MM-DD 格式”）
type 和 attribute 在不同设备、不同校验阶段的真实行为。最常被忽略的，是回退逻辑和可访问性边界——比如以为加了 required 就万事大吉，却忘了屏幕阅读器用户根本看不到 placeholder 提示。
