HTML accept属性的使用
HTML 接受属性非常有用，因为它指定了允许用户从文件输入框中选择的文件类型。
它有助于缩小用户的搜索范围，以便他们能够准确地获得所需的内容。
accept 属性只能与 <input type="file"> 一起使用。
它具有以下语法：
<input accept="file_extension|audio/*|video/*|image/*|media_type">
现在，让我们看一个例子，我们将展示如何使用 accept 属性分别允许图像、视频和音频文件。
使用 HTML 接受属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
h1 {
font-size: 18px;
margin: 20px 0;
}
h1 ~ h2 {
border-top: 1px solid #666;
padding-top: 20px;
}
</style>
</head>
<body>
<form action="/form/submit" method="post">
<h1>Match all image files</h1>
<div>
<label>image/*
<input type="file" accept="image/*">
</label>
</div>
<h2>Match all video files</h2>
<div>
<label>video/*
<input type="file" accept="video/*">
</label>
</div>
<h2>Match all audio files </h2>
<div>
<label>audio/*
<input type="file" accept="audio/*">
</label>
</div>
<h2>Match all image and video files</h2>
<div>
<label>image/*,video/*
<input type="file" accept="image/*,video/*">
</label>
</div>
</form>
</body>
</html>
如果需要定义多个值，请用逗号分隔这些值。
使用带有逗号分隔值的 HTML 接受属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
label {
display: block;
margin-bottom: 10px;
color: #666666;
}
input[type="submit"] {
display: block;
margin-top: 20px;
border: 1px solid lightblue;
background-color: lightblue;
padding: 5px 10px;
color: #ffffff;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0b7a9e;
}
</style>
</head>
<body>
<form action="/form/submit" method="post">
<label for="picture">Choose a picture:</label>
<input type="file" id="picture" name="picture" accept="image/png, image/jpeg">
<input type="submit" value="Submit">
</form>
</body>
</html>
不要将接受属性用作验证工具。
文件上传必须在服务器上进行验证。
日期：2020-06-02 22:15:12 来源：oir作者：oir