Open In App

How to create a file upload button in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to make a file upload button to upload a file using HTML. As we know, uploading a file is an important aspect in simple HTML form. The file upload button is used to upload a user photo or any type of file in a form. 

Approach: For uploading the file using HTML, we will

  • create a HTML document that contains an <input> tag.
  • use the type attribute which is set to value “file”.

Syntax:

<input type="file">

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>HTML input type file</title>
 
    <!--CSS code-->
    <style>
        h1 {
            color: green;
        }
 
        h2,
        h3 {
            font-family: Impact;
        }
 
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h2>GeeksforGeeks</h2>
    <h3>
        How to create a file Upload
        Button using html?
    </h3>
     
    <label> Choose the File to upload: </label>
    <input type="file" id="myFile" /> <br /><br />
     
    <input type="submit" value="submit" />
</body>
 
</html>


Output: You can see that after the file is uploaded, the name of the file is displayed in front of the button. 

File upload button in HTML



Last Updated : 27 Sep, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments