required属性仅支持input（除hidden、button等类型）、select（需空值disabled selected选项）和textarea；浏览器自动校验空值并阻止提交，触发时聚焦首个错误项并显示提示。
直接在表单控件上添加 required 属性，浏览器就会自动阻止提交空值，并显示默认提示，完全不需要写一行 JavaScript。
哪些元素支持 required 属性
required 是原生 HTML5 表单验证属性，仅对以下可输入的表单控件有效：
-
<input>（不包括type="hidden"、"button"、"submit"、"reset"、"image"） -
<select></select>（需配合<option></option>的空值或disabled selected初始项使用） <textarea></textarea>
基本用法示例
只需给目标控件加上 required 即可：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
注意：<select></select> 必须有一个初始 <option></option> 值为空且设为 disabled selected，否则浏览器可能认为已有选中项而绕过校验。
校验触发时机与行为
浏览器会在用户点击 type="submit" 按钮或调用表单 submit() 方法时触发校验：
- 若任一
required字段为空（或select未选择有效选项），表单不会提交 - 焦点会自动跳转到第一个未填写的必填项
- 该字段周围显示浏览器默认的红色高亮边框（样式因浏览器而异）
- 鼠标悬停或聚焦时，通常弹出气泡提示，如“请填写此字段”
增强体验的小技巧
虽然无需 JS，但可通过少量 HTML/CSS 提升可用性：
- 为必填字段添加视觉标识，例如星号：
<label>姓名 <font color="red">*</font></label> - 用 CSS 选择器
:invalid:not(:placeholder-shown)或:required:invalid自定义错误状态样式（注意兼容性） - 搭配
placeholder提示用户预期格式，但不能替代required，因为 placeholder 值不参与校验 - 避免对同一字段同时设置
required和value=""—— 这会导致页面加载即报错
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
