HTML <input> accept Attribute
The HTML <input> accept Attribute is used to specify the file types that the input field can accept, restricting the file selection to those specified types, such as image/* for images or .pdf for PDF files.
HTML <input> accept Attribute Syntax:
<input accept = "file_extension | audio/* | video/* | image/* | media_type">
HTML <input> accept Attribute Attribute Values:
- file_extension: It Specify the file extension(s) like .gif, .jpg, .png, .doc) the user can pick from.
- audio/*: The user can pick all sound files.
- video/*: The user can pick all video files.
- image/*: A valid media type, with no parameters. Look at IANA Media Types for a complete list of standard media types
- media_type: A valid media type without parameters.
HTML <input> accept Attribute Example:
Here is he basic implementation of using <input> accept Attribute.
html
<!DOCTYPE html> < html > < head > < title > HTML input accept attribute </ title > < style > body { text-align: center; } h1 { color: green; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 > HTML input accept attribute </ h2 > < form action = " " > < input type = "file" name = "picture" accept = "image/*" > < input type = "submit" > </ form > </ body > </ html > |
Output:
HTML <input> accept Attribute Example Explanation:
- In the above example Restricts file types for upload, accepting only images.
- Added to <input type=”file”>, specifies accepted file types accept=”image/*.
- Allows selection of only image files.
- Upon form submission, selected image is sent for processing.
- Simplifies user experience by filtering out incompatible file types.
HTML <input> accept Attribute Example:
In this example,we allows users to upload files, limiting options to .doc, .docx, and .pdf formats only using the accept attribute.
HTML
<!DOCTYPE html> < html > < head > < title > HTML input accept attribute </ title > < style > body { text-align: center; } h1 { color: green; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 > HTML input accept attribute </ h2 > < form action = " " > < input type = "file" accept = ".doc, .docx, .pdf" > < input type = "submit" > </ form > </ body > </ html > |
Output:
HTML <input> accept Attribute Example Explanation:
- Here we are using the accept attribute to limit file uploads exclusively to .doc, .docx, and .pdf formats.
- Ensures adherence to specified file types, bolstering the integrity of uploaded data.
- Enhances usability by filtering out unsupported file formats during selection.
- Validates selected files, guaranteeing compatibility with accepted formats before submission for processing.
HTML <input> accept Attribute use Cases:
To Specify acceptable file types for server upload using the “accept” attribute within the HTML <input type=”file”> element.
Here we create an input field that accepts CSV files by adding accept=”.csv” attribute to the HTML <input type=”file”> element.
The limit file format when using `<input type=”file”>` is defined by the “accept” attribute, specifying accepted file types.
HTML <input> accept Attribute Supported Browsers:
The browsers supported by HTML <input> accept Attribute are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 6.0 and above
- Firefox 1.0 and above
- Apple Safari 1.0 and above
- Opera 12.1 and above
Contact Us