required属性用于标记表单字段为必填项，浏览器会自动校验并提示用户补全信息。支持该属性的元素包括input、textarea、select等，常见输入类型如text、email、checkbox、radio等均适用。示例中姓名、邮箱和留言字段均设为必填，提交时若为空将触发高亮提示并阻止提交。可通过JavaScript自定义验证提示或手动触发校验。需注意：前端验证不可替代后端校验；旧版浏览器（如IE9）不支持；避免滥用以免影响体验；应明确标注必填项而非依赖placeholder。合理使用可提升表单交互规范性，适用于注册、登录等场景。
HTML表单中的 required 属性用于指定某个输入字段在提交表单前必须填写，是一种简单有效的前端验证方式。浏览器会自动拦截未填的必填项，并提示用户补全信息。
required 属性的基本用法
只需要在支持该属性的表单控件中添加 required 关键字即可启用必填验证。常见支持的元素包括：input、textarea、select 等。
示例代码：
<form> <label>姓名：<input type="text" name="username" required></label><br> <label>邮箱：<input type="email" name="email" required></label><br> <label>留言：<textarea name="message" required></textarea></br> <button type="submit">提交</button> </form>
当用户点击“提交”时，若这些字段为空，浏览器会弹出提示，阻止表单提交。
立即学习“前端免费学习笔记（深入）”；
支持 required 的输入类型
并不是所有 input 类型都支持 required 属性。以下是常用支持类型：
例如，限制必须同意协议：
<input type="checkbox" name="agree" required> 我已阅读并同意条款
浏览器验证行为与用户体验
使用 required 后，浏览器会在提交时自动校验。若字段为空，通常会：
- 高亮显示未填字段（如红框）
- 弹出默认提示信息（如“请填写此字段”）
- 阻止表单提交
可以通过 JavaScript 进一步控制验证过程，比如自定义提示内容：
document.querySelector('input[name="username"]').setCustomValidity('请输入您的姓名');
也可通过 checkValidity() 方法手动触发验证。
注意事项与最佳实践
虽然 required 很方便，但要注意以下几点：
- 它只是前端验证，不能替代后端校验。恶意用户可绕过前端，因此服务器端仍需验证数据完整性。
- 某些旧版浏览器（如 IE9 及以下）不支持 required，需考虑兼容性或使用 JS 补充。
- 配合 placeholder 使用时，不要仅依赖占位文字提示用户必填，应通过标签或星号明确标注。
- 对于搜索类或非关键表单，避免滥用 required，以免影响用户体验。
基本上就这些。合理使用 required 属性，能显著提升表单填写的规范性和交互体验，尤其适合注册、登录、反馈等场景。不复杂但容易忽略细节。
