使用required属性可简单有效设置HTML表单必填项，适用于input、textarea、select等元素，结合placeholder和CSS可提升用户体验，但需注意浏览器兼容性及后端验证。
在HTML表单中设置必填项，最简单有效的方法是使用 required 属性。这个属性适用于大多数表单元素，能确保用户在提交表单前必须填写对应字段。
1. 使用 required 属性标记必填字段
只需在输入框（如 input、textarea、select 等）中添加 required 属性，浏览器就会自动验证该字段是否为空。
示例：
当用户尝试提交空字段时，浏览器会弹出提示：“请填写此字段”，并阻止表单提交。
立即学习“前端免费学习笔记（深入）”；
2. 支持 required 的常用表单元素
以下元素都可以使用 required 属性：
-
文本框：
input[type="text"] -
邮箱：
input[type="email"] -
密码：
input[type="password"] -
数字：
input[type="number"] -
下拉选择框：
select -
多行文本：
textarea - 单选按钮和复选框也可用，但需注意验证逻辑
3. 结合 placeholder 提升用户体验
虽然 required 能强制填写，但建议配合 placeholder 给用户提示：
这样用户一眼就能看出哪些是必填项，并知道该怎么填。
4. 注意事项与兼容性
一些细节需要留意：
- required 是 HTML5 属性，现代浏览器都支持，但老版本 IE 可能不生效
- 前端验证不能替代后端验证，服务器端仍需检查数据完整性
- 可以结合 CSS 伪类 :required 来样式化必填项，比如加星号标识
例如用CSS标红星号：
input:required::before {
content: "*";
color: red;
}
基本上就这些。用 required 属性设置必填项简单直接，是开发中非常实用的功能。不复杂但容易忽略细节，合理使用能显著提升表单体验。
