HTML accept Attribute
The HTML accept attribute specifies the type of file that the server accepts. Read about the accept attribute and find out on what element it can be used.
The HTML accept attribute tells the browser which file types a <input type="file"> control should suggest in the operating system's file picker. It is a hint for the user interface, not a security or validation feature: it makes the right files easier to find when a user clicks the upload button.
This page covers what values accept takes (MIME types, file extensions, and wildcards), how to combine them, how the value behaves across browsers, how accept pairs with the multiple attribute and form encoding, and why you must still validate uploads on the server.
You can only use accept on the <input> element, and only when its type is file. On any other input type it is ignored.
How the browser uses the value
When a user opens the file picker, the browser uses accept to pre-filter which files are shown or selectable. The exact behavior is up to each browser and operating system:
- Chrome / Edge add an entry to the file-type dropdown that matches your
acceptlist and select it by default, while still letting the user switch to "All files". - Firefox filters the list similarly, and on some platforms also offers an "All files" fallback.
- Safari honors the value but the wording and the strictness of the filter differ from Chrome.
In every browser the user can override the filter and pick a file that does not match. The accept value never blocks form submission and is never enforced. Treat it purely as a convenience.
Syntax
<input type="file" accept="value">The value is a comma-separated list of one or more file-type specifiers. (Older reference tables sometimes show the options with a | between them — that pipe means "pick from these kinds of value", it is not valid in the attribute itself.) Each specifier is one of:
| Value type | Example | Matches |
|---|---|---|
| File extension | .pdf, .docx, .png | A leading dot followed by an extension (case-insensitive). |
| Specific MIME type | image/png, application/pdf | One exact file type. |
| Audio wildcard | audio/* | Any audio file. |
| Video wildcard | video/* | Any video file. |
| Image wildcard | image/* | Any image file. |
You can mix any of these in one list, separated by commas.
Examples
Accept any image
<form action="/form/submit" method="post" enctype="multipart/form-data">
<input type="file" name="avatar" accept="image/*" />
<input type="submit" value="Upload" />
</form>Accept specific MIME types
Use a comma-separated list to allow only certain formats — here PNG and JPEG, but not GIF or WebP:
<input type="file" name="photo" accept="image/png,image/jpeg" />Accept by file extension
Extensions are handy for formats whose MIME type is verbose or inconsistent across systems, such as office documents:
<input type="file" name="document" accept=".pdf,.doc,.docx" />Accept audio or video
<!-- any audio file -->
<input type="file" name="track" accept="audio/*" />
<!-- any video file -->
<input type="file" name="clip" accept="video/*" />Combine MIME types with extensions
A single accept list can hold both forms at once. This is useful when a wildcard is too broad but some file types are easier to express as an extension:
<input type="file" name="upload" accept="image/png,image/jpeg,.pdf,.docx" />Working with multiple and form encoding
accept is almost always used together with two other features of file inputs:
- The
multipleattribute lets the user select more than one file at once from the picker. It works the same withaccept: the filter applies to every file the user adds. enctype="multipart/form-data"is required on the<form>element for the files to actually be sent. A normal form encoding only transmits the file's name, not its bytes.
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="gallery">Choose images:</label>
<input type="file" id="gallery" name="gallery" accept="image/*" multiple />
<input type="submit" value="Upload" />
</form>For more on building upload forms, see the HTML <form> tag, the HTML <input> tag, and the HTML Forms guide.
Security: never trust accept
The accept attribute is not a validation mechanism. Relying on it for security is unsafe for two reasons:
- Extension spoofing. A file's name (and therefore its extension) says nothing about its real contents. Anyone can rename
malware.exetophoto.png. Theacceptfilter only looks at extension and reported MIME type, both of which the client controls. - MIME-type sniffing. The MIME type the browser reports for an uploaded file is derived from the file name or the OS and can be faked. The server must inspect the actual bytes of the file to know what it really is.
Because the user can bypass the picker filter entirely, every upload must be validated on the server: check the real file type from its content (not its name), enforce a size limit, store it outside the web root or under a safe path, and never execute uploaded files. Use accept only to improve the user's experience, never as a gate.