Scribd
Upload
4 views24 pages

Unit 3

This document covers the basics of form and event handling in HTML, detailing various form components such as text fields, checkboxes, radio buttons, and buttons. It explains the properties and methods associated with forms, including how to structure forms using HTML tags and attributes. Additionally, it introduces form events and event handling in JavaScript, highlighting how user actions can trigger events that are managed through event handlers.

Uploaded by

Prajwal Urade
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views24 pages

Unit 3

This document covers the basics of form and event handling in HTML, detailing various form components such as text fields, checkboxes, radio buttons, and buttons. It explains the properties and methods associated with forms, including how to structure forms using HTML tags and attributes. Additionally, it introduces form events and event handling in JavaScript, highlighting how user actions can trigger events that are managed through event handlers.

Uploaded by

Prajwal Urade
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

Form & Event Handling

UNIT- III Form and Event Handling

3.1 Basics of a Form


Building Blocks of Form

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

3.1.2 Properties and Methods of Form


The commonly used properties and methods of the form are enlisted in the following table
Attribute Description
Action It specifies the url where the form should be submitted.
Method It specifies the HTTP methods such as GET,POST.
get Default.Appends the form data to the url in
name/value pairs:
URL?name=value&name=value
post Sends the form data as an HTTP post
transaction.
Name This attribute denotes the name of the form.
Target It specifies the target of the address in the action attribute the target values
can be as follows:
_blank Opens in new window.
_self Opens in the same frame as it was clicked(default)
_parent Opens in the parent frameset.
_top Opens in the full body of window
framename Opens in a named frame.

The form can be written in the <body >tag as follows


<body>
<form name=”myform” >
//Code for placing form controls here.
….
…
…
</form>
Mr.Vikas Ligade. Page 1
Form & Event Handling

</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

<input type="text" size="30" name ="username" value="”>

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>

Mr.Vikas Ligade. Page 2


Form & Event Handling

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>

3.1.4 Text Area:


Textfield is a form component which allows us to enter single line text,what if we want to have multiple line text?Then you must use
textarea component.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<form>
Enter the Desired text here
<textarea cols="10" name="Myname">
</textarea>
</form>
</body>
</html>

Mr.Vikas Ligade. Page 3


Form & Event Handling

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>

Mr.Vikas Ligade. Page 4


Form & Event Handling

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.

3.1.5 Radio Button


This form component is also use to indicate the selection from several choices.
Using input type="radio" we can place radio button on the web page.
This component allows us to make only one selection at a time.
We can create a group of some radio button component.
Following HTML document displays the radio buttons for two different groups.
<!DOCTYPE html>
<html>
<head>
<title>My form with Radio buttons Page</title>
</head>
<body>
<form name="myform">
<div align="left"><br>
<body>Select Fruit which you like the most</b></br>
<input type="radio" name="group1" value="Mango">Mango</br>
<input type="radio" name="group1" value="Apple" checked>Apple</br>
<input type="radio" name="group1" value="Grapes">Grapes</br>
</br> </br> </br>
<b>Select Flower which you like the most</b></br>
<input type="radio" name="group2" value="Rose">Rose</br>
<input type="radio" name="group2" value="Lotus">Lotus</br>
<input type="radio" name="group2" value="Jasmine" checked>Jasmine</br>
</div>
</form>
</body>
</html>

Mr.Vikas Ligade. Page 5


Form & Event Handling

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

1) name denotes the name of the submit button.


2) value is for writing some text on the text on the button.
3) align specifies alignment of the button.
<!DOCTYPE html>
<html>
<head>
<title>My page</title>
</head>
<body>
<form name="myform" action="http://www.localhost.com./cgi-bin/hello.cgi" method="POST">
<div align="center">
</br> </br>
<input type="text" size="35" value=" ">
<br><input type="Submit" value="Send">
<input type="Reset" value="Reset">
</div>
</form>
</body>

Mr.Vikas Ligade. Page 6


Form & Event Handling

</html>

3.1.8 Select Element


HTML allows us to have pop down menu on the web page so that the desired selection can be made.
The parameter select is for the menu component and option parameter is for setting the values to the options of drop down menu.
We can make some specific option selected by selected value =.
In the following HTML document we have created one drop down menu in which various fruits are
enlisted. By default "Banana" is set as selected.
<!DOCTYPE html>
<html>
<head>
<title>My page</title>
</head>
<body>
<form name="myform">
<div align="center">
<select name="My_Menu">
<option value="Mango">Mango</option>
<option value="Strawberry">Strawberry</option>
<option value="Banana">Banana</option>
<option value="Apple">Apple</option>
<option value="Guava">Guava</option>
</select>
</div>
</body>
</html>

More Examples on Form Design:

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>

Mr.Vikas Ligade. Page 7


