The HTML accept attribute is used with the <input type="file"> element to specify what type of file the user can select for upload.
Definition and Usage
➔ The accept attribute takes as its value a comma-separated list of one or more file types, or a unique file type specifier, that describes which file types to allow. Ex: accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg"
➔ The accept attribute does not validate the selected file type, it provides hints to browsers to guide users in selecting the correct file type.
➔ When a file input type is set, the native file picker that opens should only enable the selection of files of the correct file type
Example
<input type="file" id="audio" accept="audio/*" />
<input type="file" id="video" accept="video/*" />
<input type="file" id="image" accept="image/*" />
➔ The accept attribute takes as its value a string containing one or more unique file type specifiers, separated by commas.
Example
<input type="file" accept="image/*,.pdf" />
➔ The user can select multiple files from the file picker by holding down Shift or Control, and then clicking. If you want the user to select only one file, exclude multiple attributes.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML accept Attribute Example</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML accept Attribute Example</h2>
<p>This is for example purposes only, this example will not allow you to upload files.</p>
<form method="post" enctype="multipart/form-data">
<div>
<label for="demo">Choose file to upload</label>
<input type="file" id="demo" name="demo" accept=".jpg, .pdf, .doc, .png" multiple/>
</div>
<div>
<button>Upload file</button>
</div>
</form>
</body>
</html>
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| autofocus | <button>, <input>, <select>, <textarea> |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML accept Attribute Example</title>
<meta charset="utf-8" />
<style>
button {
width: 150px;
height: 50px;
background-color: #2121aa;
font-size: 14pt;
color: white;
border-radius: 10px;
}
button:hover {
background-color: #1212ff;
;
color: white;
}
</style>
</head>
<body>
<h2>HTML accept Attribute Example</h2>
<p>This is for example purposes only, this example will not allow you to upload files.</p>
<form method="post" enctype="multipart/form-data">
<div>
<label for="demo">Choose file to upload</label>
<input type="file" id="demo" name="demo" accept=".jpg, .jpeg, .png" />
</div>
<div>
<button>Upload</button>
</div>
</form>
</body>
</html>
Click on the "Try it Now" button to see how it works.