accept

The accept attribute in HTML specifies the allowed file types for <input> elements of type file, simplifying the process of filtering file selections for uploads.

accept attribute

The accept attribute in HTML allows multiple file types for upload, separated by commas.

Syntax

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

Example

The input accept attribute

Note: Because of security issues, this example will not allow you to upload files.

index.html
<h1>The input accept attribute</h1>
<form>
  <label for="img">Select image:</label>
  <input type="file" id="img" name="img" accept="image/*">
  <input type="submit">
</form>
<p><strong>Note:</strong> Because of security issues, this example will not allow you to upload files.</p>

Overview of the accept Attribute

The accept attribute in HTML tells <input> elements of type file which file types to allow for upload.

The accept attribute is applicable only to <input type="file">.

Key Points

Purpose: Tells file input fields which file types to accept.

Usage: Use a comma-separated list of file extensions, MIME types, or wildcards like image.

Important Considerations

  • File Validation: The accept attribute doesn't guarantee file type correctness. Use server-side validation.
  • Multiple Selections: Use the multiple attribute to let users choose multiple files.
  • Unique File Type Specifiers: Include file extensions, MIME types, or wildcards like <audio>, <video>, <img>.

See also

  • Using files from web applications
  • File API

Conclusion

The accept attribute in HTML allows you to restrict the types of files users can upload, enhancing the user experience by limiting file selection to specific formats. While it simplifies validation on the client side, server-side checks are essential for security. It can be applied to various file formats, extensions, and MIME types for different use cases.