Properties and Methods of the Form Object

The table below lists the properties of the form object.

PropertyValue
actionThe value of the action attribute in the HTML form tag
elementsAn array that includes an array element for each form element in an HTML form
encodingThe value of the enctype attribute, which varies with different browsers
lengthThe value of the total number of elements in an HTML form
methodThe value of the method attribute in an HTML form tag
nameThe value of the name attribute in an HTML form tag
targetThe value of the target attribute in an HTML form tag

Action Property

The action property allows you to access the value of the action="url" attribute in the opening form tag. The action attribute usually is an URL to a server-side script for processing.

<form id="Form1" action="http://aplaceonaserver.com/phpprocessing.php" >
Name: <input type="text" />
E-mail: <input type="text" />
<input type="submit" value="Submit" />
</form>

<script>
document.write("The form 'Form1' goes to " + document.Form1.action + " for processing.");
</script>

The sript writes on the screen the value of the action attribute (http://aplaceonaserver.com/phpprocessing.php) from the opening HTML form tag.

Elements Property

The elements property is an array that allows you to access each element within a specific form in the same order it appears in the code (it starts from 0). Unlike forms array, the elements property has an entry for each element in a given form.

To use the elements array to access an element in a form, use the index number for the element you want to access.

document.Form1.elements[0]

You can also access the first element of the Form1 (if it is the first form on the page)) in the following way:

document.forms[0].elements[0]

If you name the first element of the form, you can access it using its name.

<form id="Form1" action="http://aplaceonaserver.com/phpprocessing.php" >
Name: <input type="text" name="boxName" />
E-mail: <input type="text" />
<input type="submit" value="Submit" />
</form>
<script>
document.Form1.boxName
</script>

To create scripts that use the elements of a form, you have to access a property for a form element. Each form element is an instance of an object with its own properties and methods and all form elements have their own properties and methods. Many of them are used with most or all of the form elements.

Table of Form Elements with Their Objects and Methods

Element TypeObject NamePropertiesMethods
Buttonbuttonform, name, type, valueblur(), click(), focus()
Check boxcheckboxchecked, defaultChecked, form, name, type, valueblur(), click(), focus()
Hidden fieldhiddenform, name, type, valueNone
Radio buttonradiochecked, defaultChecked, form, name, type, valueblur(), click(), focus()
Reset buttonresetform, name, type, valueblur(), click(), focus()
Select boxselectform, name, options, selectedIndex, typeblur(), focus()
Submit buttonsubmitform, name, type, valueblur(), click(), focus()
Text boxtextdefaultValue, form, name, type, valueblur(), select(), focus()
Text areatextareadefaultValue, form, name, type, valueblur(), select(), focus()

The checked Property

The checked property is used to check boxes and radio buttons. If the box or button is checked it has a true value and false if the box or button isn’t checked.

<body>
<form>
Check the box for "yes": 
<input type="checkbox" id="YesOrNo" /><br>
<input type="button" value="See answer" onclick="isItChecked();" /><br>
</form>

<script>
function isItChecked() {
	var yesno = document.getElementById("YesOrNo");
		if (yesno.checked) {
				window.alert("The box is checked! Good!");
						}
		else {
				window.alert("Hey, you forgot to check the box!");
						}	
}
</script>
</body>

First there is a form that contains a check box and a button. When the button is clicked a function is called.
The function is created. It contains a variable which holds the value of the checkbox (checked or not checked). An if – else statement checks if the checkbox is checked or not and creates alerts acordingly.

The defaultChecked Property

The defaultChecked property is a Boolean property of true or false. If the element has the check attribute then the value is true, if not, the value is false.

<form>
Do you want to receive email updates and offers:<br>
Yes <input type="checkbox" id="Ye" checked="checked" /><br>
No <input type="checkbox" id="No" /><br><br>
</form>

The defaultValue Property

The defaultValue property is used with text boxes and text areas. It holds the value of the default value set in the value attribute of the element’s tag.

<body>

<form>
Enter your URL:<br>
<input type="text" id="theURL" value="http://saigon.ro" /><br>
<input type="button" value="Reset" onclick="backToDefault();" />
</form>

<script type="text/javascript">
function backToDefault() {
	var URLbox = document.getElementById("theURL");
	URLbox.value = URLbox.defaultValue;
}
</script>

</body>

In the HTML code the value attribute for the text box is set to http://saigon.ro. This is its default value. When the function is called it assignes this value to the text box by changing its current value (URLbox.value) to the default value URLbox.defaultValue.

Note:
A reset button changes everything back to default values (not only specific values as this method does).

<input type = "reset" value = "Reset" />

The form Property

The form property is used very often with the keyword this to refer to the form that contains the element that uses it. This way you don’t have to name or id the form.

<form>
Enter your URL:<br>
<input type="text" name="myForm" value="http://saigon.ro" /><br>
<input type="button" value="Change" 
onclick="this.form.myForm.value='http://esl.saigon.ro';" />
</form>

