How to add an Upload Button in HTML?

In this blog, you will learn to add an upload button in HTML. We will use the property of the form to create this upload button in HTML. It is soo simple and just a one-line code to add an upload button. Let’s start the process and learn in detail about it:-

Upload button

We will use <input> tag with its property type value equal to the file and submit. These values will be used to add an upload and submit button on the Website.

Steps to add an upload button:-

  1. Open your text editor and start typing the basic HTML tags:- HTML, Head, Title,& Body. 

  2. Add any content that you want to add to the webpage.

  3. To add the upload button, we will use <input> tag with its property type and name equal to the file.

  4. This will add an upload button on your webpage. 

  5. Now, Add a submit button to submit the added file to the server.

  6. For this, we will again use <input> tag with its type property value equal to submit.

  7. Your code is ready and it should look like this:-

Index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Upload button</title>
        <link rel=”stylesheet” href=”style.css”>
    </head>
    <body>
        <h1>CodeBlockx</h1>
        <h2>Solution of all your coding problems</h2>
        <h3>How to add upload button?</h3>
        <label>Choose a file to upload:</label>
        <input type=”file” name=”file”  >
        <br><br>
        <input type=”submit” name=”submit”>
    </body>
</html>

The CSS style sheet code for this HTML code is:- 

Style.css

 body{
    background-color:beige ;
 }
 h1{
    color: seagreen;
    font-family:Verdana;
    text-decoration: underline;
 }
 h2{
    font-family: sans-serif;
 }

OUTPUT

Upload Button in HTML

Hope this blog was helpful to you & you have got the answer to your question. If you don’t know all the properties of form and input type we have a detailed blog on How to create a form. You can learn it from here and increase your knowledge.

Thank you for visiting our blog. If you have any questions related to Coding then let us know in the comments section. We will answer it as soon as possible.

Leave a Comment

Your email address will not be published. Required fields are marked *