HTML 5 accept 属性

2025年3月17日 | 阅读 10 分钟

本文将介绍 HTML5 accept 属性的工作原理。

HTML5 中的 accept 属性是什么意思？

在 HTML 中，accept 属性指定了一个过滤器，用于限制用户可以从文件输入对话框中选择的文件类型。此属性只能与 <input type="file"> 结合使用。它允许浏览器只显示当前输入允许的文件。

语法

在上述语法中，我们可以传递文件扩展名或您希望从文件上传选项中选择的文件类型，例如图像、音频、视频等。

以下是 HTML 5 accept 属性的各种示例。

示例 1

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
        <title> HTML5 accept attribute </title>
        <link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
        <link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
* { box-sizing: border-box; }
html { height: 100%; }
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
   }
   h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
}
form {
  position: absolute;
  top: 20;
  left: 50%;
  width: 500px;
  transform: translateX(-50%);
  margin: 2rem 1;
  z-index: 1;
}
fieldset {
  margin: 0 0 1rem 0;
  padding: 0;
  border: none;
}
legend {
 font-weight: bold;
}
Legend {
  display: inline-block;
  margin-bottom: .5rem;
 font-weight: bold;
}
label {
  display: inline-block;
  margin-bottom: .5rem;
  font-weight: bold;
}
input[type='text'] {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .35rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
   &:focus {
    border-color: rgb(239,126,173);
  }
}
textarea {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
    &:focus {
    border-color: rgb(239,126,173);
  }
}
select {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
    &:focus {
    border-color: rgb(239,126,173);
  }
}
textarea {
  max-width: 500px;
  height: 100px;
}
input[type='text'] {
  height: 34px;
}
select {
  font-size: .875rem;
  height: 34px;
}
input[type='checkbox'] {
  position: relative;
  top: 5px;
  width: 24px;
  height: 22px;
  margin: 0 .5rem;
  background-color: white;
  border: 1px solid #e5e5e5;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition-property: none;
  transition-duration: none;
}
  input[type='radio'] {
  position: relative;
  top: 5px;
  width: 24px;
  height: 22px;
  margin: 0 .6rem;
  background-color: white;
  border: 1px solid #e5e5e5;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition-property: none;
  transition-duration: none;
}
input[type='checkbox'] {
  border-radius: 5px;
  &:checked {
    background-color: rgb(239,126,173); 
    border: none;
    &:after {
      display: block;
      content: ' ';
      height: 4px;
      width: 10px;
      border-bottom: 3px solid #fff;
      border-left: 3px solid #fff;
      transform: translate(5px,6px) rotate(-45deg) scale(1);
    }
  }
}
input[type='radio'] {
  border-radius: 50%;
    &:checked {
    border-width: 5px;
    border-color: white;
    background-color: rgb(239,126,173);
  }
}
button {
  display: block;
  margin: 1em auto;
  padding: .5rem 2rem;
  font-size: 125%;
  color: white;
  border: none;
  border-radius: .25rem;
  background-color: rgb(92 34 8);
  outline: none;
  box-shadow: 0 .4rem .1rem -.3rem rgba(0,0,0,.1);
   transform: perspective(300px) scale(.95) translateZ(0);
  transform-style: preserve-3d;
    transition-property: none;  
  transition-duration: none;    
  &:hover {
    cursor: pointer;
    background-color: rgb(255,150,200);
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    transform: scale(1.1) rotateX(0);
  }
  &:active {
    background-color: rgb(239,126,173);
    transform: scale(1.05) rotateX(-10deg);
  }
}
</style>
<h1> HTML5 accept attribute Example </h1>
<form> 
  <fieldset>
    <label for = "firstName"> Full Name </label>
    <input type = "text" name = "name" id = "firstName" spellcheck = "true" placeholder = "First Name">
  </fieldset>
  <fieldset>
    <legend> Qualification </legend>
    <input type = "checkbox" id = "check1" name = "checkboxes" checked>
    <label for = "check1"> BCA </label> <br>
    <input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> MCA </label> <br>
