HTML supports three types of text-input elements: textfields , password fields, and text areas. Each is given a name, and the value is taken from the content of the control. The name and value are sent to the server when the form is submitted, which is typically done by means of a submit button (see Section 19.4). TextfieldsHTML Element: <INPUT TYPE="TEXT" NAME="..." ...> (No End Tag) Attributes: NAME (required), VALUE , SIZE , MAXLENGTH , ONCHANGE , ONSELECT , ONFOCUS , ONBLUR , ONKEYDOWN , ONKEYPRESS , ONKEYUP This element creates a single-line input field in which the user can enter text, as illustrated earlier in Listings 19.1, 19.2, and 19.3. For multiline fields, see TEXTAREA in the following subsection. TEXT is the default TYPE in INPUT forms, although it is recommended for clarity that TEXT be supplied explicitly. You should remember that the normal browser word-wrapping applies inside FORM elements, so use appropriate HTML markup to ensure that the browser will not separate the descriptive text from the associated textfield. Core Approach
Netscape 7.0 and Internet Explorer 6.0 submit the form when the user presses Enter while the cursor is in a textfield and the form has a SUBMIT button (see Section 19.4 for details on a SUBMIT button). However, this behavior is not dictated by the HTML specification, and other browsers behave differently. Core Warning
To prevent the form from being submitted when the user presses Enter in a textfield, use a BUTTON input with an onClick event handler instead of a SUBMIT button. For example, you may want to use <INPUT TYPE="BUTTON" VALUE="Check Values" onClick="submit()"> instead of <INPUT TYPE="SUBMIT"> to submit your form. The following subsections describe the attributes that apply specifically to textfields. Attributes that apply to general HTML elements (e.g., STYLE , CLASS , ID ) are not discussed. The TABINDEX attribute, which applies to all form elements, is discussed in Section 19.11 (Tab Order Control).
Password FieldsHTML Element: <INPUT TYPE="PASSWORD" NAME="..." ...> (No End Tag ) Attributes: NAME (required), VALUE , SIZE , MAXLENGTH , ONCHANGE , ONSELECT , ONFOCUS , ONBLUR , ONKEYDOWN , ONKEYPRESS , ONKEYUP Password fields are created and used just like textfields, except that when the user enters text, the input is not echoed ; instead, some obscuring character, usually an asterisk, is displayed (see Figure 19-9). Obscured input is useful for collecting data such as credit card numbers or passwords that the user would not want shown to people who may be near his computer. The regular, unobscured text (clear text) is transmitted as the value of the field when the form is submitted. Figure 19-9. A password field created by means of <INPUT TYPE="PASSWORD" ...> .
Since GET data is appended to the URL after a question mark, you should always use POST with a password field so that a bystander cannot read the unobscured password from the URL display at the top of the browser. In addition, for security during transmission of data, you should consider using SSL, which encrypts the data. For more information on using SSL, see the chapters on Web application security in Volume 2 of this book. Core Approach
Text AreasHTML Element: <TEXTAREA NAME="..." ROWS=xxx COLS=yyy> ... </TEXTAREA> Attributes: NAME (required), ROWS (required), COLS (required), WRAP (nonstandard), ONCHANGE , ONSELECT , ONFOCUS , ONBLUR , ONKEYDOWN , ONKEYPRESS , ONKEYUP The TEXTAREA element creates a multiline text area; see Figure 19-10. The element has no VALUE attribute; instead, text between the start and end tags is used as the initial content of the text area. The initial text between <TEXTAREA ...> and </TEXTAREA> is treated similarly to text inside the now-obsolete XMP element. That is, white space in this initial text is maintained , and HTML markup between the start and end tags is taken literally, except for character entities such as < , © , and so forth, which are interpreted normally. Unless a custom ENCTYPE is used in the form (see Section 19.2, "The FORM Element"), characters, including those generated from character entities, are URL-encoded before being transmitted. That is, spaces become plus signs and other nonalphanumeric characters become % XX , where XX is the numeric value of the character in hex.
Figure 19-10. A text area in Netscape 7.0.
Listing 19.4 creates a text area with 5 visible rows that can hold about 30 characters per row. The result is shown in Figure 19-10. Listing 19.4 Example of a TEXTAREA form control<CENTER> <P> Enter some HTML:<BR> <TEXTAREA NAME="HTML" ROWS=5 COLS=30> Delete this text and replace with some HTML to validate. </TEXTAREA> <CENTER> |