直接复制粘贴的表单样式失效，因多数模板忽略结构语义与状态联动：需设name、type、required等属性以激活:valid/:invalid；label须用for关联id；禁用display:none隐藏必填字段；css应绑定原生验证伪类而非class；错误提示须用aria-invalid+aria-describedby配合setcustomvalidity；关键三行html（form[novalidate]、label[for]+input[id/name/type/required]、button[type=submit]）缺一不可。
为什么直接复制粘贴的表单样式总在新项目里失效
因为多数“通用表单模板”只管视觉，不管结构语义和状态联动。比如 :valid 和 :invalid 伪类依赖 name、required、输入类型（type="email"）等原生约束才能触发；没这些，CSS再漂亮也白搭。
- 必须为每个
<input>、<select></select>、<textarea></textarea>设置name属性，否则提交无数据，验证也无效 -
label必须用for关联对应控件的id，否则点击标签不聚焦，屏幕阅读器无法读取 - 不要用
display: none隐藏必填字段——它会让:invalid:not(:placeholder-shown)失效，浏览器认为该字段“未参与验证”
如何用纯CSS控制表单实时验证状态
关键不是写一堆 class，而是绑定浏览器原生验证生命周期。CSS 能响应的只有伪类，而它们生效的前提是 DOM 元素真实处于某状态。
-
:focus：聚焦时加外发光或边框高亮，但别仅靠它做错误提示——用户可能没点进去就提交了 -
:valid：仅当值通过所有约束（required、type、pattern、min/max）才触发，适合绿色对勾图标 -
:invalid:not(:placeholder-shown)：这是最实用组合——排除 placeholder 占位时的误判，真正反映用户已输入但格式错 - 避免用
:required:invalid单独选中，它在空值时也匹配，容易和非必填字段混淆
自定义错误提示不覆盖原生气泡，还能保持无障碍
浏览器默认的 title 提示或弹窗气泡不可样式化，且会干扰屏幕阅读器。正确做法是用 aria-invalid + aria-describedby 关联实时错误文案。
- 在 JS 中调用
setCustomValidity("邮箱格式不正确")后，手动设置element.setAttribute('aria-invalid', 'true') - 在控件旁放一个
<span id="email-error"></span>，并让控件的aria-describedby="email-error" - CSS 里用
[aria-invalid="true"] + span显示错误文案，确保视觉与语义同步 - 千万别用
visibility: hidden或opacity: 0隐藏错误文案——屏幕阅读器仍会读，造成误导
表单模板里最容易被删掉却至关重要的三行HTML
很多开发者为了“简洁”删掉这三行，结果导致验证失效、可访问性崩塌、移动端键盘不弹出：
-
<form method="post" novalidate></form>——novalidate不是禁用验证，而是把控制权交给 JS；没它，原生气泡会和自定义提示打架 -
<label for="email">邮箱</label><input type="email" id="email" name="email" required>——type="email"触发软键盘类型、基础格式校验；required是:invalid的前提 -
<button type="submit">提交</button>—— 缺少type="submit"的按钮不会触发表单 submit 事件，JS 监听失效
模板不是越短越好，是每行都得有明确职责。删掉任意一行，后续样式和脚本大概率要重写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