<input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> BA </label> <br>
	<input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> MSC IT </label> <br>
  </fieldset>
  <fieldset>
    <legend> Gender </legend>
    <input type = "radio" id = "radio1" name = "radios" checked>
    <label for = "radio1"> Male </label> <br>
    <input type = "radio" id = "radio2" name = "radios">
    <label for = "radio2"> Female </label> <br>
    <input type = "radio" id = "radio2" name = "radios">
<label for = "radio2"> Transgender </label> <br>
  </fieldset>
  <fieldset>
    <label for="select-choice"> Select Hobbies </label>
    <select name = "select-choice" id = "select-choice">
      <option value = "Choice 1"> - - select one - - </option>
      <option value = "Choice 2"> Dancing </option>
      <option value = "Choice 2"> Singing </option>
      <option value = "Choice 2"> Playing </option>
      <option value = "Choice 2"> Cooking </option>
    </select>
  </fieldset>
<p>
  <label for = "imageFile"> Select some images: </label>
  <input type = "file" id = "imageFile" accept = "image/*" multiple>
</p>
  <button> Submit </button>
</form>
  </body>
</html>

说明

在上面的示例中，我们创建了一个 accept 属性的示例。在此示例中，我们只从文件输入框上传了图像。

在此

<input> 标签用于从用户获取输入
type="file" 用于指定文件输入。
accept 参数用于指定服务器接受的文件类型。
"image/*" 定义输入文件必须是图像格式。
multiple 属性表示我们可以从输入对话框上传多个图像文件。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
        <title> HTML5 accept attribute </title>
        <link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
        <link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
* { box-sizing: border-box; }
html { height: 100%; }
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
   }
   h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
  text-align: center;
}
form {
  position: absolute;
  top: 40;
  left: 50%;
  width: 510px;
  transform: translateX(-50%);
  margin: 2rem 1;
  z-index: 1;
}
fieldset {
  margin: 0 0 1rem 0;
  padding: 1;
  border: none;
}
legend {
 font-weight: bold;
}
label {
  display: inline-block;
  margin-bottom: .5rem;
  font-weight: bold;
}
input[type='text'] {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
   &:focus {
    border-color: rgb(239,126,173);
  }
}
Legend {
  display: inline-block;
  margin-bottom: .5rem;
 font-weight: bold;
}
textarea {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
    &:focus {
    border-color: rgb(239,126,173);
  }
}
select {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
    &:focus {
    border-color: rgb(239,126,173);
  }
}
textarea {
  max-width: 500px;
  height: 100px;
}
input[type='text'] {
  height: 34px;
}
select {
  font-size: .875rem;
  height: 34px;
}
input[type='checkbox'] {
  position: relative;
  top: 5px;
  width: 22px;
  height: 22px;
  margin: 0 .5rem;
  background-color: white;
  border: 1px solid #e5e5e5;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition-property: none;
  transition-duration: none;
}
  input[type='radio'] {
  position: relative;
  top: 5px;
  width: 22px;
  height: 22px;
  margin: 0 .5rem;
  background-color: white;
  border: 1px solid #e5e5e5;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition-property: none;
  transition-duration: none;
}
input[type='checkbox'] {
  border-radius: 5px;
  &:checked {
    background-color: rgb(239,126,173); 
    border: none;
    &:after {
      display: block;
      content: ' ';
      height: 4px;
      width: 10px;
      border-bottom: 3px solid #fff;
      border-left: 3px solid #fff;
      transform: translate(5px,6px) rotate(-45deg) scale(1);
    }
  }
}
input[type='radio'] {
  border-radius: 50%;
    &:checked {
    border-width: 5px;
    border-color: white;
    background-color: rgb(239,126,173);
  }
}
button {
  display: block;
  margin: 1em auto;
  padding: .5rem 2rem;
  font-size: 125%;
  color: white;
  border: none;
  border-radius: .35rem;
  background-color: rgb(92 34 8);
  outline: none;
  box-shadow: 0 .4rem .1rem -.3rem rgba(0,0,0,.1);
   transform: perspective(300px) scale(.95) translateZ(0);
  transform-style: preserve-3d;
    transition-property: none;  
  transition-duration: none;    
  &:hover {
    cursor: pointer;
    background-color: rgb(255,150,200);
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    transform: scale(1.1) rotateX(0);
  }
  &:active {
    background-color: rgb(239,126,173);
    transform: scale(1.05) rotateX(-10deg);
  }
}
</style>
<h1> HTML5 accept attribute Example </h1>
<form> 
  <fieldset>
    <label for = "firstName"> Full Name </label>
    <input type = "text" name = "name" id = "firstName" spellcheck = "true" placeholder = "First Name">
  </fieldset>
  <fieldset>
    <legend> Qualification </legend>
    <input type = "checkbox" id = "check1" name = "checkboxes" checked>
    <label for = "check1"> BCA </label> <br>
    <input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> MCA </label> <br>
