Text Elements

The Password Text Box

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:

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:

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.