HTML < input> accept Attribute Last Updated : 12 Jul, 2025 Comments Improve Suggest changes Like Article Like Report The HTML <input> accept attribute is used to control the type of files that can be selected for input, restricting the file selection to specific formats such as image/* for images or .pdf for PDF files. Syntax: <input accept = "file_extension | audio/* | video/* | image/* | media_type"> HTML <html> <body> <form> <label for="fileUpload">Upload an image file:</label> <input type="file" id="fileUpload" name="fileUpload" accept="image/*"> <input type="submit" value="Submit"> </form> </body> </html> The accept="image/*" attribute restricts the file input to accept only image files, enhancing user experience by filtering selectable files in the dialog.The <input type="file"> element allows users to browse and select files from their device for upload.Attribute Values:ValueDescriptionfile_extension Specify the file extension(s) like .gif, .jpg, .png, .doc) the user can pick from.audio/* The user can pick all sound files.image/*A valid media type, with no parameters. Look at IANA Media Types for a complete list of standard media types.media_typeA valid media type without parameters.More example of HTML <input> accept AttributeHTML <input> accept Attribute html <html > <body> <form> <label for="imageUpload">Upload an image (JPEG or PNG):</label> <input type="file" id="imageUpload" name="imageUpload" accept=".jpeg, .jpg, .png"> <input type="submit" value="Submit"> </form> </body> </html> The accept attribute is set to .jpeg, .jpg, .png, allowing users to select image files with these specific extensions.This ensures that only JPEG and PNG images can be selected for upload.Styled File Input for PDF Documents HTML <html> <head> <style> .file-input { display: inline-block; padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 4px; } .file-input:hover { background-color: #45a049; } #pdfUpload { display: none; } </style> </head> <body> <form> <label for="pdfUpload" class="file-input">Choose a PDF file</label> <input type="file" id="pdfUpload" name="pdfUpload" accept="application/pdf"> <input type="submit" value="Submit"> </form> </body> </html> The file input is styled to appear as a button labeled "Choose a PDF file," enhancing the user interface.The accept attribute is set to application/pdf, restricting file selection to PDF documents only.Best Practices for Using the HTML <input> accept Attribute:Specify Exact File Types: Clearly define acceptable file types using MIME types or file extensions to guide users in selecting appropriate files. Implement Server-Side Validation: While the accept attribute provides a hint to users, always validate the file type on the server to ensure security and proper handling. Provide User Instructions: Offer clear guidance or labels indicating the types of files accepted to enhance user experience and reduce errors. Comment More infoAdvertise with us M manaschhabra2 Follow Improve Article Tags : Web Technologies HTML HTML-Attributes Explore HTML Tutorial 11 min read BasicsHTML Introduction 6 min read HTML Editors 5 min read HTML Basics 7 min read HTML Structure & ElementsHTML Elements 5 min read HTML Attributes 8 min read HTML Headings 4 min read HTML Paragraphs 5 min read HTML Text Formatting 4 min read HTML Block and Inline Elements 3 min read HTML Charsets 4 min read HTML ListHTML Lists 5 min read HTML Ordered Lists 5 min read HTML Unordered Lists 4 min read HTML Description Lists 3 min read HTML Visuals & MediaHTML Colors 11 min read HTML Links Hyperlinks 3 min read HTML Images 7 min read HTML Favicon 4 min read HTML Video 4 min read HTML Layout & DesignHTML Tables 10 min read HTML Iframes 4 min read HTML Layout 4 min read HTML File Paths 3 min read HTML Projects& Advanced TopicsHTML Forms 5 min read HTML5 Semantics 6 min read HTML URL Encoding 4 min read HTML Responsive Web Design 11 min read Top 10 Projects For Beginners To Practice HTML and CSS Skills 8 min read HTML Tutorial ReferencesHTML Tags - A to Z List 15+ min read HTML Attributes Complete Reference 8 min read HTML Global Attributes 5 min read HTML5 Complete Reference 8 min read HTML5 MathML Complete Reference 3 min read HTML DOM Complete Reference 15+ min read HTML DOM Audio/Video Complete Reference 2 min read SVG Element Complete Reference 5 min read SVG Attribute Complete Reference 8 min read SVG Property Complete Reference 7 min read HTML Canvas Complete Reference 4 min read Like