Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 13 Apr, 2021

In this article we will learn how to specify the types of files that the server accepts in HTML5. The <input> accept attribute is used to specifies the type of file that the server accepts. This attribute can be used with <input type=”file”> element only. This attribute is not used for validation tool because file uploads should be validated on the Server.

We will add each specific file one by one.

  • First, we will start by using MSOffice file. We will use the ‘accept’ attribute to specify types of files.
    <input type="File" name="" accept=".doc, .docx">
  • To specify the video file, we will use the following code.

    <input type="File" name="" accept="video/*">

    Note: The * is the wild card, and it means that it accepts all video formats.



  • To specify the text or PDF files, we use the following code.

    <input type="File" name="" accept=".pdf, .txt">
  • To specify the Audio file, we will use the following code.

    <input type="File" name="" accept="audio/*">
  • To specify the Image file, we will use the following code.

    <input type="File" name="" accept="image/*">
  • To specify the specific png or jpeg file, we will use the following code.

    <input type="File" name="" accept=".png, .jpg, .jpeg">
  • We can combine multiple file types. If we want all the Audio and Video formats and png format for Images and Pdfs.

    <input type="File" name="" 
        accept="video/*, audio/*, .png, .pdf">

Final code:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <form>
        <label>Select a MSWord file:</label>
        <input type="File" name="" 
            accept=".doc, .docx"><br><br>
  
        <label>Select an Video file:</label>
        <input type="File" name="" 
            accept="video/*"><br><br>
  
        <label>Select a Pdf or Text file:</label>
        <input type="File" name="" 
            accept=".pdf, .txt"><br><br>
  
        <label>Select an Audio file:</label>
        <input type="File" name="" 
            accept="audio/*"><br><br>
  
        <label>Select an Image file:</label>
        <input type="File" name="" 
            accept="image/*"><br><br>
  
        <label>Select a Png or Jpeg file:</label>
        <input type="File" name="" 
            accept=".png, .jpg, .jpeg"><br><br>
  
        <label>Select a Multiple file Types:</label>
        <input type="File" name="" 
            accept="video/*, audio/*, .png, .pdf">
        <br><br>
  
        <input type="Submit" name="">
    </form>
</body>
  
</html>


Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :