FORM OBJECT IN JAVASCRIPT


FORM OBJECT:


1.A form object is used to take user data as input for processing.
2. Can be created by using html form element.
3. Can be accessed by -
i) document.formName, where formName is the name of the form.
ii) document.form.formName, where formName is the name of the form.
iii) document.forms[] array, where document.forms[0] refers to the first form of the document.

FORM OBJECT PROPERTIES:


1.ACTION: presents action attribute
  • The action property refers the action attribute of the html <form> tag.
  • The value of the action attribute is an url, responsible for processing the form data submitted.
  • Syntax:
form.action
  • Example:
document.myform.action
Where "myform" is the name of the form in the document

2.ELEMENTS:an array reflecting all the elements in a form
  • The elements property of the form object refers the form's elements (an array of object) such as checkbox, radio, and text objects etc.
  • If a form called form1 has a textbox, a textarea and a submit button, then these elements can be referred as form1.elements[0], form1.elements[1], form1.elements[2].
  • Form's elements can also be referred by their name.
  • Syntax:
form.elements
  • Example:
    document.myform.elements[pos]
    Where "myform" is the name of the form in the document.
    "pos" represents the position of the element in the form.
    <script type="text/javascript">
    function TextboxName() 
    {
alert("Textbox name is: " + document.form1.elements[0].name);
alert("Submit button name is: " + document.form1.elements[1].name);
}
</script>  
<form name="form1" action="#">  
<br />
<input type="text" name="textbox1"  size="25" />
<br /><br />
<input type = "button" name="sb1"  value = "Get Textbox Name" onclick = 'TextboxName()' />
</form> 
3.ENCODING:presents ENCTYPE attribute

  • The encoding property of the form object refers the type of encoding of the form.
  • It is specified in the enctype attribute of the html <form> tag
  • Syntax:
form.encoding
  • Example:
document.myform.encoding
Where "myform" is the name of the form in the document
4.LENGTH: presents the number of elements in a form
  • The length property of the form object refers the number of elements in the form.
  • Syntax:
    form.length
  • Example:
    document.myform.length
    Where "myform" is the name of the form in the document.

5.METHOD:presents the method attribute
  • The method property of the form object refers the type of submission, get or post used by the form.
  • It is represented by the value of the method attribute of the html <form> tag.
  • Syntax:
    from.method
  • Example:
    document.myform.method
Where "myform" is the name of the form in the document
6.TARGET: presents the target attribute
  • The target property refers the target attribute of html <form> tags.
  • The valid attributes are _blank, _parent, _self, and _top.
  • Syntax:
    form.target
  • Example:
document.myform.target
<script type="text/javascript">
 function showtarget()
{
var targetval = document.testform.target;
alert("The value of the target property is : "+targetval );
}
 </script> 
<form name="testform" action="post" target="blank">
<br /><br />
<input type="button" value = "Click to see the target specification." onclick='showtarget()' />
</form>
7.NAME: presents the name attribute
  • The name property refers the name of the form, and it is specified in html <form> tag.
  • Syntax:
form.name
  • Example:
document.myform.name
Where "myform" is the name of the form in the document.

FORM OBJECT METHODS:


1.RESET:Simulates a mouse click on a reset button for the calling form.

The reset method is used to restore a form element's default values.
<body>
<script type="text/javascript">
function resetForm()
{
document.form1.reset();
}
</script>
<form name="form1" action="#">
Field 1:<input type="text" size="20" name="text1" /><br />
Field 2:<input type="text" size="20" name="text2" /><br />
Field 3:<input type="text" size="20" name="text3" /><br /> 
<input type="button" name="clear" value="reset" onclick='resetForm()'/>
</form>
</body>  
2.SUBMIT:submits a form
  • The submit() method of the form object is used to submit the specified form.
  • It behaves the same as if a submit button was clicked.
    <body>
<script type="text/javascript">
function submitForm(form){ 
document.form1.submit(form); 
} 
</script>  
<form name = "form1"  method = "post"  action = "thankyou.html"> 
Input your name and address  
<br /><br />  
Name :  <input type="text" size="40" name="name" />  
<br /><br />  
Address : <input type="text" size="40" name="age" />  
<input type="text" size="35" name="phone" />  
<br /><br />  
<input type= "button" value="Submit" onclick = "submitForm(this.form)" />  
</form>  
</body>  

No comments:

Post a Comment

Subscribe to: Posts (Atom)