Unit 3
Unit 3
Form is a typical layout on the web page by which a user can interact with the web page.
Typical component of forms are text, text area, checkboxes, radio buttons and push buttons. These
components of form are also called as form controls or controls.
HTML allows us to place these form components on the web page and send the desired information
to the destination server.
All these form contents appear in the <form> tag. The form has an attribute action which gets
executed when user clicks a button on the form.
Uses of Form
Forms are used in following manner
(1) Forms are used to collect the information from customer or students for online registrations
(2) Forms are used for online survey.
(3) Forms are used for conducting online examination, for getting feedbacks and so on.
(4) The information present in the form is submitted to the server for further processing
</body>
EX:-
<!DOCTYPE html>
<html>
<head>
<title>My Text Demo</title>
</head>
<body>
<form>
<b>Input String:</b><input type="text"size="15" value="Client">
</form>
</body>
</html>
3.1.3 Text
Text is typically required to place one line text. For example if you want to enter some name then lt is always preferred to have Text
field on the form.
The text field can be set using
The input type is text and the value of this text field is" " That means the blank text field is displayed
initially and we can enter the text of our choice into it. There is size parameter which allows us to
enter some size of the text field.
Some other parameters or attributes can be
“maxlength” that allows us to enter the text of some maximum length.
“name” indicates name of the text field.
“align” denotes the alignment of the text in the text field. The alignment can be left, right, bottom
and top.
<!DOCTYPE html>
<html>
<head>
<title>My Text Demo</title>
</head>
<body>
<form>
<b>Input String:</b><input type="text"size="15" value="Client">
</form>
</body>
</html>
In above document
1) We have the label "Input String" just before the input> tag. We can also specify the label by
the <labels tag as follows -
<label> Input String: <br/> <input type="text" size="25" value="></label>>
Thus the label gets bound to the text box. This aspect is always beneficial for a web program
because using label control we can focus on the corresponding text box contents.
3) Initially the text box field is blank. We can type some text inside this text box.
Example 3.1.1
How will you create password field in a HTML form
Solution:
<form name=”form1”>
Password:<input type=”password”/>
</form>
Various parameters that can be set for the text area can be
“row” denotes total number of rows in the text area.
“col” specifies total number of columns in the text area.
“name”notes the name of the text area which can be utilised for handling that component for some
Specific purpose.
“wrap” Can be virtual or physical. If the wrap is virtual then the line breaks get disappeared when the text is actually submitted to
the server. But if the wrap is assigned to the physical then the line breaks (if any) appear as it is in the text.
3.1.5 Checkbox
lt is the simplest component which is used particularly when we want to make some selection from
several options.
For having the checkbox we have to specify the input type as checkbox. For example
<input type="checkbox" name="option1" value="mango" checked="checked"> Mango <br/>
If we want to get the checkbox displayed as checked then set checked="checked"
<!DOCTYPE html>
<html>
<head>
<title>My form with check box</title>
</head>
<body>
<form name="checkboxForm">
<div align="center"><br>
Select the fruit(s) of your choice</br>
<input type="checkbox" name="option1" value="Mango">Mango</br>
<input type="checkbox" name="option2" value="Apple">Apple</br>
<input type="checkbox" name="option3" value="Guava">Guava</br>
</div>
</form>
</body>
</html>
Script Explanation
1) In the above program to set some checkbox in checked state we can mention the attribute checked as checked.
2) We can set the value attribute as " " but this then the checkbox will not get associated with any
The Mango, Apple and Guava are the labels of the checkboxes.
Ex. 3.1.2: What is the difference between group of checkbox buttons and group of radio buttons.
Sol. : The checkbox and radio buttons are used for making the selection from a group of choices.
When a user selects (checks) a checkbox, its value gets assigned as the current value of the checkbox
group's control name.
Checkgroup's control name may get paired with several current values if the user selects more
than one checkbox.
Radio buttons work just like checkboxes except they are typically set up to be mutually exclusive or
one another, i.e. when one is selected, all the others are automatically deselected.
3.1.7 Button
We can create the button using input type ="button"> tag.
There are two types of buttons that can be created in HTML. One is called submit button and the
another one is reset button.
Various parameters of submit button are
</html>
1.3: Create a HTML document that has the form with the following controis
a) A text box to collect the customer name.
b) Four checkboxes, one for the following items:
i. Four HTML textbooks for 1000
ii. Four Javabeans books for 2500
c)A collection of radio buttons that are labelled as follows -
iCash ii. Cheque/DD iii. Creadit card.
ii. Eight XML textbooks for 2000
iv. Eight UML textbooks for 1500
<!DOCTYPE html>
<html>
<head>
<title><h2>REGISTRATION FORM</h2></title>
</hr>
<form>
<table>
<tr>
<td>Name:</td>
<td><input type="text" size="25" value=""></td>
</tr>
<tr>
<td>Select the desired Items:</td>
<td>
<input type="checkbox" name="option1" value="HTML" CHECKED="CHECKED">HTML</BR>
<input type="checkbox" name="option2" value="XML">XML</BR>
<input type="checkbox" name="option2" value="Javabeans">JavaBeans</BR>
<input type="checkbox" name="option2" value="UML">UML</BR>
</td>
</tr>
<td>
Mode of Payment:
</td>
</tr>
<tr>
<td><input type="radio" name="group1" value="Cash">Cash</td>
</tr>
<tr>
<td><input type="radio" name="group1" value="Cheque/DD">Cheque/DD</td>
</tr>
<tr>
<td><input type="radio" name="group1" value="Credit Card">Credit Card</td>
</tr>
<tr></tr> <tr></tr> <tr></tr>
<td><input type="Submit" value="Submit"></td>
<td><input type="Reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>
</form></body></html>
function my_fun()
{
alert("Welcome");
}
</script>
</head>
<body onload="my_fun()">
</body>
</html>
mouseover onmouseover When the cursor of the mouse comes over the element
mousedown onmousedown When the mouse button is pressed over the element
mouseup onmouseup When the mouse button is released over the element
<!DOCTYPE html>
<html>
<head>
<title>Demo of onclick Tag Attribute</title>
<script type="text/JavaScript">
function my_fun()
{
alert("Hello I am Akshay");
}
</script>
Mr.Vikas Ligade. Page 13
Form & Event Handling
</head>
<body>
<center>
<form>
<input type="button" value="Click" onclick="my_fun()">
</form>
</center>
</body>
</html>
Ex 3.2.1 Insert an Image into web page.write a script which displays the message when the mouse is over the image.The co-
ordinates of the mouse should be displayed if attempted on the image.
<html>
<head>
<script type="text/JavaScript">
function my_fun1()
{
points.innerText="Now the mouse is moving";
}
function my_fun2()
{
points.innerText="("+event.offsetX+","+event.offsetY+")";
}
</script>
</head>
<body onmousemove="my_fun1()"onmousedown="my_fun2()">
<center>
<span id="points">(10,20)</span>
<img src="E:\spc.jpg" style="position:absolute;top:50;left:90">
</center></body></html>
Keydown & Keyup onkeydown & onkeyup When the user press and then release the key
<!DOCTYPE html>
<html>
<head>
<script type="Text/JavaScript">
function MyKeyfunction()
{
alert("You have pressed the key");
}
</script>
</head>
<body>
<form>
Enter Name:<input type="text"onkeypress="MyKeyfunction()"/>
</form>
</body>
</html>
Website Contains various objects. The very first object which we see is window.
The window object contains the HTML document which is called as document object. This document
object has several important functionalities. Out of which, the most commonly used functionality is
write0 method. We can display any message on Web page using following statement document.write("Hello, How are you?");
Note that one can omit the use of window. That means instead of writing window.document.write if
we write document.write then it is perfectly allowed.
A form is placed on document. The form objects are stored in the array called forms. They appearin
the order in which the forms appear in the document.
Each form can be refereed by using the index of the forms array. For example- suppose we want to
refer second form then we write
document.form.form1
A form can be referred by its name. For instance if a form has a name form1 then we can refer this
form as document.forms.form1
JavaScript Example : Following is a program in which we can refer the form element text and display
<!DOCTYPE html>
<html>
<head>
<script type="Text/JavaScript">
function Myfunction()
{
alert("You have entered the name:"+document.forms.myform.username.value+" "+document.forms.myform.username1.value);
}
</script>
</head>
<body>
<form name="myform">
Enter Name:<input type="text" name="username"/>
<input type="text" name="username1"/>
<input type="button" value="Click Me"onclick="Myfunction()"/>
</form></body></html>
(1)we have created a form within <body> </body> section. On this form there are two elements-text
field and a button.
(2) The text field has a name 'username.
(3) On the button click, we triggered an event onclick and this event can be handled using the function named Myfunction.
Mr.Vikas Ligade. Page 16
Form & Event Handling
(4) The Myfunction is defined in the <head> </head> section. This furnction refers to the text field value by the statement
(5) Using the alert popup box the text typed within the textbox will be displayea
We can modity the above given Myfunction as follows for efficient use
function Myfunction()
{
with(document.forms.myfom.username)
{
alert("You have entered the name: "+value);
}
}
It is possible to change the attributes of the form elements dynamically. That means during form
feeling process itself, the color or font of the text field can be changed. This dynamic change helps th
user to notify the importance changes in the form fields
That means JavaScript allows to change the items present in the list dynamically. Following example
illustrate this idea
Ex. 3.5.1 : Write a JavaScript to create three categories - Fruit, Flower and Colour. Based on the selection of category, the items in
the option list must get changed.
Write a javascript to create three categories -Fruit,Flower and colour based on the selection of category,the items in the option list
must be changed
<html>
<head>
<script type="text/JavaScript">
function MySelection(val)
{
with(document.forms.myform)
{
if(val==1)
{
choices[0].text="Mango"
choices[0].value=1
choices[1].text="Orange"
choices[1].value=2
choices[2].text="Banana"
choices[2].value=3
}
if(val==2)
{
choices[0].text="Rose"
choices[0].value=1
choices[1].text="Jasmine"
choices[1].value=2
choices[2].text="Lotus"
choices[2].value=3
}
if(val==3)
{
choices[0].text="Red"
choices[0].value=1
choices[1].text="Green"
choices[1].value=2
choices[2].text="Blue"
choices[2].value=3
}}}
</script></head><body>
<h4>Select the Desired Catagory</h4>
<form name="myform">
<input type="radio" name="items" checked="true" value=1 onclick=MySelection(this.value)>Fruit
<input type="radio" name="items" value=2 onclick=MySelection(this.value)>Flower
<input type="radio" name="items" value=3 onclick=MySelection(this.value)>Color
<br/><br/>
<select name="choices">
<option value=1>Mango
<option value=2>Orange
<option value=3>Banana
</select></form></body></html>
Evaluating checkbox selection is a simple technique using which we can display the names of check
boxes that are selected.
Following JavaScript illustrates this concept.
<!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript">
function MyFunction()
{
var str="You have selected: ";
with(document.forms.myform)
{
if(red.checked==true)
str="Red";
if(blue.checked==true)
str=",Blue";
if(green.checked==true)
str=",Green";
if(yellow.checked==true)
str=",Yellow";
}
alert(str);
}
</script>
</head>
<body>
<h3>Select color(s) of your choice:</h3>
<form name="myform">
<input type="checkbox" name="red" value="red"> Red<br/>
<input type="checkbox" name="blue" value="blue"> Blue<br/>
<input type="checkbox" name="green" value="green"> Green<br/>
<input type="checkbox" name="yellow" value="yellow"> Yellow<br/>
<input type="button" name="Color" value="Choose Color"onclick="MyFunction()">
</form>
</body>
</html>
choices[1].value=2
choices[2].text="Banana"
choices[2].value=3
}
}
}
</script>
</head>
<body>
<h4>Select the Desired Catagory</h4>
<form name="myform">
<select name="choices">
<option Value=1> Mango
<option Value=2> Orange
<option Value=3> Banana
</select>
<input type="reset" name="Button_Label" value="Fruit" onclick="MySelection(this.value)"/>
<br/><br/></form></body></html>
we can manipulate the form elements before submitting it to web server. For that purpose we can
keep some of the fields hidden and at the time of submitting the form, the desired value can be set to the hidden field so that the
assigned value for hidden field can be submitted.
Following example shows that the user enters roll number and name. The registration id for the
student can be formed by taking first two characters of 'name' followed by the roll number. Initially
the registration id field is kept hidden and at the time of submitting the form this value is assigned to
the registration field.
<!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript">
function MyFunction()
{
with(document.forms.myform)
{
if(name.value.length>0&&roll.value.length>0)
rigid.value=name.value.charAt(0)+name.value.charAt(1)+roll.value
}
}
</script></head>
<body>
<form name="myform">
Roll Number:<input type="text" name="roll"/>
<br/><br/>
Name:<input type="text" name="name"/>
<br/><br/>
Reg.ID:<input type="hidden" name="rigid"/>
<br/><br/>
<input type="Submit" name="Submit" value="Submit" onclick="MyFunction()"/>
</form></body></html>
If the read-only attribute is set to false, then anyone, including the user entering information into the form, can change the value of
the element.
<!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript">
function ReadOnlyFunction()
{
document.forms.myform.name1.readOnly=true
}
</script>
</head>
<body>
<form name="myform">
User Name:<input type="text" name="name1"/>
<br/><br/>
<input type="button" value="ReadOnly Name Field" onclick="ReadOnlyFunction()"/>
</form></body></html>