<input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> BA </label> <br>
	<input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> MSC IT </label> <br>
  </fieldset>
  <fieldset>
    <legend> Gender </legend>
    <input type = "radio" id = "radio1" name = "radios" checked>
    <label for = "radio1"> Male </label> <br>
    <input type = "radio" id = "radio2" name = "radios">
    <label for = "radio2"> Female </label> <br>
    <input type = "radio" id = "radio2" name = "radios">
<label for = "radio2"> Transgender </label> <br>
  </fieldset>
  <fieldset>
    <label for="select-choice"> Select Hobbies </label>
    <select name = "select-choice" id = "select-choice">
      <option value = "Choice 1"> - - select one - - </option>
      <option value = "Choice 2"> Dancing </option>
      <option value = "Choice 2"> Singing </option>
      <option value = "Choice 2"> Playing </option>
      <option value = "Choice 2"> Cooking </option>
    </select>
  </fieldset>
  <p>
  <label for = "soundFile"> Select an audio file: </label>
  <input type = "file" id = "soundFile" accept = "audio/*">
</p>
  <button> Submit </button>
</form>
  </body>
</html>

说明

在上面的示例中，我们创建了一个 accept 属性的示例。在此示例中，我们只从文件输入框上传了音频。

在此

<input> 标签用于从用户获取输入
type="file" 用于指定文件输入。
accept 参数用于指定服务器接受的文件类型。
"audio/*" 定义输入文件必须是音频格式。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
        <title> HTML5 accept attribute </title>
        <link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
        <link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
* { box-sizing: border-box; }
html { height: 100%; }
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
   }
   h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
}
form {
  position: absolute;
  top: 30;
  left: 50%;
  width: 500px;
  transform: translateX(-50%);
  margin: 2rem 0;
  z-index: 1;
}
fieldset {
  margin: 0 1 1rem 0;
  padding: 1;
  border: none;
}
legend {
 font-weight: bold;
}
Legend {
  display: inline-block;
  margin-bottom: .5rem;
 font-weight: bold;
}
input[type='text'] {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  transition-duration: none;
   &:focus {
    border-color: rgb(239,126,173);
  }
}
label {
  display: inline-block;
  margin-bottom: .5rem;
  font-weight: bold;
}
textarea {
  display: block;
  padding: .5rem;
  width: 100%;
  background-color: white;
  border: 1px solid #e5e5e5;
  outline: none;
  transition-property: none;
  border-radius: .25rem;
  transition-duration: none;
    &:focus {
    border-color: rgb(259,126,173);
  }
}
select {
  display: block;
  padding: .8rem;
  width: 100%;
  outline: none;
  background-color: white;
  border-radius: .25rem;
  border: 1px solid #e5e5e5;
  transition-property: none;
  transition-duration: none;
    &:focus {
    border-color: rgb(239,126,173);
  }
}
textarea {
  max-width: 500px;
  height: 100px;
}
input[type='text'] {
  height: 34px;
}
input[type='checkbox'] {
  position: relative;
  top: 6px;
  width: 22px;
  height: 23px;
  margin: 0 .5rem;
  background-color: white;
  border: 1px solid #e5e5e5;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition-property: none;
  transition-duration: none;
}
select {
  font-size: .885rem;
  height: 34px;
}
  input[type='radio'] {
  position: relative;
  top: 5px;
  width: 22px;
  height: 23px;
  margin: 0 .5rem;
  background-color: white;
  border: 1px solid #e5e5e5;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  transition-property: none;
  transition-duration: none;
}
input[type='checkbox'] {
  border-radius: 5px;
  &:checked {
    background-color: rgb(239,126,173); 
    border: none;
    &:after {
      display: block;
      content: ' ';
      height: 4px;
      transform: translate(5px,6px) rotate(-45deg) scale(1);
      width: 12px;
      border-bottom: 3px solid #fff;
      border-left: 3px solid #fff;
    }
  }
}
input[type='radio'] {
  border-radius: 51%;
    &:checked {
background-color: rgb(239,126,173);
    border-width: 6px;
    border-color: white;
      }
}
button {
  display: block;
  margin: 1em auto;
  padding: .5rem 2rem;
  font-size: 125%;
  color: white;
  border: none;
  border-radius: .25rem;
  background-color: rgb(92 34 8);
  outline: none;
  box-shadow: 0 .4rem .1rem -.3rem rgba(0,0,0,.1);
   transform: perspective(300px) scale(.95) translateZ(0);
  transform-style: preserve-3d;
    transition-property: none;  
  transition-duration: none;    
  &:hover {
    cursor: pointer;
    background-color: rgb(255,150,200);
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    transform: scale(1.1) rotateX(0);
  }
  &:active {
    background-color: rgb(239,126,173);
    transform: scale(1.05) rotateX(-10deg);
  }
}
</style>
<h1> HTML5 accept attribute Example </h1>
<form> 
  <fieldset>
    <label for = "firstName"> Full Name </label>
    <input type = "text" name = "name" id = "firstName" spellcheck = "true" placeholder = "First Name">
  </fieldset>
  <fieldset>
    <legend> Qualification </legend>
    <input type = "checkbox" id = "check1" name = "checkboxes" checked>
    <label for = "check1"> BCA </label> <br>
    <input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> MCA </label> <br>
<input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> BA </label> <br>
	<input type = "checkbox" id = "check2" name = "checkboxes">
    <label for = "check2"> MSC IT </label> <br>
  </fieldset>
  <fieldset>
    <legend> Gender </legend>
    <input type = "radio" id = "radio1" name = "radios" checked>
    <label for = "radio1"> Male </label> <br>
    <input type = "radio" id = "radio2" name = "radios">
    <label for = "radio2"> Female </label> <br>
    <input type = "radio" id = "radio2" name = "radios">
<label for = "radio2"> Transgender </label> <br>
  </fieldset>
  <fieldset>
    <label for="select-choice"> Select Hobbies </label>
    <select name = "select-choice" id = "select-choice">
      <option value = "Choice 1"> - - select one - - </option>
      <option value = "Choice 2"> Dancing </option>
      <option value = "Choice 2"> Singing </option>
      <option value = "Choice 2"> Playing </option>
      <option value = "Choice 2"> Cooking </option>
    </select>
  </fieldset>
<p>
  <label for = "videoFile"> Select a video file: </label>
  <input type = "file" id = "videoFile" accept = "video/*">
</p>
  <button> Submit </button>
</form>
  </body>
</html>

说明

在上面的示例中，我们创建了一个 accept 属性的示例。在此示例中，我们只从文件输入框上传了视频。

在此

<input> 标签用于从用户获取输入
type="file" 用于指定文件输入。
accept 参数用于指定服务器接受的文件类型。
"video/*" 定义输入文件必须是视频格式。

输出

以下是这个例子的输出。

下一主题HTML 颜色样式

HTML 5 accept 属性

HTML5 中的 accept 属性是什么意思？

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 5 accept 属性

HTML5 中的 accept 属性是什么意思？

示例 1

示例 2

示例 3

相关帖子

HTML MDN

HTML 表格属性

如何在 HTML 中添加线条

HTML 替换

HTML 和 CSS：设计和网站

HTML 图片按钮

HTML 颜色标签

HTML 中的 Expand

HTML 扩展名

HTML CSS 中的自动图片滑块

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器