YouTip

## HTML `` accept Attribute The `accept` attribute specifies the types of files that the server accepts through a file upload control. It acts as a filter, guiding users to select only the allowed file formats from their local device. > **Note:** The `accept` attribute can only be used with ``. --- ## Quick Example The following example demonstrates how to restrict file uploads to image files only: ```html

Choose a profile picture:

``` --- ## Syntax ```html ``` To specify multiple allowed file types, separate the values with a comma: ```html ``` --- ## Attribute Values The `accept` attribute accepts one or more of the following values: | Value | Description | Example | | :--- | :--- | :--- | | `audio/*` | Accepts any audio file. | `.mp3`, `.wav`, `.ogg` | | `video/*` | Accepts any video file. | `.mp4`, `.mkv`, `.avi` | | `image/*` | Accepts any image file. | `.png`, `.jpg`, `.gif`, `.webp` | | *MIME_type* | A valid MIME type without parameters. | `image/png`, `application/pdf`, `text/html` | | *File extension* | A specific file extension starting with a period. | `.pdf`, `.docx`, `.xls`, `.zip` | --- ## Detailed Examples ### 1. Accepting Specific File Extensions If you want to restrict uploads to specific document formats like PDF and Microsoft Word files, you can list their extensions: ```html Upload your resume (PDF or DOCX): ``` ### 2. Accepting Specific MIME Types You can combine specific MIME types to allow precise control over the accepted formats: ```html Upload report (CSV or Excel): ``` --- ## Important Considerations ### 1. Security & Validation (Crucial) **Do not use the `accept` attribute as your sole validation tool.** The `accept` attribute is a client-side convenience feature. It helps users by pre-filtering files in their file picker dialog, but it can easily be bypassed by: * Changing the file extension on a local machine before uploading. * Using browser developer tools to remove the `accept` attribute. * Intercepting and modifying the HTTP request. **Always perform robust file validation on your backend server** (checking file size, MIME type, and file signature/magic bytes) before saving uploaded files. ### 2. User Experience (UX) Using generic wildcards like `image/*` is highly recommended for mobile devices, as it allows the OS to open native camera applications directly to take a photo instead of just browsing the file system. --- ## Browser Support The `accept` attribute is widely supported across all modern web browsers: * Google Chrome (All versions) * Microsoft Edge (All versions) * Firefox (All versions) * Safari (Version 6.0 and later) * Opera (All versions) * Internet Explorer 10 and later (Note: Internet Explorer 9 and earlier versions do not support this attribute).