HTML required 属性

HTML required 语法

在 HTML 中，required 属性用于定义表单元素是否为必填。如果内容为空，则不允许提交。

只有以下类型的元素支持 required 属性：

大多数 input 类型（如 <input type="text">、<input type="search"> 等）。
textarea。
select。

语法：

<input type="text" required>

<textarea required></textarea>

<select required></select>

说明：

required 是一个布尔属性。在 HTML5 标准中，下面 2 种写法是等价的。

<!--写法1-->
<input type="text" required>

<!--写法2-->
<input type="text" required="required">

什么是布尔属性？

布尔属性（Boolean Attributes），是一种特殊的 HTML 属性。它们的存在本身就表示一个 true（真）值，而它们的缺失则表示 false（假）值。这些属性不需要显式赋值（如 true 或 false），只要属性名存在即可。

就拿 required 属性来说：

<input type="text" required>：表示这个文本输入框是 “必填” 的。
<input type="text">：表示这个文本输入框是 “非必填” 的。

对于布尔属性来说，虽然下面 2 种写法是等价的。但 HTML5 更加推荐写法 1（即只写属性名、不带任何值）

<!--写法1：推荐-->
<input type="text" required>

<!--写法2-->
<input type="text" required="required">

注意，下面这种写法是错误的。

<!--错误写法-->
<input type="text" required="true">

其中，常见的布尔属性有：

autofocus：页面加载时，元素自动获得焦点。
hidden：是否隐藏元素。
checked：是否选中，用于单选按钮和复选框。
disabled：是否禁用。
readonly：是否只读。
required：是否必填，用于 input、textarea 和 select 元素。
selected：是否选中，用于 option 元素。
multiple：是允许多选，用于 input 和 select 元素。
novalidate：是否跳过内置的验证功能，用于 form 元素。
autoplay：是否自动播放，用于 audio 和 video 元素。
loop：是否循环播放，用于 audio 和 video 元素。

HTML required 摘要

适用元素	input、textarea、select
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML required 示例

接下来，我们通过几个简单的例子来讲解一下 HTML required 属性是如何使用的。

示例 1：required 属性用于文本框

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        input:required:invalid {
            border: 1px solid red;
        }
        input:required:valid {
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <form action="/login" method="post">
        <p>
            <label>
                账号：
                <input type="text" name="username" required>
            </label>
        </p>
        <p>
            <label>
                密码：
                <input type="password" name="password" required>
            </label>
        </p>
        <p>
            <button type="submit">登录</button>
        </p>
    </form>
</body>
</html>

页面效果如下图所示。

required 属性用于文本框

分析：

在这个例子中，我们为 input 元素添加了 required 属性。当 “账号” 或 “密码” 这两个文本框为空时，如果尝试提交表单，则浏览器会阻止表单提交并显示一个内置的错误提示（通常是 “请填写此字段”）。

当我们输入内容后，边框颜色会变为绿色（使用 CSS :valid 伪类实现），然后浏览器就不会阻止提交了。

示例 2：required 属性用于 email 和 number

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        input:required:invalid {
            border: 1px solid red;
        }
        input:required:valid {
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <form action="/register" method="post">
        <p>
            <label>
                邮箱地址：
                <input type="email" name="email" required>
            </label>
        </p>
        <p>
            <label>
                您的年龄：
                <input type="number" name="age" required min="18" max="99">
            </label>
        </p>
        <p>
            <button type="submit">注册</button>
        </p> 
    </form>
</body>
</html>

页面效果如下图所示。

required 属性用于 email 和 number

分析：

对于 “邮箱地址” 字段来说，它同时被 required 和 type="email" 限制。此时用户必须填写该字段，并且内容必须是有效的电子邮件格式，否则无法提交表单。

对于 “您的年龄” 字段来说，它同时被 required 和 type="number" 限制，并且通过 min="18" 和 max="99" 进一步限定了数值范围。因此用户必须输入一个 18 到 99 之间的数字。

示例 3：required 属性用于单选按钮

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form action="/register" method="post">
        <p>你的性别是？</p>
        <p>
            <label><input type="radio" name="gender" value="male" required>男</label><br>
            <label><input type="radio" name="gender" value="female" required>女</label>
        </p>
        <p>
            <button type="submit">提交问卷</button>
        </p>
    </form>
</body>
</html>

页面效果如下图所示。

分析：

对于单选按钮组，由于 male 选项带有 required，因此用户必须在 “男” 或 “女” 中选择一个才能提交。