Home

How to Create File Upload Fields in HTML5

|
|  Updated:  
2016-03-26 14:02:09
HTML5 and CSS3 All-in-One For Dummies
Explore Book
Buy On Amazon

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 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">
</p>
</form>

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.

image0.jpg

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

About This Article

This article is from the book: 

About the book author:

Ed Tittel is a 28-year veteran of the computer industry. A seasoned author and consultant, Ed has more than 140 books to his credit.

Chris Minnick is an accomplished author, teacher, and programmer. Minnick authored or co-authored over 20 books, including titles in the For Dummies series. He has developed video courses for top online training platforms and he teaches programming and machine learning to professional developers at some of the largest global companies.