CIS 89C Client-Side Programming with JavaScript

Unit 15 - input (week 7)

type="text" type="hidden" type="password"

References:

McDuffie - Chapter 12 Forms and JavaScript

Topics:

Opening statement

input type="text" - McDuffie page 394

input type="hidden" - McDuffie page 392

input type="password" - McDuffie page 406

Summary

***********************************************************

Opening statement

There are several types of input elements.

We will look at three of the input types:

<input type="text" />

<input type="hidden" />

<input type="password" />

***********************************************************

input type="text"

The input type="text" element provides a one-line box, where the user can type input.

You may wish to provide the size, in characters, for the input box, or omit it and accept the default size.

<input type="text" size="30">

You may wish to provide a maximum number of characters, which is larger than the box. If the user types more characters than the size of the box, it will scroll.

<input type="text" size="30" maxlength="50" />

Notice this attribute is spelled maxlength

If you plan to use JavaScript to process the input element, it will usually be good to provide an id, so it can be found.

<input type="text" id="firstName" size="30" maxlength="50" />

Sometimes you might wish to have an initial data value displayed in the box.

This is good, if the user usually wants the value you provide as the default.

<input type="text" id="firstName" size="30" maxlength="50" value="no middle initial" />

The value will be in the text box initially, but the user can change it.

Sometimes you do not allow the user to change the value.

We may want to do this because we want to use the text box to display a result we create with our JavaScript code.

<input type="text" id="result" size="30" disabled="disabled" />

Note that the value of the disabled attribute must be "disabled".

The background of a disabled text box is light gray;

if you do not like that color, you can use a style the change it.

An alternate way to prevent the user from changing the value is to specify readonly="readonly"

The differences are:

disabled elements are grayed out (unless we change the background-color).

readonly elements are NOT grayed out.

disabled elements are NOT submitted to the server when the form is submitted.

readonly elements ARE submitted to the server when the form is submitted.

Processing the data the user enters in the text box:

Except when we are using the text box for our results, the data the user types in the box will be processed.

It can be processed it either or both of these ways:

- submit the form, which will then be processed by the server

this is beyond the scope of this class

- process the form using JavaScript

We may wish to process the input data at either of two times:

- onchange

- This event occurs when the user presses Enter or moves off the text box

- we use the onchange attribute of the <input type="text" /> element

- onsubmit

- This event occurs when the user presses the submit button for the form

- we use the onsubmit attribute of the <form> element

Of course we could process the data at other times.

If we do not have a form, we might have button, which the user presses when they are ready for the data to be processed.

- onclick

- This event occurs when the user uses the mouse to click the button

- we use the onclick attribute of the <button/ > or <input type=button />

element

***********************************************************

input type="hidden"

The input type="hidden" is a place to put data, but it does not appear on the user's page. What good is an input box, that is not on the user's page, and cannot receive input form the user?

It can be used to contain fixed information, such as the name of the form.

<input type="hidden" value="vacation destination form" />

We can also use JavaScript to set the value.

We may wish to do this to provide data from our JavaScript processing, which will be sent to the server when the form is submitted.

***********************************************************

input type="password"

The input type="password" works exactly the same as

input type="text", except when the user types a character, it appears as *

This keeps anyone who is looking over the shoulder from seeing the text on the screen. This is the first step in providing a secure password system.

Much more must be done, including especially encoding the information transmitted over the Internet. This is way beyond the scope of this course.

***********************************************************

Summary

The input type="text" and input type="password" elements provide a text box where the user can type input. The input type="hidden" provides a place where we can keep fixed information, or set information using JavaScript, which is not shown to the user, but is submitted to the server, along with the rest of the data the user entered into the form.

We can use these elements in a form, which can be submitted to a server.

We can use these elements without a form, and just process them with JavaScript.