required属性直接加在input、select、textarea标签中即可生效，仅校验是否为空值，不校验内容合法性；对checkbox表示必选，对select要求默认选项不能为空值，hidden类型无效，不同type行为差异大，且服务端必须二次校验。
HTML 表单里 required 属性怎么加才生效
直接加在 <input>、<select></select> 或 <textarea></textarea> 标签里就行，浏览器原生校验会自动拦截空提交。但得注意：它只检查控件是否有值，不校验内容是否合法（比如邮箱格式不对也能过）。
-
required是布尔属性，写required="required"或required=""都行，但最简写法是只写required - 对
<input type="checkbox">，它表示“必须勾选”；对<select></select>，默认选项不能带selected且值为空（比如<option value="">请选择</option>），否则用户不选也能绕过 -
<input type="hidden">加了required没用，浏览器直接忽略
required 在不同 input 类型下的行为差异
不是所有类型都按直觉工作。比如 type="number" 空时看似有值（显示为空字符串），但校验时会被当作“无输入”，required 起效；而 type="date" 在未选择时值为 ""，同样触发校验。但 type="email" 即使填了 @ 也算“有值”，required 不管格式对错。
-
type="file"：必须至少选一个文件，required才通过 -
type="radio"：同一name下任意一个加required，就表示该组必选 -
type="range"或"color"：空值概念模糊，实际中required基本无效，别依赖
表单提交被阻止但没提示？常见原因和修复
用户点了提交，页面没反应，控制台也没报错——大概率是浏览器弹了原生提示（如 Chrome 在字段旁标红+气泡），但被 CSS 隐藏了，或用户根本没注意到。这不是 bug，是 required 的默认行为。
- 检查是否用了
input::-webkit-validation-bubble类样式强行隐藏了提示 - 如果用 JS 调用了
form.submit()，会跳过校验；必须用click触发原生提交按钮，或手动调checkValidity() - 某些 UI 框架（如 Ant Design）封装了原生控件，
required可能被忽略，得看文档是否支持透传
和服务端校验的关系：不能只靠 required
前端 required 纯属用户体验优化，删掉 HTML 属性、禁用 JS、用 curl 提交，照样能绕过。服务端必须重新校验字段是否存在、是否为空字符串、是否为 null。
立即学习“前端免费学习笔记（深入）”；
- 后端收到空字符串
""、" "（带空格）、null，都应视为缺失，不能只判== null - 前后端对“空”的定义要一致：比如手机号字段，
"000"算不算空？得协商清楚，前端可加pattern辅助，但不能替代后端逻辑 - 移动端 WebView 或老旧浏览器（如 iOS Safari 12 以下）对
required支持不稳定，关键流程必须兜底
真正麻烦的从来不是加个 required，而是当它看起来“起作用”了，就让人误以为校验完整了。
