Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

A file box

You can use this type of so that the user can send a file to the server. It displays a box for the file name and a browse button brings up windows dialogue box to find the file. The system displays the pathname in the file box.

To set up a filename box, you use the <input> tag and set the type attribute to file. For example:

This HTML…

Displays as…

<form>
File name:
<input type="file">
</form>

You can use the size and maxlength attributes to control the size and length. Note that the maxlength attribute only restricts the number of characters that the user can type into the file box; it does not restrict the path name that the browse button puts into the field.

You can also restrict the type of file that the user can send to the server. If you only want to receive pictures, you can use the accept attribute and enter the MIME encoding of the file types:

<input type="file" accept="image/*">

To get all this to work properly, you must add an encoding attribute to the <form> tag. Set this attribute to multipart/form-data. The browser then transmits the form as a multi-part MIME encoded message with the contents of the form as one part of the message. To do anything useful with the information, the script that processes the form must know how to deal with this type of message. Consult your techy bods.

You can also use the name attribute to add an internal name to the field so the program that handles the form can identify the fields.