HTML5新增表单元素包括email、date、range、datalist、output等，旧浏览器会降级为text类型；需用Modernizr检测并配合JS插件或polyfill实现fallback。
HTML5新增表单元素有哪些，旧浏览器怎么 fallback
HTML5加了 <input type="email">、<input type="date">、<input type="range">、<datalist>、<output> 这些，但它们不是“新功能”，而是语义增强 + 浏览器原生支持。老浏览器不认识这些 type，会自动降级成 type="text"，所以表单仍能提交，只是没校验、没弹出日期选择器。
容易踩的坑是以为加了 type="email" 就不用前端校验了——其实 Safari 12 之前连基本格式都不校验，Chrome 也只拦空格不拦中文@符号；服务端必须兜底。
- 用
Modernizr.inputtypes.date或简单检测document.createElement('input').type === 'date'判断是否支持 - 不支持时用
<input type="text" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">+ JS 插件（如 flatpickr）补全 -
<datalist>没有 fallback 机制，IE 完全忽略，需额外用<select>或 JS 渲染下拉
required 和 pattern 属性在哪些浏览器里不可靠
required 在所有现代浏览器都生效，但 Android 4.3 及更早 WebView 里点提交按钮不触发校验；pattern 的正则引擎差异更大：Safari 对 Unicode 字符类（如 \p{L}）完全不支持，Chrome 88+ 才开始有限支持。
常见错误现象是用户填了“张三”却提示“不符合格式”，因为用了 pattern="[a-zA-Z]+" 却没考虑中文——这根本不是浏览器 bug，是你正则写错了。
立即学习“前端免费学习笔记（深入）”；
- 校验中文姓名别用
[a-zA-Z\u4e00-\u9fa5]，改用[\u4e00-\u9fa5\w\s]+并允许空格和常见符号 -
pattern不校验空值，required才管是否为空；两者要配合用 - Firefox 会把
pattern错误提示塞进title属性，但 Chrome/Safari 不显示，别依赖它做 UX 提示
formnovalidate 和 formaction 怎么绕过默认提交逻辑
这两个属性只对 <button type="submit"> 或 <input type="submit"> 生效，且必须写在按钮上，不能写在 <form> 上。很多人以为加在 form 标签上就能全局禁用校验，结果点了还是弹红框。
典型使用场景是“暂存草稿”按钮：不走表单校验，但要把当前字段发给后端。
- 写法必须是：
<button type="submit" formnovalidate formaction="/api/draft">保存草稿</button> -
formaction会覆盖<form action>，但formmethod不写时默认还是 POST - 注意：Safari 15.4 之前，
formnovalidate在某些嵌套表单中会失效，建议统一用 JSevent.preventDefault()+ fetch 替代
fieldset disabled 影响子元素的可访问性吗
影响。所有被 <fieldset disabled> 包裹的控件（<input>、<select>、<textarea>）不仅变灰、不可交互，还会从辅助技术（如屏幕阅读器）的可访问树中移除。这不是 bug，是规范行为。
如果你只是想视觉禁用但保留语义（比如“该选项暂不可选，但用户需要知道它存在”），disabled 就不合适。
- 改用
aria-disabled="true"+ CSS 控制样式，保持元素在 DOM 中且可读 -
<legend>在disabledfieldset 下仍可聚焦，但内部 input 无法获得焦点——这点常被忽略 - React/Vue 等框架里直接绑
:disabled="flag"到 fieldset，别绑到每个子元素上，否则破坏语义层级