Form & Event Handling

<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>

Mr.Vikas Ligade. Page 8


Form & Event Handling

Ex 3.1.4:Write a form to collect details of user


<!DOCTYPE html>
<html>
<head>
<title>My page</title>
</head>
<body>
<form>
<b>Name:</b><input type="text" size="20" value=""><br/>
<b>Adress:</b><input type="text" size="35" value=""><br/>
<b>Subjects:</b><br/>
<inuput type="radio" name="authors" value="Web Programming">Web Programming<br/>
<inuput type="radio" name="authors" value="Computer Network">Computer Network<br/>
<inuput type="radio" name="authors" value="Software Engineering">Software Engineering<br/>
<inuput type="radio" name="authors" value="Client Side Scripting">Client Side Scripting<br/>
<b>Select favorite Author:</b>
<select name="MyMenu">
<option value="AAA">Akshay</option>
<option value="BBB">Swap</option>
<option value="CCC">Shriram</option>
<option value="DDD">Vikas</option>
</select>
</br>
<b>Comments/Sujjestions:</b></br>
<textarea cols="30" rows="10" name="comments">
</textarea>
</br></br>
<input type="Submit" value="Submit"/>
<input type="Reset" value="Clear"/>
</form></body></html>

Mr.Vikas Ligade. Page 9


Form & Event Handling

Ex3.1.5 Registration of Student


<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<form>
<b>Student Name:</b><input type="text" size="20" value=""<br/><br/><br/>
<b>Address:</b><input type="text" size="35" value=""<br/><br/><br/>
<b>Email:</b><input type="text" size="20" value=""<br/><br/><br/>
<b>Password:</b><input type="password" size="10" value=""<br/><br/><br/>
<input type="radio" name="courses" value="CO">Computer Engineering<br/><br/>
<input type="radio" name="courses" value="E&TC">E&TC Engineering<br/><br/>
<input type="radio" name="courses" value="MECH">Mechanical Engineering<br/><br/>
<input type="radio" name="courses" value="CE">Civil Engineering<br/><br/>
<b>Select Payment Mode:</b>
<select name="Myname">
<option value="Cheque">Cheque</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
</select>
<br/><br/><br/>
<input type="submit" value="Submit">
<input type="reset" value="Reset">

Mr.Vikas Ligade. Page 10


Form & Event Handling

</form></body></html>

Ex3.1.6 Write a form to create login form\


<html>
<head>
<title>LOGIN FORM DEMO</title>
</head>
<body bgcolor="Khaki">
<center>
<h2>Login Form</h2>
</center>
<form name="form1">
<table>
<tr>
<td><b>Name:</b></td>
<td><input type="text" name="Username">
</tr>
<tr>
<td><b>Password:</b></td>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit"</td>
<td><input type="reset" name="reset" value="Reset"</td>
</tr>
</table>
</form></body></html>

Mr.Vikas Ligade. Page 11


Form & Event Handling

3.2 Form Events


Event is an activity that represents a change in the environment. For example mouse clicks, pressirng a particular key of keyboard
represent the events.
A JavaScript event is an action that can be detected by JavaScript. Many of them are initiated by user
actions but some are generated by the browser itself. We say then that an event is triggered and then it can be caught by
JavaScript functions, which then do something in response.
Event handler is a script that gets executed in response to these events. Thus event handler enables
the web document to respond the user activities through the browser window.

Events are specified in lowercase letters and these are case-sensitive.


Events Intrinsic event Meaning Associated tags
attribute
blur onblur Losing the focus <button><input><a><textarea><se
lect>
change onchange On occurance of some change <input><textarea><select>
click onclick When user clicks the mouse button <a><input>
dblclick ondblclick When user clicks the mouse button <a><input><button>
focus onfocus When the user acquires the input <input><textarea><select><a>
focus
keyup onkeyup When user releases the key from <input><textarea><select><a>
the keyboard
keydown onkeydown When user presses the key down <input><textarea><select><a>
keypress onkeypress When user presses the key <input><textarea><select><a>
mousedown onmousedown When user clicks the left mouse Form elements
button.
mouseup onmouseup When user releases the left mouse Form elements
button.
mousemove onmousemove When user moves the mousse Form elements
mouseout onmouseout When user moves the mouse away Form elements
from the element
mouseover onmouseover When user moves the mouse away Form element
over some element
load onload After getting document loaded <body>
reset onreset When the reset button is clicked <body>
submit onsubmit When the submit button is clicked <form>
select onselect On selection <input><textarea>
unload onunload When user exists the document <body>
Example of Event Handling:
<!DOCTYPE html>
<html>
<head>
<title>Demo of onload Tag Attribute</title>
<script type="text/JavaScript">

Mr.Vikas Ligade. Page 12


Form & Event Handling

