The form is obtained from the server, completed by the client, and is then sent back to the browser for processing. Below is a survey form that contains most of the parts of a form. The form allows the user to make various choices and then submit this form/information to the server by clicking the submit button. What is sent to the server is a string consisting of pairs of values connecting the name of each input data box with the entry or choice (value) made by the client.
The submit button is used to send the completed form to the server for processing. We will not study this aspect of the form in this tutorial. The reset button, when clicked, deletes all the entries and returns the form to its original state.
Please note that text types have names and values, and so do radio and checkbox types. The select type also has a name and values. These names and values will play an important part in our subsequent discussion.
We start our presentation with a simple form and extend it in a series of steps.
1: <html>
2: <head>
3: <title>form1</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h3><center>Form with two text data boxes.</center></h3><p>
7: <form name=jack>
8:
9: <input type=text size=10 name=first value="">
10: <input type=text size=10 name=second value=""><p>
11:
12: <input type=reset value=reset>
13: <input type=submit value=submit>
14: <input type=button value=other>
15:
16: </form>
17: </body>
18: </html>
In line 7 the form was given the name "jack". This is necessary for JavaScript needs. Any other name could be used instead of "jack". This form contains two text data boxes next to each other (lines 9-10) followed by three buttons on the next line, the reset, submit, and other buttons, lines 12-14. We will have use of the other button later. We could use any other name instead of jack. We will initially use the text type, reset and submit type of inputs in our forms. Later we will also use the check box and radio type of inputs.
In the next program we just add another text data box along the first two.
1: <html>
2: <head>
3: <title>form2</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h3><center>Form with three text data boxes.</center></h3><p>
7: <form name=jack>
8:
9: <input type=text size=10 name=first value="">
10: <input type=text size=10 name=second value="">
11: <input type=text size=10 name=third value=""><p>
12:
13: <input type=reset value=reset>
14: <input type=submit value=submit>
15: <input type=button value=other>
16:
17: </form>
18: </body>
19: </html>
The three text data boxes are given by lines 9-11. Each of these has a unique name.
We now extend the previous form to one having two text data boxes on each of three rows.
1: <html>
2: <head>
3: <title>form4</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h3><center>Form with two text data boxes, three rows, and labels.</center></h3><p>
7:
8: <form name=label>
9: <input type=text size=10 name=label1 value="label 1">
10: <input type=text size=10 name=label2 value="label 2"><p>
11: </form>
12:
13: <form name=jack>
14:
15: <input type=text size=10 name=first value="">
16: <input type=text size=10 name=second value=""><br>
17:
18: <input type=text size=10 name=first value="">
19: <input type=text size=10 name=second value=""><br>
20:
21: <input type=text size=10 name=first value="">
22: <input type=text size=10 name=second value=""><p>
23:
24: <input type=reset value=reset>
25: <input type=submit value=submit>
26: <input type=button value=other>
27:
28: </form>
29: </body>
30: </html>
The three sets of lines 15-16, 18-19, and 21-22 each give two text data boxes next to each other on a line. Please note that the three boxes on the left side are each called "first", and those on the right are called "second". We will later show how they can be uniquely indentified.
We introduce now an important property of JavaScript, that of the function. A sample of a function that we will use shortly is
1: function greeting()
2: {
3: document.write("good morning");
4: }
On the first line the word function declares the following block, delimited by braces (lines 2 and 4), to be a function with the name greeting(). Inside the braces is the command to be executed when the function greeting() is called. There may be many commands between the braces. The function definition is contained between the <script> tags and is located inside the <head> tags. The function can be called from the program either by using its name or by clicking on a special button which calls the function. There can be several functions defined in a program.
Consider the following program:
1: <html>
2: <head>
3: <title>js14a0</title>
4:
5: <script language=javascript>
6: function greeting()
7: {
8: document.write("good morning to you"+"<br>");
9: }
10: </script>
11:
12: </head>
13: <body bgcolor=yellow text=black>
14: <h4><center>Example of a function I</center></h4>
15: <script language=javascript>
16: document.write("<h4>");
17: greeting();
18: greeting();
19: greeting();
20: greeting();
21: greeting();
22: document.write("</h4>");
23: </script>
24: </body>
25: </html>
Lines 6-9 give the definition of the function. Note that it is contained between the <script> tags. Lines 17-21 call the function 5 times by simply using its name, and each time its called line 8 is executed.
We make the previous program more interesting by passing a variable, i.e. a name, to the greeting.
1: <html>
2: <head>
3: <title>js14a1</title>
4:
5: <script language=javascript>
6: function greeting(aname)
7: {
8: document.write("Thats life "+aname+"<br>");
9: }
10: </script>
11:
12: </head>
13: <body bgcolor=yellow text=black>
14: <h4><center>Example of a function with a for loop</center></h4>
15: <script language=javascript>
16: document.write("<h4>");
17: var aname="pagliacci";
18: for(var i=1; i<=5; i++)
19: {
20: greeting(aname)
21: }
22: document.write("</h4>");
23: </script>
24: </body>
25: </html>
In the above program we modified the previous program in two ways. In line 17 we declare aname to be avariable and assign it the value "pagliacci". Lines 18-21 use a "for" loop to effect the lines 17-21 of the previous program. When the function "greetings()" is called in line 20 the variable aname is passed to the function by including it inside the parenthesis. The value of aname, namely "pagliacci", is then passed to line 8 of the function where its value is used.
A prompt dialog box can be used to enter a name into the greeting which is illustrated in the next program.
1: <html>
2: <head>
3: <title>js14a1b</title>
4: <script language=javascript>
5: function greeting(aname)
6: {
7: document.write("thats life "+aname+"<br>");
8: }
9: </script>
10: </head>
11: <body bgcolor=yellow text=black>
12: <h4><center> Example of a function with a prompt box</center></h4>
13: <script language=javascript>
14: document.write("<h4>");
15: var aname=prompt("Enter your name: ");
16: for(var i=1; i<=5; i++)
17: {
18: greeting(aname)
19: }
20: document.write("</h4>");
21:
22: </script>
23: </body>
24: </html>
A prompt dialog box in line 15 allows the user to enter a name which is assigned to the variable aname. In line 18 the variable aname is passed to the function "greeting()" and is then used in the execution of the function in line 7.
We next illustrate how a function can be called by clicking on a button located in a form.
1: <html>
2: <head>
3: <title>js14a2</title>
4: <script language=javascript>
5: function message()
6: {
7: alert("You clicked on the button again");
8: }
9: </script>
10: </head>
11: <body bgcolor=yellow text=black>
12: <h4><center>Click the button below to print the alert message on the screen.</center>
13: <form name=jack>
14: <input type=button value="Click for message" onClick="message()">
15: </form>
16: </h4>
17: </body>
18: </html>
The button in question is created by line 14. Please note its type and value. The operative part is onClick="message()". Note the use of quotation marks. When the user clicks on this button the function message() is called. This is an important feature of JavaScript.