HTML / HTML Attributes

HTML Accept Attribute

Oct 12, 2022
3 min read
HTML accept Attribute

Definition

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

Applicable Elements

The accept Attribute can be used with the following elements:

HTML <input> accept Attribute

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.

Syntax

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

Usage

  • 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

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.

Examples

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">

Specification

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

Browser Support

The accept attribute has the following browser support:

Desktop

ChromeEdgeFirefoxIEOperaSafari
<input>YesYesYesYesYes1Yes
  1. Supports the type format (image/*) but not the extension format (.jpg).

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
<input>NoYes*NoYes*Yes*Yes*
  • Offers appropriate input based on the format type, but does not prevent other files from being selected.