Skip to content
Related Articles

Related Articles

Improve Article

How to create a file upload button in HTML ?

  • Last Updated : 27 Sep, 2021
Geek Week

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

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 :