HTML accept Attribute

Definition

The accept Attribute specifies the file types accepted by the file upload control.

The accept Attribute can be used with the following elements:

The <input> element is a field used in HTML forms enabling a user to input data.

The accept attribute can be used with the <input type="file"> attribute to specify the file types permitted to be uploaded with the control.

<input type="file" accept="image/*">

The accept attribute requires the <input> element to have the type attribute set to file.
The accept attribute takes a singular or multiple unique file type specifier separated by commas.
If you wish to set a specific extension it is best practice to specify a Media Type and File Extension.
User-Agents may use the accept attribute to display a more appropriate interface to the user. For example, a value of image/* may prompt the user agent to select a photo from a local collection or take a photo with a plugged-in camera device.
Some web browsers (mainly mobile browsers) do not offer support or may not restrict the file type based on the accept attribute value. See the browser support section below for more details.
For security reasons, you should not use this attribute to validate uploads to your server. You should do this separately on the server.

Values can include:

file_extension - The case-insensitive file extension of the permitted file type, starting with the full stop character. For example, .gif, .webp, .jpg.
audio/* - All audio file types can be selected.
video/* - All video file types can be selected.
image/* - All image file types can be selected.
media_type - A valid media type can be specified. You can find a full list of IANA Media Types here.

A file picker control that allows both png and jpeg uploads by defining both the media_type and `file_extension’:

<label for="filepicker">Choose a file:</label>

<input type="file"
       id="filepicker" name="filepicker"
       accept="image/png, image/jpeg">

A file picker control that allows all image types and pdf files uploads:

<label for="filepicker">Choose a file:</label>

<input type="file"
       id="filepicker" name="filepicker"
       accept="image/*,.pdf">

The accept HTML specification for the <input> element is as follows:

The accept attribute has the following browser support:

	Chrome	Edge	Firefox	IE	Opera	Safari
`<input>`	Yes	Yes	Yes	Yes	Yes¹	Yes

	Android Webview	Chrome Android	Firefox Android	Opera Android	iOS Safari	Samsung Internet
`<input>`	No	Yes^*	No	Yes^*	Yes^*	Yes^*

Offers appropriate input based on the format type, but does not prevent other files from being selected.