The one input field type that we haven't looked at yet is the one for uploading files to the server. To be able to use this field in your XHTML page you need to have the server configured to allow files to be uploaded by visitors to your site.

Another thing that you need in order to be able to use this field in your forms is that you need to specify an enctype attribute on your form tag. The enctype can have one of three values and defaults to 'application/x-www-form-urlencoded' if you don't specify the attribute. For your form to be able to handle file uploads you need to specify an enctype of 'multipart/form-data' and so the default needs to be overridden when you add file fields to your form. (The third value enctype can have is 'text/plain').

<form enctype="multipart/form-data" action="#">
<input type="file" id="ufile" name="ufile" />

File fields differ from other input fields in two ways. Firstly they are the only input field type that actually puts two elements into the form instead of just one. They provide both an input field for entering the path to the file and also a "browse" button that allows the person to do a search for the file.

The second way that file fields are different is that the file content is kept separate from the other fields in the form. Access to information about the file client side from Javascript is restricted and the files are passed to the server separately from the other form fields requiring separate server side processing to receive and process the file(s) that are passed.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow