HTML accept attribute

Last update on February 01 2025 13:30:51 (UTC/GMT +8 hours)

The accept attribute specifies the types of files a user can upload via a file input field (<input type="file">). It restricts file selection to specific MIME types or file extensions.

Supported Elements

<input type="file">
Legacy Note: In HTML 4.01, accept was also valid on
, but this is deprecated in HTML5.

Syntax

<input type="file" accept=".jpg,.png,image/*,video/*">

Values

MIME Types: image/png, audio/mp3, video/mp4, application/pdf, etc.
File Extensions: .jpg, .docx, .pdf (prefixed with a dot).
Wildcards: image/* (all image types), audio/*, video/*.
Default: If omitted, all file types are allowed.

Key Notes

1. HTML5 Compatibility:

The accept attribute is only valid on <input type="file"> in HTML5.
Support for <form accept> was removed in HTML5.

2. Browser Behavior:

Browsers may filter file selection dialogs based on accept, but this is not enforced (users can override it).
Server-side validation is always required for security.

Examples

Example 1: Restricting to Image Files (HTML5)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>accept Attribute Example</title>
</head>
<body>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <label for="avatar">Upload Profile Picture:</label>
    <input 
      type="file" 
      id="avatar" 
      name="avatar" 
      accept="image/png, image/jpeg, .jpg, .png"
    >
    <button type="submit">Upload</button>
  </form>
</body>
</html>

Result

View this example in a separate browser window

Example of HTML accept attribute with form.

Example 2: Accepting PDFs and Word Documents

<input 
  type="file" 
  accept=".pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
>

Result

View this example in a separate browser window

Example of HTML accept attribute with input.

Browser Compatibility

Supported in all modern browsers (Chrome, Firefox, Safari, Edge).
Partial support for wildcards (e.g., image/*) in older browsers.

Best Practices

Always validate uploaded files on the server.
Use specific MIME types (e.g., image/jpeg) over wildcards for stricter control.
Combine with client-side validation (e.g., JavaScript) for better UX.

Previous: HTML accept-charset attribute
Next: HTML accesskey attribute