- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - accept Attribute
HTML accept attribute is used to define what file type the server will accept (submitted through a file upload).
It accepts values as a comma-separated list of one or more file types or unique file type specifiers (i.e. image, audio, video, document, etc.). Do not use this attribute to validate form because file uploads should be validated on the Server.
HTML accept attribute can only be used with the <input type="file">tag and not supported in HTML5.
Syntax
<input type = "file" accept = "value" />
Applies On
Below listed element allow using of the HTML accept attribute.
Element | Description |
---|---|
<input> | HTML <input> tag is used to specify the input field. |
Examples of HTML accept Attribute
You can use the following accept attribute examples in input fields within a form to demonstrate how users can upload files based on the specified types.
Specifying Files that Server Accepts
Accept attribute can be used to specify the file extension(s) like .jpg, .png, .pdf that user can pick from.
<!DOCTYPE html> <html lang="en"> <head> <title> Specifying Files that Server Accept </title> </head> <body> <h2> Accepting only image files with specific extensions </h2> <form> <label for="images"> Select an image file (.jpg, .jpeg, .png, .gif): </label> <input type="file" id="images" name="images" accept=".jpg, .jpeg, .png, .gif"> <br><br> <input type="submit" value="Submit"> </form> </body> </html>
Accept audio/video file Only
Accept attribute can be used to specify that user can pick either audio, video or image of all extensions
<!DOCTYPE html> <html> <head> <title>Accepting audio/video file only</title> </head> <body> <h1>Accepting audio/video file only</h1> <form> <!-- Accepting all audio files --> <label for="audio"> Select an audio file: </label> <input type="file" id="audio" name="audio" accept="audio/*"> <br><br> <!-- Accepting all video files --> <label for="video"> Select a video file: </label> <input type="file" id="video" name="video" accept="video/*"> <br><br> <input type="submit" value="Submit"> </form> </body> </html>
Accept image file Only
Accept attribute can be used to pick images with of any extensions
<!DOCTYPE html> <html> <head> <title> Accept Attribute to select all image types </title> </head> <body> <h1> Accept Attribute to select all image types </h1> <form> <!-- Accepting all image files --> <label for="image"> Select an image file: </label> <input type="file" id="image" name="image" accept="image/*"> <br><br> <input type="submit" value="Submit"> </form> </body> </html>
Supported Browsers
Attribute | |||||
---|---|---|---|---|---|
accept | 8.0 | 10.0 | 4.0 | 6.0 | 15.0 |
To Continue Learning Please Login
Login with Google