Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to limit file format when using HTML input tags. By using Hypertext markup language(HTML) language, we cannot restrict any users to choose any type of file from the browser (developed by the developer). But, we can apply some limitations by using <input type=”file”>. File formats can be limited or restricted by adding the “input” tag by using the “type” attribute with “file” parameter. Limiting the file format in HTML requires only <input type=”file”> tag and specifying the file format in the accept attribute. This attribute provides a way to filter the files of types that are of interest.

Example 1: In this example, we will allow only pdf and mp3 files by using the HTML <input> accept attribute. In this, the “.mp3” parameter will only allow selection of mp3 audio files, and the “.pdf” parameter will let the browser insert only pdf files.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>Limit file format</h3>
    <h4>Insert mp3 files only</h4>
      
    <!-- accept mp3 files only-->
    <input type="file" accept=".mp3" /><br>
    <h4>Insert pdf files only</h4>
      
    <!-- accept pdf files only-->
    <input type="file" accept=".pdf" />
</body>
  
</html>


Output:

 

Example 2:This another example that limits file format. Here users will only be able to select “.html” files from the system. In fact files with all other types will not be displayed to the user while browsing from the system.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>Limit file format</h3>
    <h4>Insert html files only</h4>
      
    <!--accept html files only-->
    <input type="file" accept=".html" />
</body>
  
</html>


Output:

 

We can conclude that limiting the file formats in HTML requires only adding an <input type=”file”> tag and specifying the file format in the accept attribute (that restricts the users from browsing and selecting the files).



Last Updated : 19 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads