HTML - accept Attribute

HTML accept attribute is used to define what file type the server will accept (submitted through a file upload).

It accepts values as a comma-separated list of one or more file types or unique file type specifiers (i.e. image, audio, video, document, etc.). Do not use this attribute to validate form because file uploads should be validated on the Server.

HTML accept attribute can only be used with the <input type="file">tag and not supported in HTML5.

Syntax

<input type = "file" accept = "value" />

Applies On

Below listed element allow using of the HTML accept attribute.

Element	Description
<input>	HTML <input> tag is used to specify the input field.

Examples of HTML accept Attribute

You can use the following accept attribute examples in input fields within a form to demonstrate how users can upload files based on the specified types.

Specifying Files that Server Accepts

Accept attribute can be used to specify the file extension(s) like .jpg, .png, .pdf that user can pick from.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>
      Specifying Files that Server Accept
   </title>
</head>

<body>
   <h2>
      Accepting only image files with 
      specific extensions
   </h2>
   <form>
      <label for="images">
         Select an image file (.jpg, .jpeg, .png, .gif):
      </label>
      <input type="file"
            id="images"
            name="images"
            accept=".jpg, .jpeg, .png, .gif">
      <br><br>
      <input type="submit" value="Submit">
   </form>
</body>

</html>

Accept audio/video file Only

Accept attribute can be used to specify that user can pick either audio, video or image of all extensions

<!DOCTYPE html>
<html>

<head>
   <title>Accepting audio/video file only</title>
</head>

<body>
   <h1>Accepting audio/video file only</h1>
   <form>
      <!-- Accepting all audio files -->
      <label for="audio">
         Select an audio file:
      </label>
      <input type="file"
            id="audio"
            name="audio"
            accept="audio/*">
      <br><br>

      <!-- Accepting all video files -->
      <label for="video">
         Select a video file:
      </label>
      <input type="file"
            id="video"
            name="video"
            accept="video/*">
      <br><br>
      <input type="submit" value="Submit">
   </form>
</body>

</html>

Accept image file Only

Accept attribute can be used to pick images with of any extensions

<!DOCTYPE html>
<html>

<head>
      <title>
         Accept Attribute to select all image types
      </title>
</head>

<body>
   <h1>
      Accept Attribute to select all image types
   </h1>
   <form>
      <!-- Accepting all image files -->
      <label for="image">
         Select an image file:
      </label>
      <input type="file"
            id="image"
            name="image"
            accept="image/*">
      <br><br>
      <input type="submit" value="Submit">
   </form>
</body>

</html>

Supported Browsers

Attribute
accept	8.0	10.0	4.0	6.0	15.0

html_attributes_reference.htm