10 Stellar Web Resources for HTML5 and CSS3
How to Display a Meter Bar on Your Web Page
How to Use Text Fields in Your HTML5 Form

How to Create File Upload Fields in HTML5

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

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Shape a Solid Table in HTML5
How to Use Check Boxes and Radio Buttons in Your HTML5 Form
Manage Table Layouts in HTML5
How to Use Input Tags in HTML5 Forms
Character Codes and (Special) Tag Characters in HTML5

Inside Dummies.com