HTML accept Attribute

HTMLWeb DevelopmentFront End Technology

The accept attribute in HTML is for <input> as well as <form> element. Howevere, HML5 doesn’t support the form accept attribute, therefore we will be discussing the <input> accept attribute.

If you want to set a filter for the type of files user can pick from input type file, the use the <input> accept attribute.

Following is the syntax −

<input accept="extension|audio/*|video/*|image/*|media_type">

Above, the parameter−

  • extension: Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from
  • audio/*: User picks all sound files
  • video/*: User picks all video files
  • image/*: User picks all image files
  • media_type: Valid media type, including image/png, image/tiff, image/bmp, etc.

Let us now see an example to implement the accept attribute. Here, we have set the accept attribute with file type as image/png−


 Live Demo

<!DOCTYPE html>
<h2>Subject-wise rank</h2>
<form action="">
   <label for="stinfo">Student:</label>
   <input type="text" id ="stinfo"><br>
   <label for="sub">Subject:</label>
   <input type="text"><br>
   <label for="rank">Rank:</label>
   <input type="number"><br>
   <label for="marks">Marks:</label>
   <input type="number"><br><br>
   <label for="result">Upload Result Sheet</label><br>
   <input type="file" name="img" accept="image/png"><br><br>
   <input type="submit">


Above, on clicking “Choose File” to upload the result sheet, you will only see the file type “png” since we have set “image/png” above−

Updated on 30-Jul-2019 22:30:26