CHAPTER 3 : FORM AND EVENT HANDLING

3.1 Building blocks of form, properties and methods of form, button, text, textarea,
checkbox, radio button, select element.
Form is used by commercial websites to collect data. Form is created using HTML form elements such as
textbox, button, checkbox, textarea, etc. JavaScript is used to make a web page interactive. Specifically, for
data validation and for dynamically interacting with form elements, JavaScript is used.
Forms are used to collect information. Data entered into a form is sent to the web server for processing,
when user clicks a submit button. The program that processes the form is called a Common Gateway
Interface (CGI) program. These programs are written in programming language such as JSP. CGI programs
interact with non-web application such as database and other systems that process the form data. After
processing, CGI creates another web page dynamically and sends it to browser.

Building blocks of form:

1. Form : Forms are used to accept information from the user using a Graphical User Interface (GUI). Like
forms on paper, a form can be displayed on a web page to accept required information from the user. This
information can be submitted and stored in a database for further processing.
Tag: <form> … </form> : It is a paired tag used to create a form in HTML.

Attributes:
action= “ URL” : It specify name of the web page or destination where the information will be
transferred after submitting the form.
method= “get/post” : It specify how the information is transferred from form to its destination. In get
method information is passed as a part of URL whereas in post method information is not visible in URL
but sent directly to the destination.
Example: <form action=”page2.html” method=”post”> … </form>

2. Textbox : A text box is used to enter data. It is a single line input on a web page.
Tag : <input type=“text”> : It is used to display a text box on a web page.

Attributes of <input> tag used with text box:

name=“ text” : Specify name of text box for unique identification.
maxlength=number : Specify maximum number of characters that can be accepted in a textbox.
size=number : Specify the width of text box in number of characters.
value=“text” : Specify default text value that appears in the text box when loaded on a web page.
Example: <input type=“text” name=“n1” maxlength=20 size=15 value=“Enter your name” >

3. Password : A password box is used to enter data that appears in the form of special characters on a web
page inside box. Password box looks like a text box on a wab page.
Tag: <input type=“password”> : It is used to display a password box on a web page.

Attributes of <input> tag used with password box:

name=“ text” : Specify name of password box for unique identification.
maxlength=number : Specify maximum number of characters that can be accepted in a password box
size=number : Specify the width of password box in number of characters.
Example: <input type=“password” name=“p1” maxlength=20 size=15>
4. Textarea : It is used to display a textbox that allow user to enter multiple lines of text. Scrollbar is used
to move up and down as well as left and right if the contents are more than size of box.
Tag : <textarea> … </textarea> : It is used to display a multiline text box on a web page.

Attributes:
name=“ text” : Specify name of the element for unique identification.
cols=number : Specify width of the text area.
rows=number : Specify height of the text area.
readonly : Specify a text area as read only element.
Example: <textarea name=“t1” cols=10 rows=10>Enter your suggestions</textarea>

5. Checkbox : Checkbox elements are used to display multiple options from which user can select one or
more options. When a checkbox is selected by user, a tickmark ( √ ) symbol appears inside box.
Tag: <input type=“checkbox”> : It is used to display a checkbox on a web page.

Attributes of <input> tag used with checkbox:

name=“ text” : Specify name of checkbox for unique identification.
value=“text” : Specify value to be returned to the destination if that checkbox is checked.
Checked: Specify default selection.
Example: <input type=“checkbox” name=“c1” value=“pen”>pen

6. Radio / option button : Radio buttons are used to display multiple options from which user can select
only one option. When a radio button is selected by user, a dot symbol appears inside button. Multiple
option buttons are group together to allow user to select only one option from the group. A group can be
created by giving same name to all option buttons in that group.
Tag : <input type=“radio”> : It is used to display a radio button on a web page.

Attributes of <input> tag used with radio button:

name=“ text” : Specify name of radio button for unique identification.
value=“text” : Specify value to be returned to the destination if that radio button is selected.
checked: Specify default selection
Example: <input type=“radio” name=“r1” value=“male”>male
<input type=“radio” name=“r1” value=“female” checked>female

