Forms and Form Elements

Forms as Objects

1. A form is an object so if you want to refer to it in JavaScript, it should be given a name.
2. An example of how to name a form and then to refer to it in JavaScript is shown:

document.infoForm (this is the way to refer to this form)

Text Objects in Forms

1. There are four types of text objects in HTML: TEXT, PASSWORD, HIDDEN, TEXTAREA.

1. JavaScript can have control over all of these by providing them with a NAME.
2. Common event handlers for text elements:
   1. onChange triggers as soon as one enters new text and leaves the text field.
   2. onFocus triggers as soon as one places the cursor in the text field.
   3. onBlur opposite of onFocus, triggers as soon as one leaves the text field.
3. Common methods for text elements:
   1. focus() can be used to position the cursor in a text field.
   2. blur() can be used to cause the cursor to leave a text field.
4. By far the most common property of a text field is its value, which is equal to whatever text is entered in the text box.

Example 1 focus() Method

Your name:

Choose a password:

Verify password:

Example 2 onChange, onFocus and onBlur Event Handlers

Using onChange, onFocus, and onBlur.

Text entered in this field will be changed to upper case when you leave the field

An alert box will pop up when you enter or leave this field.

Button Objects

1. The only really useful JavaScripting for buttons is the onClick event handler (we already used this in the previous lesson).

Checkbox Objects

1. Checkboxes can be either checked or not. This means the key property is the checked property.
2. This can be used in an ifelse statement which will return true if checked and false if not.

Example 3 checked Property

Check here

Assignment #7

1. Rewrite Example 1 (the password verification program) so that if the passwords dont match, both password fields will be cleared and the cursor will be returned to the first password field. Also, have the alert boxes include the name entered in the first field (i.e. ______, you must enter a password. or ______, your entered passwords did not match). Make sure to change all your variable names, form name, etc. to match what you are doing in your assignment. Save the file as "7a_forms.html" in your shared OneDrive folder.

1. Make a form that has a two text fields. However, the first text field is a trick text field. Every time you try putting the cursor in the first field, an alert box will pop up that says Ha! Ha! and the cursor goes over to the second text field. In other words, there is no way to enter any text in the first text box. Make sure to change all your variable names, form name, etc. to match what you are doing in your assignment. Save the file as "7b_forms.html" in your shared OneDrive folder.

1. Make a form with a checkbox and a button. Whenever the button is clicked, the checkbox will become checked and then unchecked if the button is clicked again. (Hint: use the click() method for checkboxes in order to do this). Make sure to change all your variable names, form name, etc. to match what you are doing in your assignment. Save the file as "7c_forms.html" in your shared OneDrive folder.