使用required属性可将输入框设为必填项,只需在input、textarea或select等表单元素中添加该属性,浏览器会在提交时自动验证,未填写则阻止提交并提示;配合form标签和提交按钮实现完整表单验证,可通过CSS设置invalid样式优化外观,用title属性自定义提示信息,注意select默认选项值应为空字符串以确保验证生效。

要让输入框变为必填项,最简单的方法是使用HTML5的 required 属性。只要在表单元素中添加这个属性,用户在提交表单前就必须填写该字段,否则浏览器会自动提示并阻止提交。
使用 required 属性
在常见的表单控件如 input、textarea 或 select 中,添加 required 即可实现必填验证:
ail" name="email" required>
立即学习“前端免费学习笔记(深入)”;
配合 form 使用
确保输入框位于 标签内,并设置提交按钮:
提交时,若必填项为空,浏览器将弹出提示,光标定位到空字段。
样式与提示优化
可以通过CSS识别未通过验证的元素:
input:invalid {
border-color: #f00;
}
也可使用 title 属性自定义提示信息:
基本上就这些。HTML5的 required 属性轻量且兼容性好,适合大多数基础表单验证场景。不复杂但容易忽略细节,比如 select 元素默认选项值不能有内容,否则无法触发 required 验证。











