The first form in a document can be referred to as document.form1 ("form1" is the value of the NAME attribute of the form) or document.form.
Form object properties
- action - program to which for data will be submitted
- encoding - form MIME type (specified with the ENCTYPE attribute)
- length - number of form elements
- method - GET or POST
- target - window in which result of form (from the CGI script) will be displayed
Submitting & resetting forms
Use submit and reset buttons.
Detecting form events
There are two event handlers.
Scripting form elements
Both of the statements below refer to the first element called name1 on the form called order.
INPUT TYPE="text" NAME="text1" VALUE="hello" SIZE="30"
document.order.username.value = 'Joe Soap'
The code above sets the text field username to Joe Soap.
Text field methods
- focus() positions the cursor into a field
- blur() removes the focus from a field
- select() selects all the text in a field
Text field events
- onFocus occurs when a text field gains the focus
- onBlur occurs when a text field loses focus
- onChange occurs when the text is changed and the focus is moved off a field
- onSelect occurs when some or all of the text in a field is selected. This event does not occur on execution of the select() method
INPUT TYPE="submit" NAME="sub1" VALUE="Click here"
- INPUT TYPE="submit" causes data in form fields to be sent to a CGI script
- INPUT TYPE="cancel" sets all form fields back to their default values
The onClick event handler is commonly used with buttons.
INPUT TYPE="checkbox" NAME="check1" VALUE="yes" CHECKED>
INPUT TYPE="radio" NAME="radio1" VALUE="Option1" CHECKED> Option 1
INPUT TYPE="radio" NAME="radio1" VALUE="Option2"> Option 2
INPUT TYPE="radio" NAME="radio1" VALUE="Option3"> Option 3
SELECT NAME=="select1" SIZE=40>
OPTION VALUE="choice1" SELECTED> First choice
OPTION VALUE="choice2"> Second choice
OPTION VALUE="choice3"> Third choice
Drop-down list properties
- name is name of selection list
- length is number of options in list
- options is an array of options. There is an entry for each selection
- length indicates number of selections in the options array
- index is the array index
- defaultSelected shows the state of the selected attribute
- selected is the current state of the option. Setting this property to true selects the option. You can select multiple options if the MULTIPLE attribute is included in the SELECT tag
- name is the valure of the NAME attribute
- text is the text that is displayed in the option
- selectedIndex returns the index value of the currently selected item. In a multiple selection list this indicates the first selected item
Drop-down list methods
- blur() removes the focus from a selected field
- focus() moves the focus to a selected field
Drop-down list events
- onFocus activated when field selected
- onBLur activated when field de-selected
- onChange when focus lost and field value changed
Reading the value of a select item is a two step process. First use the selectedIndex property to find the value of the selected choice.
ind = document.navform.choice.selectedIndex;
val = document.navform.choice.options[ind].value;
Displaying data from a form
Validating a form