Through this article you can create online registration form using 'Button object' in JavaSript. First of all you should know what is 'Button objact'.
Button object: Button object is the property of form object in the JavaScript.
Syntex of the button:
<input type="button" name="button_name" value ="Result" onclick="function()" />
The 'name' is the name of button that you want to call. The 'onclick' and associated function is optional. The function is run when the button is clicked and must exist, usually in the header.
There are the following object of the button in JavaScript.
Submit: Submit object is used for submit the information from the form or page.
Reset: Reset objet is used for clear the fields of the form.
Button: Button object is used for calling the function.
For Example: You can understand the use of 'Button objects' after reading this example. I am Creating the 'Online registration form' by using the 'Button objects' in JavaScript.
<html>
<head>
<title>Online Registration</title>
<SCRIPT LANGUAGE="JavaScript">
function showHelp()
{
helpWin = window.open("", "Help", "height=225,width=400")
helpWin.document.write("<body><h1>Help on Registration</h1>")
helpWin.document.write("Step 1: Please enter your product information.<p>")
helpWin.document.write("Step 2: Click the 'Register' button to submit your form.<p>")
helpWin.document.write("Step 3: Click the Clear button to clear the form and start again.<p>")
helpWin.document.write("<p>")
helpWin.document.write("<form><DIV ALIGN='CENTER'>")
helpWin.document.write("<input type=button value='OK' onClick='window.close()'>")
helpWin.document.write("</DIV></form></body>")
}
</SCRIPT>
</head>
<body bgcolor="#ccffff">
<h1>Online Registration</h1>
<form method="POST">
<p>Please Fill up the following product information:</p>
<blockquote>
<font color="navy">
<pre>
Product name:
<input type=text size=25 maxlength=256 name="Product_Name">
Model number:
<input type=text size=25 maxlength=256 name="Product_Model">
Version number:
<input type=text size=25 maxlength=256 name="Product_VersionNumber">
Operating system:
<input type=text size=25 maxlength=256 name="Product_OperatingSystem">
Serial number:
<input type=text size=25 maxlength=256 name="Product_SerialNumber">
Product cost:
<input type=text size=25 maxlength=256 name="Product_cost">
</pre>
</font>
</blockquote>
<p>
<input type=submit value="Register">
<input type=reset value="Clear">
<input type=button value="Help" onClick="showHelp()">
</p>
</form>
</body>
</html>
Output: Output of the given script is something as follows:
Figure 1:
After filling product's information click on 'Register' button. This button will submit your product's information.
If you click on 'Help' button then you will see the output something like this:
Figure 2: