The Password Text Box - Page 11

The only real purpose of the password box is to allow users to type in a password on a page and to have its characters hidden, so that no one can look over their shoulder at it. However, when sent to the server the text in the password is sent as plain text – there is no encryption or attempt at hiding the text – so it's not a secure way of passing information.

Defining a password box is identical to a text box, except that the TYPE attribute is password:

<INPUT NAME=password1 TYPE=password>

This form element creates an associated Password object, which is almost identical to the Text object in its properties, methods, and events.

The Hidden Text Box

The hidden text box can hold text and numbers just like a normal text box, the difference being that it's not visible to the user. A hidden element? It may sound as useful as an invisible painting, but in fact it proves to be very useful.

To define a hidden text box we have the following HTML:

<INPUT TYPE="hidden" NAME=myHiddenElement>

The hidden text box creates a Hidden object. This is available in the elements array property of the Form object and can be manipulated in JavaScript like any other object. Although it's only through its HTML definition or through JavaScript that we can actually set its value, like a normal text box its value is submitted to the server when the user submits the form.

So why are they useful? Let's imagine we had a lot of information that we need to obtain from the user, but to avoid having a page stuffed full of elements and looking like the control panel of the space shuttle, we decide to obtain the information over more than one page. The problem is how do we keep a note of what was entered in previous pages? Easy – we use hidden text boxes and put the values in there. Then, in the final page, all the information is submitted to the server – it's just that some of it is hidden. Anyway, we'll see more about this in the server- side scripting chapter.

Textarea Element

The text area element allows multi-line input of text. Other than this, it acts very much like the text box element.

However, unlike the text box, the textarea element has its own tag, the <TEXTAREA> tag. It also has two additional attributes: COLS and ROWS. The COLS attribute defines how many characters wide the textarea will be and the ROWS attribute defines how many character rows there will be. Setting the text inside the element is not done by using the VALUE attribute, but by putting it between the start and close tags. So if we want a textarea element 40 characters wide by 20 rows deep with initial text of "Hello World" on the first line and "Line 2" on the second line, then we would define this as:

<TEXTAREA NAME=myTextArea COLS=40 ROWS=20>
   Hello World
   Line 2
</TEXTAREA>

Another additional attribute of the <TEXTAREA> tag is the WRAP attribute, which determines what happens when the user types to the end of a line. The default value for this is off so that if the user does not hit return at the end of a line then it just keeps going, with a horizontal scroll bar appearing. To switch wrapping on we have two possible values we can use: nothing (that is just including the WRAP attribute on its own) and hard. As far as client-side processing goes both do the same thing: they switch wrapping on. However when we come to server-side processing they do make a difference to what information is sent to the server when the form is posted.

If we set the WRAP attribute on by including it in the tag definition, or setting it to soft, then wrapping will occur client side, but the carriage returns won't be posted to the server, just the text. If the WRAP attribute is set to hard then any carriage returns caused by wrapping will be converted to hard returns, that is, as if the user had hit the return key, and these will be sent to the server. Also we need to be aware that what a carriage return character actually is, is determined by the operating system that the browser is running on. For example, on Windows a carriage return is \r\n, whereas on a Macintosh the carriage return is \r and on Unix a carriage return is \n.

The Textarea object created by the <TEXTAREA> tag has the same properties, methods and events as the Text object we saw previously. Note that there is a value property even though the <TEXTAREA> tag does not have a VALUE attribute. The value property simply returns the text between the <TEXTAREA> and </TEXTAREA> tags. The events supported by the Textarea object include the onkeydown, onkeypress, onkeyup and onchange event handlers.

How It Works - Page 10
Beginning JavaScript
Try It Out: Event Watching - Page 12