Open In App

HTML <input> accept Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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: 

Screenshot-from-2023-07-03-13-52-59.png

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:

AcceptAttribute

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.

HTML <input> accept Attribute use Cases:

1. How to specify the type of files that server accepts in HTML5 ?

To Specify acceptable file types for server upload using the “accept” attribute within the HTML <input type=”file”> element.

2. How to create input field that accept CSV file in HTML ?

Here we create an input field that accepts CSV files by adding accept=”.csv” attribute to the HTML <input type=”file”> element.

3. What is the Limit File Format when using <input type=”file”> ?

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


Last Updated : 20 Feb, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads