Create HTML Form with File-Upload

Hi there. In this tutorial, I will show you a simple template of a file-upload form using HTML. Many new HTML developers think that a form with a file-upload input is the same as a normal form with few text fields and drop-down menus. Well, it is a little bit different. You need to add few extra details in the form, so that the file gets uploaded to the server without any problem. At the end of this tutorial, you will learn how to create a form with file-upload input like the following:

First Name:
Last Name:
Choose File:

Note that the above form will not send the submitted information to a server, but it's displayed for the purpose of clarification.

Let's explain the steps for inserting the HTML code for a form that contains a file input.

<form action="target_file" method="post" encrypt="multipart/form-data">
...
</form>

Note that in the above code, you need to replace target_file with the name of the file/script that will receive the submitted data from the form. Also, note that we used the attribute encrypt and we assigned the value multipart/form-data that tells the browser that this form will include some binary data like a file to submit to the server.

Finally we include the input fields inside the form, plus the submit button like in the following code:

<form action="target_file" method="post" encrypt="multipart/form-data">
    First Name: <input type="text" name="firstname"/><br/>

    Last Name: <input type="text" name="lastname"/><br/>

    Choose File: <input type="file" name="upload_file"/><br/>

    <input type="submit" value="Upload File"/>

</form>

At this point, we finished writing the code for the form that includes file input, and when the user submits the form, the destination file/script is responsible for handling the sent request that includes the file within it.

Hope this tutorial helps you, and we appreciate your feedback.