HTML accept Attribute

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−

Example

<!DOCTYPE html>
<html>
<body>
<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">
</form>
</body>
</html>

Output

HTML accept Attribute

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−

HTML accept Attribute