Techcss
Javascript_page_menu

JavaScript with Form Object and Elements

Form is an important element to get the data input by user and send the values or data to the server.


Form object

This is a frequently used object to interact with user and JavaScripts are regularly used program to check validation of user inputs at post-submit occurences.

Separate instances of the form object are created, for each form to be reffered in the document. We can refer to a form by name or by ID(DOM element identification) or numeric index. This is specially helpful in html documents with multiple forms.


Properties of the Form object

Properties Description
action This attribute of the form is used to pass
elements All the form elements can be referenced by the elements [ ] array
encoding String containing the MIME type used for encoding the form contents sent to the server.
name The name string contain the value of the NAME attribute of the FORM tag.
target The target code contain the name of the window to which a form is to be submitted.

Methods of the Form Object

The only method of form object is submit() method. This method emulates a click on the submit button without invoking the onSubmit event handler.

<html>
<head>
<script>
	function verifyans(form) {
 		if (form.ans.value == "Most popular language of world") {

		alert('The form will get submitted');
        form.submit(); }
        else {
        alert('Sorry ! You are wrong. You will have to close the browser to 
					enter another answer again !'); 
        form.ans.value = " ";
        	}
        }
</script>
</head>
<body>
<form method=post onSubmit="return false"> What does CSS stand for?
<input type="text" name="ans" value="CSS" onChange="verifyans(this.form);">
</form>
</body>
</html>
The onChange event handler only fires when the mouse is clicked outside the text field. The tab button does not function here as there is no other eneterable field in the form.
Similarly, the event handler, onSubmit can be used to instead of the submit method.

Form Elements

Forms are actually the collection of form elements, which allow the user to input data(textual or numeric) Those input data(values) pased to the server through the CGI(Common Gateway Interface).

The button element

There are generally two buttons in form object i.e; submit and reset which are used to send the data stored in a form to some URL at server-side script for processing or store the data.

The properties associated with the button element are 'name' and 'value', both of which are specified in the input tag.

There is only one event handler for the button element, i.e.,onClick which is associated with a single method, click().


The checkbox element

Checkboxes are basically toggle switches which help users to take the decision as Yes / No for a perticular option.

The single method is associated with the onClick event handler.

The properties and methods are associaed with the checkbox are listed below in table.
Methods or Properties Description
Checked Indicates current status of checkbox element
default checked Indicates default status of element
name Indicates name of element as specified in input tag
value Indicates value of element as specified in input tag
click() Emulates a click

The hidden element

This is an unique element.Web browser does not display it like the other form elements. It can store values that the user wants to keep hidden and the hidden value is sent to the server by form submission.

The hidden element has two properties associated with it and they are name and value. These are string values like other elements.

There are no methods or event handlers for the hidden element.


The password element

This element is another type of unique object which display the text entered in it as asterisks(*). Hence This element can be used as private verification number for security purpose.

Methods or Properties Description
name represents name of element as specified in INPUT tag
value represents value of element as specified in INPUT tag
default Value represents default value for the element

The radio element

The radio buttons always appear in multiple number but as a group of answer with different options for user to choose one of them.

Methods or Properties Description
checked represents current status of radio element
defaultChecked represents default status of the element
index indicates index of the currently selected radio button in the group. Since it maintains an array of radio elements
length represents the number of radio buttons in a group
name represents the name of element as specified in INPUT tag.
value represents the value of element as specified in INPUT tag
click() emulates a click in the radio button

The reset element

The reset button is used in a form to clear a form, and the input values other than the default values mentioned there in the code.

The reset element has two properties, name and value which function in the same way as for the other elements.

The click method and the concerned event handler, onClick are also available for this element.


The select element

This is a frequently used object in form object. This element is used to create a selection lists as drop-down menus or scrollable lists.

It makes use the select and option tags.

<form method="post">
	<select name="menu" size=3 multiple>
	 <option selected> Vanilla
	 <option>Mango
	 <option>Strawberry
	 <option>Spanish Delight
	 <option>Mango
	 <option>Raisin Roll
	 <option>Chocolate
	 <option>Nutty Bar
	</select>
</form>

Properties or Methods Description
selectedIndex Contains the index number of the currently selected option
defaultSelected Indicate the the option is selected by default
index Contains index value of current option
selected represents current status of the option
text contains value of text displayed in the menu
value contain value indicated in the option tag

The submit element

This button submitts the current data fed in the form input elements to the server URL specified in the action attribute.

In the case of reset object and button object the submit element has the name and value property, along with the click() method and onClick event handler.


The text element

This is the most commonly used entry field in HTML forms. It enables a single line of text entry.

Properties or Methods Description
default Value Indicates default value of the element as specified in the input tag
name Indicates name of the element as specified in the input tag
value represents current value of the element
focus() Emulates giving focus to the text field
blur() Emulates removing focus from the next field
select Emulates selecting text in the text field

The event handlers that are used along with the text elements are onBlur, onFocus, onChange and onSelect. An important aspect of text fields is that the contents of the text field can be changed by assigning values to the value property.


The textarea element

The textarea element provide users a cutomized, multiple line text entry field.

The syntax for defining a textarea:
<textarea name ="field name" rows = 20 cols = 5>
Here we can enter multiple line text.
</textarea>