HTML accept Attribute

What You’ll Learn

The accept attribute is a valuable feature in HTML that lets developers specify the types of files a user can select in a file input field. By defining accepted file types, you guide users to upload the correct files and improve form usability.

Purpose of accept

The primary purpose of the accept attribute is to define the types of files that are allowed to be selected through a file input element (<input type="file">). It helps users by filtering the displayed files in the file picker and indicating the expected file format.

📝 Syntax

Add accept to an <input type="file"> element with a comma-separated list of file type specifiers:

<input type="file" accept=".jpg, .jpeg, .png">

Syntax Rules

• Only valid on <input type="file"> elements.
• Separate multiple values with commas (no comma required, but spaces after commas are fine).
• Values may be file extensions (starting with .) or MIME types.
• Use multipart/form-data on the parent <form> when uploading files.

💎 Values

The accept attribute accepts one or more file type specifications, each separated by a comma. Specifications can include file extensions or MIME types:

• accept=".jpg, .jpeg, .png" — Allows only image files with the specified extensions.
• accept="image/*" — Accepts any image file regardless of the specific extension.
• accept="application/pdf" — Accepts PDF documents by MIME type.
• accept="video/*,audio/*" — Multiple MIME type groups in one attribute.

<!-- Extensions -->
<input type="file" accept=".pdf, .docx">

<!-- MIME wildcards -->
<input type="file" accept="image/*">

<!-- Specific MIME -->
<input type="file" accept="image/png, image/jpeg">

Applicable Elements

Examples Gallery

Image uploads, MIME type wildcards, and dynamic accept values with JavaScript.

<form>
  <label for="fileInput">Select an image file:</label>
  <input type="file" id="fileInput" name="fileInput" accept=".jpg, .jpeg, .png">
  <input type="submit" value="Upload">
</form>

<input type="file" accept="image/*">

<input type="file" id="dynamicFileInput">

<script>
  document.getElementById("dynamicFileInput").accept = ".pdf, .docx";
</script>

♿ Accessibility

• Pair with labels — Use <label for="..."> so users know what file type is expected.
• Describe accepted types in text — Do not rely on accept alone; add helper text like “PNG or JPG only, max 5 MB.”
• Announce errors clearly — If server validation rejects a file, explain why in plain language.
• Do not disable keyboard access — File inputs remain focusable; ensure visible focus styles.

💡 Best Practices