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:
Type: | Html |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded by: | Admin |