7. Select element : <select> … </select> : This tag is used to create a drop-down list box or scrolling list
box from which user can select one or more options.
Attributes:
name=“ text” : Specify name of the element for unique identification.
size=number : Specify number of options visible in a list box on a web page.
Multiple : Allow user to select multiple option with control key.

<option> … </option> tag is used to insert item in a list.

Attributes:
value=“text” : Specify value to be sent to the server once selected by user.
selected: Specify default selection.
Example: <select name=“s1” size=2>
<option value=“ Pizza”>Pizza</option>
<option value=“ Burger”>Burger</option>
<option value=“ Chocolate”>Chocolate</option>
</select>
8. Button : Buttons are used to display a command button which user can click on web page to perform
some action.
Tag : <input type=“button”> : It is used to display a button on a web page.

Attributes of <input> tag used with button:

name=“ text” : Specify name of button for unique identification.
value=“text” : Specify value to be displayed on button.
Example: <input type=“button” name=“b1” value=“login”>

9. Submit button : Submit button is used to display a command button which user can click on web page to
submit information entered in a form.
Tag : <input type=“submit”> : It is used to display a submit button on a web page.

Attributes of <input> tag used with submit button:

name=“ text” : Specify name of submit button for unique identification.
value=“text” : Specify value to be displayed on submit button.
Example: <input type=“submit” name=“s1” value=“Submit Form”>

10. Reset button : Reset button is used to clear all elements with their original state after user clicks on it.
Tag : <input type=“reset”> : It is used to display a reset button on a web page.

Attributes of <input> tag used with reset button:

name=“ text” : Specify name of reset button for unique identification
value=“text” : Specify value to be displayed on reset button.
Example: <input type=“reset” name=“r1” value=“Reset Form”>

Example : student registration form

<html><body>
<form action="example\page1.html" method="post">
Enter Name (In Capital) : <input type="text" name="t1" size="30" maxlength="25"><br><br>
Set your password : <input type="password" name="p1" size="15">
<br><br>Select gender :
<input type="radio" name="r1" checked> Male
<input type="radio" name="r1">Female
<br><br> Select your area of interest: <br><br>
&nbsp&nbsp&nbsp<input type="checkbox" name="c1" checked>Information Technology<br>
&nbsp&nbsp&nbsp<input type="checkbox" name="c2">Computer Engineering<br>
&nbsp&nbsp&nbsp <input type="checkbox" name="c3">Electrical Power Systems<br>
&nbsp&nbsp&nbsp <input type="checkbox" name="c4">Industrial Electronics<br>
&nbsp&nbsp&nbsp <input type="checkbox" name="c5">Instrumentation<br>
<br><br> Upload your photo : <input type="file" name="f1"><br><br>
<br><br> Select languages you know : <br><br>
<select name="s1" size="2" multiple>
<option value="English">English</option>
<option value="Marathi">Marathi</option>
<option value="Hindi">Hindi</option>
</select>
<br> <br>Give more information about you:<br> <textarea name="tx1" rows=10 cols=20></textarea>
<br><br><input type="reset" value="Reset Form">
&nbsp&nbsp&nbsp&nbsp<input type="submit" value="Submit Form">
</form>
</body></html>

Output:

3.2 form events: mouse events and key events

Many applications require that some information entered in a form be verified using a validation process.
Two common ways to validate information on a form are by using CGI programs and JavaScript. A CGI
program validates information after the form is submitted. A JavaScript can validate information whenever
one of the several events occur while the form is displayed on the screen.
Client side validation provides immediate feedback and reduces server load. This can be done using
JavaScript. JavaScript can dynamically change a form,while the form is displayed on the screen. For
example, a JavaScript can activate or deactivate elements based on a value the user enters into another
elements.
An event is an action performed by user. A JavaScript executes in response to an event that occurs while a
form is displayed on the screen. An event can be clicking on a button,selecting a radio button or moving the
cursor on an element or away from an element on a form. Browser also fires event when a page loads or
unloads. An event is associated with an element of a form as an attribute defined within the opening tag of
the element.
Events: It is an action by an user that causes something to happen or execute.
onload event : This event occurs when browser loads a web page / frames on the display. It is used with
opening body tag.
Example: <body onload=”function( ) ”></form>

