HTML5表单新增实用属性包括required、placeholder、autofocus、autocomplete、pattern、min/max/step、multiple及form属性，显著提升语义化、验证能力与用户体验。
HTML5 表单新增的实用属性有哪些
HTML5 在 、、 等元素上补充了大量语义化、验证友好、用户体验更直接的原生能力，不用 JS 就能完成很多过去必须手写的逻辑。
关键新增属性包括：
-
required：标记必填，提交时浏览器自动拦截空值 -
placeholder：输入框内浅色提示文本，聚焦即消失（HTML4 完全没有） -
autofocus：页面加载后自动获得焦点，省去document.getElementById().focus() -
autocomplete="on/off"及细粒度值如"email"、"tel"、"shipping street-address"，帮助浏览器精准填充 -
pattern：支持正则表达式校验，例如pattern="[0-9]{6}"限制 6 位数字 -
min/max/step：对type="number"、"date"、"range"等类型生效，约束取值范围 -
multiple：允许或type="file"一次选多个值 -
form属性：让表单控件脱离DOM 嵌套结构，仍可归属指定表单（ID 引用）
HTML4 表单缺失的关键功能
HTML4 的表单本质是“纯容器+基础控件”，所有交互逻辑都依赖外部脚本。它缺少三类核心能力：
-
语义化类型缺失：只有
text、password、checkbox等通用类型，没有email、url、date、color、search等专用类型，导致移动端无法弹出对应键盘（如数字键盘、邮箱键盘） -
原生验证能力为零：没有
required、pattern、minlength、maxlength等属性；所有校验必须手动监听submit事件 + 正则 + 提示 DOM -
无结构化数据绑定机制：不支持
formdataAPI（HTML5 新增），HTML4 下用new FormData(form)会报错；也无法通过form.elements直接按 name/type 分组访问
type 属性扩展带来的实际差异
HTML5 新增的 type 值不只是“换了个名字”，它们直接影响渲染、交互和验证行为：
立即学习“前端免费学习笔记（深入）”；
-
type="email"：浏览器自动校验基本邮箱格式（含 @ 和域名），移动端弹出 @ 键优先的键盘 -
type="tel"：不自动校验（因各国格式差异大），但触发数字键盘或电话拨号界面 -
type="date"：桌面端显示日期选择器，移动端调起系统日历；且value固定为YYYY-MM-DD格式，无需手动解析 -
type="number"：禁用非数字输入（粘贴除外），配合step="0.01"可支持小数，min="0"阻止负数 -
type="search"：输入框右侧自动添加清空按钮（×），部分浏览器还集成搜索建议
注意：type="color" 渲染为取色器，但它的 value 始终是 7 位十六进制字符串（如 "#ff0000"），不支持透明度。
兼容性与 fallback 处理要点
老版本 IE（≤9）完全不识别 HTML5 表单属性和 type 值，但它们会优雅降级：不认识的 type 值一律当作 text，忽略未知属性（如 required）。
- 不需要为 IE9- 写 polyfill 来“模拟”
required，因为降级后它只是没校验——你仍需用 JS 补充校验逻辑 - 若用
type="date"，IE9- 会变成普通文本框，此时应提供 JS 日期插件（如 flatpickr）并用Modernizr.inputtypes.date检测是否原生支持 -
pattern在 Safari 10.1+ 才支持中文正则（如[\u4e00-\u9fa5]），旧版需避免在 pattern 中写中文匹配 - 使用
formnovalidate属性可对特定提交按钮关闭所有原生验证（比如“暂存草稿”按钮）
真正容易被忽略的是：原生验证只在表单提交（submit 事件）或调用 checkValidity() 时触发，input 或 change 事件中不会自动校验——这点和很多人直觉相反。
