HTML multiple 属性

HTML multiple 语法

在 HTML 中，multiple 用于定义表单字段是否允许用户选择多个值。只有以下类型的元素支持 multiple 属性：

input：只有 <input type="email"> 和 <input type="file"> 支持。
select。

语法：

<input type="email" multiple>
<input type="file" multiple>
<select multiple>

说明：

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

<!--写法1-->
<input type="email" multiple>

<!--写法2-->
<input type="email" multiple="multiple">

什么是布尔属性？

布尔属性（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 multiple 摘要

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

HTML multiple 示例

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

示例 1：multiple 允许输入多个电子邮件地址

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form action="/submit-emails" method="post">
        <p>
            <label>
                请输入电子邮件地址（可输入多个，用逗号分隔）：<br>
                <input type="email" name="user_emails" multiple>
            </label>
        </p>
        <p>
            <button type="submit">提交</button>
        </p>
    </form>
</body>
</html>

页面效果如下图所示。

multiple 属性允许输入多个电子邮件地址

分析：

在这个例子中，<input type="email" multiple> 表示允许用户在单个文本框中输入多个电子邮件地址，它们之间通常用逗号分隔。当提交表单时，所有输入的电子邮件地址都会被发送到服务器。

示例 2：multiple 允许选择多个文件

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form action="/upload-files" method="post" enctype="multipart/form-data">
        <p>
            <label>
                请选择要上传的文件（可选择多个）：<br>
                <input type="file" name="user_files" multiple>
            </label>
        </p>
        <p>
            <button type="submit">上传</button>
        </p>
    </form>
</body>
</html>

页面效果如下图所示。

multiple 属性允许选择多个文件

分析：

<input type="file" multiple> 表示允许用户在文件选择对话框中一次性选择多个文件进行上传。如果不添加 multiple 属性，则用户一次只能选择一个文件。

示例 3：multiple 允许选择多个选项

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form action="/submit-options" method="post">
        <p>
            <label>
                请选择喜欢的水果（可选择多个，按住 Ctrl / Cmd 键点击）：<br>
                <select name="favorite_fruits" multiple size="5">
                    <option value="apple">苹果</option>
                    <option value="banana">香蕉</option>
                    <option value="orange">橙子</option>
                    <option value="grape">葡萄</option>
                    <option value="strawberry">草莓</option>
                </select>
            </label>
        </p>
        <p>
            <button type="submit">提交</button>
        </p>
    </form>
</body>
</html>

页面效果如下图所示。

multiple 属性允许选择多个选项

分析：

在这个例子中，<select multiple> 表示允许用户通过按住 Ctrl (Windows/Linux) 或 Cmd (macOS) 键并点击选项来选择多个水果。此外，size="5" 用于指定同时可见的选项数量。