19.3 Text Controls

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).

Textfields

HTML 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

graphics/bwopenglobe_icon.gif

Use explicit HTML constructs to group textfields with their descriptive text.


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

graphics/bwopenglobe_icon.gif

Don't rely on the browser submitting the form when the user presses Enter while in a textfield. Always include a button or image map that submits the form explicitly.


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).

NAME

The NAME attribute identifies the textfield when the form is submitted. In standard HTML, the attribute is required. Because data is always sent to the server in the form of name/value pairs, no data is sent for form controls that have no NAME .

VALUE

A VALUE attribute, if supplied, specifies the initial contents of the textfield. When the form is submitted, the current contents are sent; these can reflect user input. If the textfield is empty when the form is submitted, the form data simply consists of the name and an equal sign (e.g., name1=value1& textfieldname= &name3=value3 ).

SIZE

This attribute specifies the width of the textfield, based on the average character width of the font being used. If text beyond this size is entered, the textfield scrolls to accommodate it. This could happen if the user enters more characters than SIZE number or enters SIZE number of wide characters (e.g., capital W) when a proportional-width font is being used. Netscape and Internet Explorer 6.0 automatically use a proportional font in textfields. Unfortunately, you cannot change the font by embedding the INPUT element in a FONT or CODE element. However, you can use cascading style sheets to change the font of input elements. For example, the following style sheet (placed in the HEAD section of the HTML page) will display the text for all INPUT elements as 12pt Futura ( assuming that the Futura font is installed on the client machine).

 
 <style type="text/css">  INPUT {   font-size : 12pt;   font-family : Futura;   }  </style> 

Core Approach

graphics/bwopenglobe_icon.gif

By default, Netscape and Internet Explorer display INPUT elements in a proportional font. To change the font for INPUT elements, use style sheets.


MAXLENGTH

MAXLENGTH gives the maximum number of allowable characters. This number is in contrast to the number of visible characters, which is specified through SIZE . However, note that users can always override this; for GET requests , they can type data directly in the URL and for POST requests they can write their own HTML form. So, the server-side program should not rely on the request containing the appropriate amount of data.

ONCHANGE, ONSELECT, ONFOCUS, ONBLUR, ONDBLDOWN, ONKEYPRESS, and ONKEYUP

These attributes are used only by browsers that support JavaScript. They specify the action to take when the mouse leaves the textfield after a change has occurred, when the user selects text in the textfield, when the textfield gets the input focus, when the textfield loses the input focus, and when individual keys are pressed or released, respectively.

Password Fields

HTML 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" ...> .

graphics/19fig09.gif

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

graphics/bwopenglobe_icon.gif

To protect the user's privacy, always use POST when creating forms that contain password fields. For additional security, transmit the data by using https :// , which uses SSL to encrypt the data.


NAME, VALUE, SIZE, MAXLENGTH, ONCHANGE, ONSELECT, ONFOCUS, ONBLUR, ONKEYDOWN, ONKEYPRESS, and ONKEYUP

Attributes for password fields are used in exactly the same manner as with textfields.

Text Areas

HTML 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 &lt; , &copy; , 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.

NAME

This attribute specifies the name that will be sent to the server.

ROWS

ROWS specifies the number of visible lines of text. If more lines of text are entered, a vertical scrollbar will be added to the text area.

COLS

COLS specifies the visible width of the text area, based on the average width of characters in the font being used. In Netscape 7.0 and Internet Explorer 6.0, if the text on a single line contains more characters than the specified width allows, the text is wrapped to the next line. However, if a single word has more characters than the specified width, Internet Explorer 6.0 wraps the word to the next line and Netscape 7.0 adds a horizontal scrollbar to keep the word on one line. Other browsers may behave differently.

ONCHANGE, ONSELECT, ONFOCUS, ONBLUR, ONKEYDOWN, ONKEYPRESS, and ONKEYUP

These attributes apply only to browsers that support JavaScript; they specify code to be executed when certain conditions arise. ONCHANGE handles the situation in which the input focus leaves the text area after it has changed, ONSELECT describes what to do when text in the text area is selected by the user, ONFOCUS and ONBLUR specify what to do when the text area acquires or loses the input focus, and the remaining attributes determine what to do when individual keys are typed.

Figure 19-10. A text area in Netscape 7.0.

graphics/19fig10.gif

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> 


Core Servlets and JavaServer Pages (Vol. 1.Core Technologies)
Core Servlets and Javaserver Pages: Core Technologies, Vol. 1 (2nd Edition)
ISBN: 0130092290
EAN: 2147483647
Year: 2002
Pages: 194

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net