The code changes the current value of the text box to http://esl.saigon.ro when the button is clicked.

The name Property

The name property holds the value of the name attribute of an element.

<body>

<form name="Form1">
Name: <input type="text" name="YourFullName" />
<input type="submit" value="Submit" /><br>
</form>

<script>
document.write("The first element is " + document.Form1.elements[0].name);
</script>

</body>

The code finds and write on the screen the name of the first element in the document in the Form1.

The options Property

The options property is an array that contains an element for each option listed in a select box in a form. Of course, the index numbers start counting from 0 and it appears in the array in the same order as it is written in the HTML code.

<body>

<form>
Motorcycles:
	<select id="TheList">
			<option selected="selected" value="Honda">Honda</option>
			<option value="Yamaha">Yamaha</option>
			<option value="Suzuki">Suzuki</option>
	</select>
</form>

<script>
	var BikeBox = document.getElementById("TheList");
	document.write("<br>The second option is " +
	 BikeBox.options[1].value + "<br>");
	document.write("The third option is " +
	 BikeBox.options[2].value);
</script>

</body>

The selectedIndex Property

The selectedIndex property holds the value of the index number of the option that the viewer has selected. If the first option is selected, the value is 0.

The type Property

The type property holds the value of the type attribute for a form element (type=”text” or type=”button”).

The value Property

The value property is a very commonly used property. It holds the current value of an element. A text box may not have a default value but when the viewer inputs information into the box it has value. If nothing is in the box then the value is an empty string.

The blur() Method

The blur() method allows to to create a blur event on an element.

<form>
Your favorite motorcycle:<br>
<input type="text" name="FavMoto" value="Honda" onfocus="this.form.FavMoto.blur();" />
</form>

Normally, clicking the text box gives it focus, but the onfocus event handler catches the focus on the text box and then uses the blur() method on the element to remove focus from it.

The click() Method

The click() method allows you to create a click event on a button. However, it doesn’t activate the onclick event handler if it is used in the button. The click() method is useful when used on submit or reset buttons because they don’t need an onclick event in order to work.

<form>
Your favorite motorcycle <input type="text" name="FavMoto" 
onblur="this.form.annoyMe.click();" /><br>
Your favorite car <input type="text" /><br><br>
<input type="reset" name="annoyMe" value="Reset Form" />
</form>

This code annoys the user. The code asks you to type in your favorite motorcycle first then your favorite car. After you finish typing your favorite motorcycle in the first box and you want to type in your favorite car in the second box, the onblur event causes the button named annoyMe to reset the form and delete the user’s input.

The focus() Method

The focus() method lets you create a focus event in your code.

<body>

<form>
Your favorite motorcycle <input type="text" id="FavMoto" /><br>
Your favorite car <input type="text" /><br><br>
</form>

<script>
var focusBox = document.getElementById("FavMoto");
focusBox.focus();
</script>

</body>

The code uses the focus() method to give focus to the first element of the form so the user doesn’t have to click on it in order to bring it into focus.

The select() Method

The select() method allows you to automatically select the content of a text box so it makes deleting or copying the content by the user much easier.

<form>
<textarea name="MyTextArea" style="width: 400px; height: 200px;" 
onfocus="this.form.MyTextArea.select();">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sagittis odio lobortis cursus lacinia. 
Ut erat ex, posuere quis nibh dignissim, imperdiet tempus ipsum. Mauris lectus arcu, 
posuere ac tincidunt nec, sollicitudin quis risus. Vivamus ac massa turpis.
</textarea>
</form>

Once the user clicks inside the textarea, the whole text is selected allowing the user to delete or copy it
very fast.

The encoding Property

The encoding property holds the value of the enctype attribute of a form tag. The result might be different from browser to browser.

The length Property

The length property holds the number of elements of a form.

The method Property

The method property holds the value of the method attribute of a form tag.


<form name="Form1" method="post" action="">
<!-- Form content here -->
</form>

The name Property

The name property holds the value of the form’s name attribute.

<form name="Form1">
<!-- Form content here -->
</form>

The target Property

The target property holds the value of the form’s target attribute.

<form name="Form1" target="place">
<!-- Form content here -->
</form>

Methods of the Form Object

The Form Object has only two methods, reset() and submit().

The reset() Method

The reset() method allows you to reset a form on any event.


<form name="Form1">
Your bike: <input type="text" name="MyBike" onblur="this.form.reset();" /><br>
Your car: <input type="text"/><br><br>

<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</form>

The form is reset after the viewer removes the focus from the first element.

The submit() Method

The submit() method allows you to submit a form without the viewer clicking the submit button.

<form action="http://saigon.ro/form.php">
Your bike: <input type="text" name="MyBike" onblur="this.form.submit();" /><br>
Your car: <input type="text"/><br><br>

<input type="submit" value="Submit" />
</form>

When the user removes the focus from the first element of the form, the form is submitted.

Leave a Reply