onunload event : This event occurs when a browser removes a document from a window or frame. It is used
with opening body tag.
Example: <body onunload=”function( ) ”></form>

onsubmit event : This event occurs when a form is submitted on a web page. It is used with opening form
tag.
Example : <form onsubmit=”function( )”></form>

onreset event : This event executes when a form is reset. It is used with opening form tag.
Example : <form onreset=”function( )”></form>

onselect event : This event executes when a text is selected from a text field. It is used with form elements.
Example : <input type=”text” onselect=”function( )”>

onchange event : This event executes when an element looses input focus and the value of the elements has
changed. It is used with form elements.
Example : <input type=”text” onchange=”function( )”>

onfocus event : This event executes when an element receives focus ( when an event becomes active).
Example: <input type=”text” onfocus=”function( )”>

onblur event : This event executes when an element looses focus (when control passes from one element to
another element.
Example : <input type=”text” onblur=”function( )”>

Mouse events:
onclick event : This event occurs when a mouse button is click on or over a form element.
Example : <input type=”text” onclick=”function( )”>

ondblclick event : This event occurs when a mouse button is double click on or over a form element.
Example : <input type=”text” ondblclick=”function( )”>

onmousedown event : This event executes when a mouse button is clicked while cursor is over an element.
Example : <input type=”text” onmousedown=”function( )”>

onmouseup event : This event executes when a mouse button is released while the cursor is over an element.
Example : <input type=”text” onmouseup=”function( )”>

onmouseover event : This event executes when mouse cursor moves onto an element.
Example : <input type=”text” onmouseover=”function( )”>

onmousemove event : This event executes when mouse cursor is moved while over an element.
Example : <input type=”text” onmousemove=”function( )”>

onmouseout event : This event executes when mouse cursor is moved away from an element.
Example : <input type=”text” onmouseout=”function( )”>
Key events:
onkeypress event : This event executes when a key is pressed and released.
Example : <input type=”text” onkeypress=”function( )”>

onkeydown event : This event excutes when a key is hold down(pressed state).
Example : <input type=”text” onkeydown=”function( )”>

onkeyup event : This event executes when a key is released.

Example : <input typr=”text” onkeyup=”function( )”>

Javascript with event:

<html>
<head>
<script type=”text/javascript”>
function display( )
{
alert("Welcome to Javascript”);
}
</script>
</head>
<body>
<form onsubmit=”display()”>
<input type=”text”>
<input type=”submit”>
</form>
</head>
</html>

3.3 Form objects and events

Everything that is part of website is considered as an object. Window object is the first object of any website.
A window contains an HTML document that is known as document object. A document may contain one or
more form which in turn contains one or more elements. The forms are stored in an array called forms and
appear in the order in which the forms appear in the document.
Each form can be referenced with form’s index.
For example, window.document.forms[2];
The above statement tells the browser to go to the window object and then within the window object go to
the document object and then reference the form that is assigned ti the second index value of the forms array.

A form can also be referenced with its name.

For example, window.document.forms.order;
The above statement tells the browser to referenced the form named as order in forms array in document
object in window object.
Form elements are stored in an array called as elements object in order in which the elements appear on the
form.
For example, window.document.forms.order.email
In the above statement, email element(field) is referenced which is in order form.
With statement: It saves keystrokes (input value) when writing JavaScript. It is used when multiple
controls from the form has to be accessed for processing data. For example, if a form contains four textboxes
then using with statements all four can be accessed inside a Single function.
Example : with (window.document.forms.order)
{
alert("Email” + email.value);
}
In the above example, order is name of the form stored in the forms object. With statement allow accessing
all controls from order form. Email is one of the form element accessed in the example.

Example : with (window.document.forms.order.email)

{
alert(“Email:” + value);
}
In the above example, order form is referenced along with email form element. So only email field can be
accessed inside the function. No other form element can be accessed inside the function.
JavaScript code :
<html>
<head>
<script type="text/javascript">
function changecolor( )
{
with(window.document.forms.userentry)
{
fname.style.color="blue";
fname.style.background="red"
}
}
</script>
</head>
<body>
<form name="userentry">
<input type="text" name="fname" onblur="changecolor(this)">
<input type="text" name="lanme">
<input type="submit">
</form>
</head>
</html>
3.4 Changing attributes value dynamically:One
One can change an attribute of an element by assigning a new value to the attribute using JavaScript
function. When an appropriate event occurs a function is called and value of an attribute can change
dynamically at run time by executing function definition.

Example:
function highlight(element)
{
element.style.color=”blue”;
element.style.background=”Silver”;
}

In the above example, element represents a form control whose attribute values has to be changed
dynamically. Style property is used to change appearance of control.

Program:
<html> Output:
<head>
<script type="text/javascript"> Initial form:
function highlight(element)
{
element.style.color="blue";
element.style.background="silver";
}
</script>
</head>
<body>
<form name="userentry">
Enter First Name:<input type="text" name="fname" Change in attributes at run time:
value="abc" onchange="highlight(this)">
<br>Enter Last Name:<input type="text" name="lname"
value="xyz" onchange="highlight(this)">
<br>Email:<input type="text" name="email"
value="abc@xyz.com" onclick="highlight(this)">
<br><input type="submit" value="submit form">
<br><input type="reset" value="reset form">
</form>
</body>
</html>
In the above program, when user changes the contents of text box onchange event call highlight function.
This function is used to change attributes of text box dynamically. Background and text color are the
properties used in above program.

3.5 Changing option list dynamically:

An option list displays two or more items on a web page from which user can select one. Options in option
list are set when a list is created in HTML document but can be dynamically change using a JavaScript
function.
Example: - A form contains two radio buttons and one list control. Depending on selection of radio button
i.e. option, list control will display its items.
In the example below, list item are inserted through JavaScript function dynamically
<html> Output:
<head>
<script type="text/javascript">
function displayitem(evalue)
{
with(window.document.forms.userentry)
{
if(evalue==1)
{
optionlist[0].text="CSS"
optionlist[0].value=1
optionlist[1].text="OSY"
optionlist[1].value=2
optionlist[2].text="AJP" In the above output, semester 5 and semester
optionlist[2].value=3 6 are two option/radio buttons. Initially list
} box displays items for fifth semester. When
if(evalue==2) user click on semester 6 at run time ,
{ semester 6 subjects are displayed in list box.
optionlist[0].text="ETI" Similarly when user click on semester 5 at
optionlist[0].value=1 run time, list box again display semester 5
optionlist[1].text="MAD" subjects in list box. So clicking on either of
optionlist[1].value=2 the option button changes the contents of list
optionlist[2].text="MAN" box.
optionlist[2].value=3
}
}
}
</script>
</head>

<body>
<form name="userentry" method="post">
<p>
Select semester:
Semester 5<input type="radio" name="subjects"
value="1" onclick="displayitem(this.value)"
checked="true">
Semester 6<input type="radio" name="subjects"
value="2" onclick="displayitem(this.value)">
<br>Subject list: <br>
<select name="optionlist" size=3>
<option>CSS</option>
<option>OPS</option>
<option>AJP</option>
</select>
<input type="submit" value="Submit form"
onclick="feedback()">
<input type="reset" value="Reset form">
</form>
</body>
</html>

.
3.6 Evaluating checkbox selection:
Checkbox is used in the HTML form to allow user to select one or more items from a set of displayed items.
A JavaScript function is used to evaluate selection of checkbox and then process the application.

To display checkbox use <input> tag: <input type=”checkbox” name=”C1” value=”IF”>

To find whether it is checked / selected or not checked property is used. If checked is true then it is selected
otherwise not selected.
For example:
To display checkbox on web page:
<input type=”checkbox” name=”C1” value=”IF”> // displays a checkbox on web page

To check selection inside function:

if(C1.checked==true) // if checkbox is selected the checked property is set to true otherwise it is false.
alert(“checkbox is selected”):
else
alert(“checkbox is not selected”):

Program:
<html>
<head>
<script type="text/javascript">
function displayyear()
{
var text1=" You are in"
with(window.document.forms.userentry)
{
if(chk1.checked==true)
{
text1+="first"
}
if(chk2.checked==true)
{
text1+="second"
}
if(chk3.checked==true)
{
text1+="third"
}
disp.value=text1
}
}
</script>
</head>
<body>
<form name="userentry" method="post">
<p>
<input type="checkbox" name="chk1" value="First"> First Year<br>
<input type="checkbox" name="chk2" value="Second"> Second Year<br>
<input type="checkbox" name="chk3" value="Third"> Third Year<br>
<input type="text" name="disp" onfocus="displayyear()">
<input type="submit" >
</form>
</body>
</html>
3.7 changing a label dynamically:
A text/value displayed on button / element can be changed dynamically using JavaScript function.

Example : for example, when option list displays sem 5 subjects then course label placed on web page displays
semester five where as when it displays sem 6 subjects then course label displays semester six.

3.8 Manipulating form elements:

Some applications require manipulation of form fields before actually submitting it to CGI application. It
includes validation of entered information or addition data to the fields in which user has not entered any
data. This can be done using JavaScript function which executes when onclick event of submit button takes
place.

For example: form validation with onsubmit event in <form> tag.

3.9 Intrinsic JavaScript functions:

JavaScript has a special set of functions called as intrinsic functions that mimic actions of the submit button
and reset button of a form. Intrinsic function is used to replace the submit button and reset button with
graphical images which are displayed on a form in place of these buttons.
<img> tag is used to display image. With onclick event appropriate intrinsic function is called and executed.

Syntax :
For submit function : - javascript:document.forms.form_name.submit()
For reset function : - javascript:document.forms.form_name.reset()

Programs:
<html>
<head>
</head>
<body>
<form name="f1" action="page1.html">
Enter username: <input type="text" name="username"><br>
Enter password: <input type="text" name="pwd"><br><br>
<img src="s1.jpg" width="50" height="50" onclick="javascript:document.forms.f1.submit()">
<img src="s2.png" width="50" height="50" onclick="javascript:document.forms.f1.reset()">
</form>
</body>
</html>
The above program will display two text boxes and two images on a web page. First image will work as
submit button and second image will work as reset button.
Disabling elements:
Disabling elements means preventing an user from entering data into it. A disabled element is visible on
form but not in active state. User can not use it at run time. A JavaScript function can be used to enable or
disable elements on form at run time.
An element can be disabled or enabled by setting the value of disabled attribute. Initially all elements are
enabled but by setting disabled property to true , an element can be disabled.
For example,
<input type=”text” name=”email” disabled=”true”>
The above statement shows email field on web page but it will be disabled.

Program:
In the following program, initially email field is disables. When user enters first and last name then only
email field becomes enabled.

<html>
<head>
<script type="text/javascript">
function enableemail()
{
with(document.forms.userentry)
{
if(fname.value.length>0 && lname.value.length>0)
email.disabled=false;
email.focus();
}
}
</script>
</head>
<body>
<form name="userentry" method="post">
First Name: <input type="text" name="fname"><br>
Last Name: <input type="text" name="lname" onblur="enableemail()"><br>
Email:<input type="text" name="email" disabled="True">
<br><input type="submit" value="Submit"><br>
<input type="reset" value="Reset">
</form>
</body>
</html>
</form>
</body>
</html>

Output:
Read Only Element:
A JavaScript function can be used to make an element read only i.e. user can not change data from that field.
By using readonly attribute of an element, an element can be shown as readonly. If the read only attribute
value is set to true then no one can change the value of an element on web page.
Example:
<input type=”text” name=”email” readonly=”true”>

Program:
<html>
<head>
<script type="text/javascript">
function setemail()
{
with(document.forms.userentry)
{
if(fname.value.length>0 && lname.value.length>0)
{
email.value=fname.value.charAt(0)+lname.value+'@gmail.com';
}
}
}
</script>
</head>
<body>
<form name="userentry" method="post">
First Name: <input type="text" name="fname"><br>
Last Name: <input type="text" name="lname" onblur="setemail()"><br>
Email:<input type="text" name="email" disabled="True">
<br><input type="submit" value="Submit"><br>
<input type="reset" value="Reset">
</form>
</body>
</html>

Output: