Tutorial: HTML forms - Hidden fields, password fields and file upload fields
Level: Intermediate. Published on 28 November 2001 in HTML forms
This tutorial looks at three HTML form field types: hidden fields, password fields, and file upload fields.
This tutorial explores three special types of HTML form fields:
- hidden fields, for passing information without displaying it to the visitor
- password fields that allow the visitor to enter sensitive information, and
- file upload fields that allow visitors to upload files from their hard disk to your Web server.
Find out how to create HTML forms in our Building forms tutorial.
Hidden fields
Hidden fields are form fields that are not actually displayed to the user. The main purpose of hidden fields is to pass information to the server script that the user does not need to view or change. For example, if you were building a shopping cart, you might use a hidden field to track the cart ID.
The format of a hidden form field is very simple:
<input type="hidden" name="xxxx" value="xxxx">
The field name with value value will be passed to the server like any other field when the form is submitted, but the field will not be visible to the user (unless they view source, of course!).
Example:
<input type="hidden" name="cart_id" value="1234">
Password fields
If you need your user to enter sensitive information such as a password, you can use the password field type. This will allow the user to enter text just like a regular text field, but the characters will be displayed as asterisks to prevent the text from being viewed on the screen.
The password field takes the format:
<input type="password" name="xxxx" size="xxxx">
The name attribute is the name of the field (for example, "password"). The size attribute specifies the physical size (width) of the form field, in characters. You can miss out this value in which case the browser's default field size will be used.
(You can also supply a default value using the value attribute, if you wish, although this is rarely needed, for obvious reasons!)
Example:
Password: <input type="password" name="password" size="20">
File uploads
Nearly all modern browsers allow files from the user's hard drive to be uploaded via an HTML form to the server. For this to work, the (CGI, ASP, PHP, etc) script on the server needs to be written to handle the file data. Explaining these scripts is outside the scope of this tutorial. We'll just look at how to create the file upload form field.
The file upload field consists of a filename box, much like a regular text box, and a Browse... button, that the user can use to browse to the file to upload on their hard drive. The file upload field takes the format:
<input type="file" name="xxxx" size="xxxx"
maxlength="xxxx" accept="xxxx">
The name attribute is the name of the upload field (for example, "photo"). The size attribute specifies the physical size (width) of the filename field, in characters. You can miss out this value in which case the browser's default field size will be used.
The maxlength attribute allows you to specify the maximum length of the filename field, in characters. If you leave this value out, then the filename can be any length.
Finally, the accept attribute allows you to specify exactly what types of files may be uploaded. To specify the file types, use MIME types (e.g. "application/octet-stream", "image/gif") separated by commas. Note that this only works on some browsers (other browsers will just allow the user to upload any type of file regardless of this attribute!).
Example:
Photo to upload:
<input type="file" name="photo" accept="image/*">
Other types of form fields
Now that you've explored hidden fields, password fields and file upload fields, find out about:
The end
That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!