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>GeeksForGeeks</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 ouptut

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>GeeksForGeeks</h1> 

    <h2> 

        HTML input accept attribute 

    </h2> 

    <form action=" "> 

        <input type="file" accept=".doc, .docx, .pdf"> 

        <input type="submit"> 

    </form> 

</body> 

</html>

Output:

HTML accept Attribute example ouptut

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.