在HTML5的表单开发场景中，突出必填标识能够帮助用户快速识别必须填写的字段，有效降低表单提交的错误率，提升整体交互体验。实现必填标识的突出效果有多种方式，开发者可以根据页面的设计需求选择合适的方法。
使用原生required属性配合默认提示
HTML5为表单输入元素提供了原生的required属性，添加该属性后，浏览器会默认将对应字段标记为必填，并且在用户未填写时给出默认的提示信息。这种方式不需要额外编写大量代码，兼容性也比较好。
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生required示例</title>
</head>
<body>
<form>
<p>
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
上述代码中，input元素添加了required属性，浏览器会在输入框旁边显示默认的必填提示，提交时如果未填写会弹出默认的提示文案。
自定义必填标识样式
默认的必填标识样式可能不符合页面的设计风格，此时可以通过CSS来自定义必填标识的显示效果，比如在必填字段的标签后面添加红色星号。
使用伪元素添加星号标识
可以通过:required伪类选择器选中所有必填的表单元素，再配合::after伪元素添加自定义的星号标识，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义必填标识</title>
<style>
/* 选中所有必填的input、select、textarea元素 */
input:required, select:required, textarea:required {
border: 1px solid #ccc;
padding: 5px;
}
/* 为必填元素的标签后面添加红色星号 */
label:has(+ input:required)::after,
label:has(+ select:required)::after,
label:has(+ textarea:required)::after {
content: " *";
color: #ff0000;
font-weight: bold;
}
/* 提交按钮样式 */
input[type="submit"] {
margin-top: 10px;
padding: 5px 15px;
}
</style>
</head>
<body>
<form>
<p>
<label for="email">邮箱</label>
<input type="email" id="email" name="email" required>
</p>
<p>
<label for="phone">手机号</label>
<input type="tel" id="phone" name="phone" required>
</p>
<p>
<label for="address">地址</label>
<input type="text" id="address" name="address">
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
上述代码中，通过label:has(+ input:required)::after选择器，为必填输入框对应的标签后面添加了红色星号，非必填字段则不会显示该标识。
修改输入框的边框样式突出必填
除了添加星号，还可以通过修改必填输入框的边框样式来突出标识，比如将必填输入框的边框设置为橙色，示例代码如下：
/* 必填输入框边框样式 */
input:required, textarea:required, select:required {
border: 2px solid #ffa500;
border-radius: 4px;
}
/* 非必填输入框边框样式 */
input:not(:required), textarea:not(:required), select:not(:required) {
border: 1px solid #ddd;
border-radius: 4px;
}
结合JavaScript实现动态提示
如果需要更灵活的必填提示效果，比如用户聚焦到必填字段时显示提示文案，可以结合JavaScript实现动态交互。
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态必填提示</title>
<style>
.required-tip {
color: #ff0000;
font-size: 12px;
display: none;
margin-left: 10px;
}
input:required {
padding: 5px;
}
</style>
</head>
<body>
<form>
<p>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
<span class="required-tip">该字段为必填项</span>
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
<script>
// 获取所有必填输入框
const requiredInputs = document.querySelectorAll('input[required]');
requiredInputs.forEach(input => {
const tip = input.nextElementSibling;
// 聚焦时显示提示
input.addEventListener('focus', () => {
if (tip && tip.classList.contains('required-tip')) {
tip.style.display = 'inline';
}
});
// 失焦时如果已填写则隐藏提示
input.addEventListener('blur', () => {
if (tip && tip.classList.contains('required-tip')) {
if (input.value.trim() !== '') {
tip.style.display = 'none';
}
}
});
});
</script>
</body>
</html>
上述代码中，当用户聚焦到必填的密码输入框时，会显示对应的必填提示文案，失焦后如果已经填写了内容，提示文案会自动隐藏。
不同方法的适用场景
不同的必填标识突出方法适用于不同的场景：
- 原生
required属性适合对样式要求不高、追求快速实现的场景，兼容性好且无需额外代码。 - CSS自定义样式适合需要统一页面设计风格、需要自定义标识样式的场景，灵活性较高。
- JavaScript动态提示适合需要复杂交互逻辑、需要自定义提示时机和内容的场景，可扩展性更强。
开发者可以根据实际的开发需求选择合适的实现方式，也可以将多种方式结合使用，达到更好的用户体验效果。
HTML5必填标识form表单required属性修改时间：2026-07-13 22:51:39