function my_fun()
{
alert("Welcome");
}
</script>
</head>
<body onload="my_fun()">
</body>
</html>

3.2.1 Mouse Event

Event Event Handler Description


Performed

click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse comes over the element

mouseout onmouseout When the cursor of the mouse leaves an element

mousedown onmousedown When the mouse button is pressed over the element

mouseup onmouseup When the mouse button is released over the element

mousemove onmousemove When the mouse movement takes place.

<!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>

Mr.Vikas Ligade. Page 14


Form & Event Handling

3.2.2 Key Event:


The keyboard events are the events that occur when the user interacts using the keyboard.Various types of keyboard event are
enlisted in the following table-

Event Performed Event Handler Description

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>

3.3 Form Objects and Elements

Mr.Vikas Ligade. Page 15


Form & Event Handling

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>

Script Explanation : In above JavaScript,

(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);
}
}

3.4 Changing Attribute Value Dynamically

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

Following is an example of changing the attribute value dynamically. In this example we a


changing the background color of the text box as the user enters some data in it.
<!DOCTYPE html>
<html>
<head>
<script type="Text/JavaScript">
function ChangeMe(Element)
{
Element.style.background='pink'
}
</script>
</head>
<body>
<form name="myform">
Enter RollNo:<input type="text" name="roll" onchange="ChangeMe(this)"/>
<br/><br/>
Enter Name:<input type="text" name="name" onchange="ChangeMe(this)"/>
<br/>
<input type="submit" value="Submit"/>
</form></body></html>

3.5 Changing Option List Dynamically


Option list represents the list of one or more than one items which can be chosen by the user. In a web application, it is a common
practice to change the contents of the optiorn list base on some category chosen.

Mr.Vikas Ligade. Page 17


Form & Event Handling

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

Mr.Vikas Ligade. Page 18


Form & Event Handling

<br/><br/>
<select name="choices">
<option value=1>Mango
<option value=2>Orange
<option value=3>Banana
</select></form></body></html>

3.6 Evaluating Check Box Selection

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>

Mr.Vikas Ligade. Page 19


Form & Event Handling

<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>

3.7 Changing a Label Dynamically


We can change the label of any form element dynamically. The same element can be used for multiple purpose by simply
changing the label.
For example - Following is a JavaScript in which we are just changing the label of the "reset" button.
Hence same button can be used for "Fruit" list display or "Flower" list display. The options of the
List box also get changed accordingly.
<html>
<head>
<script type="text/JavaScript">
function MySelection(val)
{
with(document.forms.myform)
{
if(val=="Fruit")
{
Button_Label.value="Flower"
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=="Flower")
{
Button_Label.value="Fruit"
choices[0].text="Mango"
choices[0].value=1
choices[1].text="Orange"

Mr.Vikas Ligade. Page 20


Form & Event Handling

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>

3.8 Manipulating Form Elements

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>

Mr.Vikas Ligade. Page 21


Form & Event Handling

<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>

3.9 Intrinsic Functlons, Disabling Elements and Read-only Elements

3.9.1 Intrinsic Functions


Intrinsic functions means the built in functions that are provided by JavaScript.
The javaScript provides the intrinsic functions for Submit or Reset button. One can use these
functionalities while submitting the form or resetting the form fields.
The submit() method of the form object can be used to send the form to the server in exactly same
way as if the user has pressed the Submit button.
<!DOCTYPE html>
<html>
<body>
<form name="myform">
Roll Number:<input type="text" name="roll"/>
<br/><br/>
Name:<input type="text" name="name"/>
<br/><br/>
<img src="C:\Users\VIkas\Desktop\CSS\submit.jpg" onclick="javascript:document.forms.myform.submit()"/>
<br/><br/>
</form></body></html>

Mr.Vikas Ligade. Page 22


Form & Event Handling

3. 9.2 Disabling Elements

We can restrict some fields on the form by using disabled.


disabled property of particular form element is set to true then user can not edit that element
Similarly on setting disabled property to false we can edit the field.
<!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript">
function EnableFunction()
{
document.forms.myform.name1.disabled=false
}
function DisableFunction()
{
document.forms.myform.name1.disabled=true
}
</script>
</head>
<body>
<form name="myform">
User name:<input type="text" name="name1"/>
<br/><br/>
<input type="button" value="Disable Name Field" onclick="DisableFunction()"/>
<br/><br/>
<input type="button" value="Enable Name Field" onclick="EnableFunction()"/>
</form></body></html>

3.9.3 Read-only Elements


Sometimes we need to set some value to a field which user should not change. 1
changing the value of particular field we make that element read-only by setting readonly=true

Mr.Vikas Ligade. Page 23


Form & Event Handling

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>

Mr.Vikas Ligade. Page 24

You might also like