home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  

Book HomeWeb Design in a NutshellSearch this book

15.4. Form Elements

There are a variety of elements (also sometimes called "controls" or "widgets") that can be used for gathering information from a form. This section looks at each control and its specific attributes. Every form control (except submit and reset) requires that you give it a name (using the name attribute) so the form-processing application can sort the information. For easier processing of form data on the server, the value of the name should not have any character spaces (use underscores or periods instead).

15.4.1. Input Controls: <input>

The controls described in the following sections are entered as attribute options within the <input> tag. Password text entry (type=password)

A password field (type=password) works just like text entry, except the characters are obscured from view using asterisk (*) or bullet (Figure characters (which one depends on the browser). Although the characters are not displayed in the browser (Figure 15-3), the actual characters are available in the form data, so this is not a secure system for transmitting passwords. For example, the following code text reveals the actual characters in the default value:

<P>What is your password?</P>
<INPUT TYPE="password" NAME="password"  SIZE="8" MAXLENGTH="8" VALUE="abcdefg">
Figure 15-3

Figure 15-3. Password input Custom button (type=button)

This button (type=button) has no predefined function, but rather is a generic tool that can be customized with JavaScript. Use the value attribute to write your own text on the button, as shown in the following code and in Figure 15-8. It is supported only on Version 4.0 browsers and higher. The data from a type=button input element is never sent when a form is submitted; this type is only useful with JavaScript programs on the browser.

<P>This does something really exciting.</P>
<INPUT TYPE="button" VALUE="Push Me!">
Figure 15-8

Figure 15-8. Custom button

15.4.3. Creating Menus with the <select> Tag

The <select> tag creates a menu of options that is more compact than groupings of checkboxes or radio buttons. A menu displays as either a pull-down menu or as a scrolling list of choices, depending on how the size is specified. The <select> tag works as a container for any number of <option>s.

The text between the opening and ending <option> tags is the value that is sent to the server. If you want to send a value for that choice that is not displayed in the list, use the value attribute within the <option> tag.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.