required属性仅支持input（除hidden、button等类型）、select（需空值disabled selected选项）和textarea；浏览器自动校验空值并阻止提交，触发时聚焦首个错误项并显示提示。
直接在表单控件上添加 required 属性，浏览器就会自动阻止提交空值，并显示默认提示，完全不需要写一行 JavaScript。
哪些元素支持 required 属性
required 是原生 HTML5 表单验证属性，仅对以下可输入的表单控件有效：
-
<input>（不包括type="hidden"、"button"、"submit"、"reset"、"image"） -
<select>（需配合<option>的空值或disabled selected初始项使用） <textarea>
基本用法示例
只需给目标控件加上 required 即可：
<form>
<label>姓名：</label>
<input type="text" name="name" required>
<label>邮箱：</label>
<input type="email" name="email" required>
<label>性别：</label>
<select name="gender" required>
<option value="" disabled selected>请选择</option>
<option value="male">男</option>
<option value="female">女</option>
</select>
<label>留言：</label>
<textarea name="message" required></textarea>
<button type="submit">提交</button>
</form>
注意：<select> 必须有一个初始 <option> 值为空且设为 disabled selected，否则浏览器可能认为已有选中项而绕过校验。
立即学习“Java免费学习笔记（深入）”；
校验触发时机与行为
浏览器会在用户点击 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=""—— 这会导致页面加载即报错
