Horje

How to add HTML <input> accept Attribute

Specify what file types the user can pick from the file input dialog box.

Definition and Usage

The accept attribute specifies a filter for what file types the user can pick from the file input dialog box.

Note: The accept attribute can only be used with <input type="file">.

Tip: Do not use this attribute as a validation tool. File uploads should be validated on the server.


Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

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

Tip: To specify more than one value, separate the values with a comma (e.g. <input accept="audio/*,video/*,image/*" />.

Attribute Values

Value Description
file_extension Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from
audio/* The user can pick all sound files
video/* The user can pick all video files
image/* The user can pick all image files
media_type A valid media type, with no parameters. Look at IANA Media Types for a complete list of standard media types
index.html
Example: HTML
<form action="/action_page.php">
  <label for="img">Select image:</label>
  <input type="file" id="img" name="img" accept="image/*">
  <input type="submit">
</form>

Output should be:

How to add HTML <input> accept Attribute




Type:
html
Category:
Web Tutorial
Sub Category:
HTML Tag
Uploaded by:
Admin