How to Create File Upload Fields in HTML5 - dummies

How to Create File Upload Fields in HTML5

By Ed Tittel, Chris Minnick

An HTML web form can receive documents and other files, such as images, from users. When a user submits the form, the browser grabs a copy of the file and sends it with the other form data. To create a file upload field, this is what you do:

  1. Use the <input> element with the type attribute set to file.

    The file itself is the form field value.

  2. Use the name attribute to give the control a name.

Here’s an example of markup for a file upload field:

<form action="bin/guestbook.php" method="post">
<p>Please submit your resume in Microsoft Word or plain text format:<br>
   <input type="file" name="resume">

Browsers render a file upload field with a Browse button (or a button similarly named) that allows a user to navigate a local hard drive and select a file to send, as shown in this figure.


When you accept users’ files through a form, you may receive files that are either huge or perhaps virus-infected. Consult with whomever is programming your form handler to discuss options to protect the system where files get saved. Several barriers can help minimize your risks, including the following:

  • Virus-scanning software

  • Restrictions on file size

  • Restrictions on file type