This tutorial explores three special types of HTML form input 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.
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">
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 of a hidden
<input type="hidden" name="cart_id" value="1234">
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.
password field takes the format:
<input type="password" name="xxxx" size="xxxx">
name attribute is the name of the field (for example,
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 of a password
Password: <input type="password" name="password" size="20">
File upload fields
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">
name attribute is the name of the upload field (for example,
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.
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.
accept attribute allows you to specify exactly what types of files may be uploaded. To specify the file types, use MIME types (e.g.
"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 of a file
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: