form元素可用几乎所有全局属性，如id、class、data-*、hidden、style、title等；dir、lang虽合法但仅影响内部文本渲染；novalidate是表单专属属性而非全局属性。
form 元素能用哪些全局属性？
几乎所有全局属性都可用，但不是所有都有实际意义。比如 id、class、data- 系列、hidden、style、title 都能直接加在 <form></form> 上；而 dir 或 lang 虽然语法合法，但对表单提交行为无影响，仅作用于其内部文本渲染。
特别注意：novalidate 是布尔属性，但它属于表单专属属性，不是全局属性——别把它和 hidden 混为一谈。全局属性里没有“绕过验证”的开关，novalidate 是 <form></form> 自己的“特权属性”。
-
data-开头的属性可自由命名，适合存状态标识（如data-step="2"），JS 读取时用form.dataset.step -
hidden会让整个表单不可见且不参与 tab 键焦点流，比style="display:none"更语义化 -
title在鼠标悬停时显示提示，但对屏幕阅读器支持较弱，重要说明建议用<label></label>或<fieldset></fieldset>包裹
input 元素上 class 和 id 的常见误用
很多人把 id 当成样式钩子乱用，结果页面里出现多个相同 id="email"，导致 label[for="email"] 只绑定第一个，JS 的 document.getElementById("email") 也只返回一个元素——这会直接破坏可访问性和脚本逻辑。
class 倒是安全得多，但滥用也会带来维护问题：比如给每个 <input type="text"> 都加 class="form-input"，不如用属性选择器 input[type="text"] 统一控制。
- 一个页面中
id必须唯一；若需复用样式或行为，优先用class或data-属性 -
label关联必须靠for和id匹配，二者缺一不可；for值写错（如多空格、大小写不一致）就失效 - 用
name控制提交字段名，它和id无关——name="user_email"和id="email-field"完全可以不同
target 和 form 全局属性冲突怎么办？
当 <form></form> 本身有 target，同时内部某个 <input type="image"> 或 <button type="submit"></button> 也带 formtarget（注意不是 target），后者会覆盖前者。这是 HTML5 明确规定的优先级：按钮级 > 表单级。
但如果你在 <form></form> 上写了 target="_blank"，又在普通 <a></a> 链接里也用了 target="_blank"，那就得额外加 rel="noopener" 防 XSS——这个规则对表单提交同样适用，尤其当 action 指向第三方域名时。
-
formtarget是<input type="submit">和<button type="submit"></button>的专属属性，<input type="text">不支持 -
target="_self"是默认值，显式写出来没坏处，但没必要；target="_parent"在 iframe 场景下容易因嵌套层级出错，建议用 JS 动态判断 - 全局属性
target不能直接用在<input>上（除非是type="image"），否则会被忽略
hidden 属性与 JavaScript 控制显隐的本质区别
hidden 是语义化隐藏，浏览器会跳过它做焦点管理、屏幕阅读器跳过它朗读、甚至部分浏览器会暂停其中 <iframe></iframe> 或 <video></video> 的资源加载。而 style="display:none" 只是视觉隐藏，DOM 仍在活跃状态，JS 事件监听器照常工作，资源也不释放。
所以如果你有个分步表单，第二步内容初始用 hidden，切换时 JS 移除该属性，那比反复 toggle display 更干净——尤其当第二步里有 <input type="date"> 时，hidden 状态下它根本不会初始化原生日期控件，避免了无谓的 DOM 渲染开销。
-
hidden属性切换会触发toggle事件（需监听slotchange或用 MutationObserver 捕获，原生无 dedicated 事件） - 用 JS 控制时，推荐用
element.hidden = true/false，而不是操作setAttribute("hidden", "")，前者更可靠 - 不要对
<form></form>同时用hidden和disabled——disabled对<form></form>无效，只对表单控件生效
data- 属性看似只是存点字符串，但它决定了你后续能否用 CSS 属性选择器 input[data-required="true"] 做样式隔离，也决定了 JS 里要不要多写一层 getAttribute 调用。写的时候顺手加个引号、统一小写、避开保留字，省下的调试时间远超敲键盘那几毫秒。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
