Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
3 views

Java_script Unit 3

This document provides an overview of HTML forms and event handling, detailing the components, attributes, and methods associated with forms. It explains the differences between GET and POST methods, outlines various form controls such as buttons, textboxes, and checkboxes, and includes example programs for creating forms. Additionally, it discusses form events and how to handle them using JavaScript.

Uploaded by

chikyabhai319
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Java_script Unit 3

This document provides an overview of HTML forms and event handling, detailing the components, attributes, and methods associated with forms. It explains the differences between GET and POST methods, outlines various form controls such as buttons, textboxes, and checkboxes, and includes example programs for creating forms. Additionally, it discusses form events and how to handle them using JavaScript.

Uploaded by

chikyabhai319
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

*********UNIT 3- Form and Event Handling*********

Building Blocks of Form:


Forms:
 Form is an HTML Element which is used to accept user input.
 Forms are used to create interactive elements on a web page, such as
contact forms or login forms.
 They allow users to input information, like their name or email address,
and submit it to the server for processing.
 Forms consist of different components like input fields, checkboxes, radio
buttons, dropdown menus, and submit buttons.
 It is used for online survery, conducting online examination, for accepting
feedbacks, to collect information from customers or students for online
registrations.
 Form is used for development of dynamic web applications where user
enters the input and based on that input, the server sends the response to
the client.

Attributes / Properties of Form:


1] action – It specifies the URL where the form data should be submitted.

2] method – It specifies the HTTP methods such as GET, POST when

submitting the form data to the server.

3] name – It specifies the unique name for the form.

4] target – It specifies the target of address in action attribute. The values

can be _blank, _parent, _self, _top.

Form Methods :
1] reset() – It is used to reset a form.

2] submit() – It is used to submit the form data to the server.

Syntax of Form:

<form name=" " method=" " action=" " target=" ">

Form Controls

</form>

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 1


GET V/s POST Method :

GET Method POST Method

GET method is less secured. POST method is more secure.

GET method sends information by POST method transfers information


appending to page request. via HTTP header.

The Form information/data is visible The Form information/data is not


in URL. visible in URL.

It sends information via Form URL. It sends information via Form body.

Limited amount of information can Unlimited amount of information can


be sent. It is less than 1500 be sent.
characters.

It helps to send non-sensitive data. It helps to send sensitive data


(Non-private data) (password, documents, images).

The parameters remain in browser Parameters are not saved in browser


history. history.

It is possible to bookmark the page. It is not possible to bookmark the


page.

The request can be cached. The request cannot be cached.

Only ASCII characters are allowed. No restrictions. Binary data is also


allowed.

Form Controls Common Properties / Attributes:


It is applicable to all the controls of the Form

1] Name: Identifies an element for data processing.

2] ID: Uniquely identifies an element for styling or interaction.

3] Value: Sets the initial value of the input field.

4] Type: Determines the type of input field.

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 2


HTML Form Controls :
The HTML Form element defines a form which contains form controls that
are used to collect user input.

Form controls are :

1] Button Control –
 It is a clickable controls.
 It performs an action when it’s clicked.
 Attributes :-
Disabled, onclick, autofocus.
 Tag :-

<input type="button">

Program:
<!DOCTYPE html>
<html>
<head>
<title> Button Demo </title>
</head>

<body>
<form name="form1" id="fid">
<input type="button" value="submit" name="submit">
</form>
</body>
</html>

This will produce the following result:

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 3


2] Textbox Control –
 It is used to take single line input from the user.
 It is an editable control which is used to accept user input.
 Attributes :-

size,min,max,readonly,required,maxlength,placeholder,disabled.
 Tag :-

<input type="text">

Program:
<!DOCTYPE html>
<html>
<head>
<title> Textbox Demo </title>
</head>

<body>
<form name="form1" id="fid">
Enter Your Name :
<input type="text" name="tf1" id="tid1">
<br><br>
<input type="button" value="submit" name="submit">
</form>
</body>
</html>

This will produce the following result:

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 4


3] TextArea Control –
 It is used to take multi-line input from the user.
 It is an editable control which is used to accept multiple lines of user
input.
 Attributes :-

rows, cols, size,readonly,required ,placeholder,disabled .


 Tag :-

<textarea> ………… </textarea>

Program:
<!DOCTYPE html>
<html>
<head>
<title> TextArea Demo </title>
</head>
<body>
<form name="form1" id="fid">
Enter Your Feedback :
<br>
<textarea name="ta1" rows="5" cols="50"></textarea>
<br><br>
<input type="submit" value="Submit" name="submit">
</form>
</body>
</html>

This will produce the following result:

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 5


4] Password Control –
 It is used to take display text as a password character.
 It is used to enter the data that appears in the form of special characters
on webpage inside box. It looks like textbox on webpage.
 Attributes :-

minlength, maxlength, required.


 Tag :-

<input type="password">

Program:
<!DOCTYPE html>
<html>
<head>
<title>Password Demo</title>
</head>
<body>
<form name="form1" id="fid">

Enter Password:
<input type="password" name="password" id="password" minlength="8"
maxlength="20" required>
<br><br>
<input type="submit" value="Submit" name="submit">

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

This will produce the following result:

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 6


Creating Login Form

Program:
<!DOCTYPE html>
<html>
<head>
<title> Login Form Demo </title>
</head>
<body>
<form name="loginForm" id="loginForm">

<h1>Login Form </h1>


Username:
<input type="text" id="username" name="username" required>
<br><br>
Password:
<input type="password" id="password" name="password" required>
<br><br>
Feedback:
<br>
<textarea id="feedback" name="feedback" rows="5" cols="30"></textarea>
<br><br>
<input type="button" value="Login" name="loginButton" onclick="submitForm()">
</form>
</body>
</html>

This will produce the following result:

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 7


5] Checkbox Control –
 It is used to display multiple options from which user can select one or
more options.
 Here user can select multiple options.
 Attributes :-

checked, disabled, required, onclick.


 Tag :-

<input type="checkbox">

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 8


Program:

<!DOCTYPE html>
<html>
<head>
<title> Checkbox Demo </title>
</head>
<body>
<form name="form1" id="fid">

Select Your Hobbies :


<input type="checkbox" name="c1" value="Cricket"> Cricket
<input type="checkbox" name="c2" value="Teaching"> Teaching
<input type="checkbox" name="c3" value="Singing"> Singing
<input type="checkbox" name="c4" value="Dancing"> Dancing

<br><br>
<input type="submit" name="b1" value="Submit">
</form>
</body>
</html>

This will produce the following result:

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 9


6] RadioButton Control –
 It is used to display multiple options from which user can select only one
option.
 Here user can select only one options.
 Attributes :-

checked, disabled, required, onclick.


 Tag :-

<input type="radio">

Program:
<!DOCTYPE html>
<html>
<head>
<title> RadioButton Demo </title>
</head>
<body>
<form name="form1" id="fid">
Select Your Gender :
<input type="radio" name="r1" value="Male"> Male
<input type="radio" name="r1" value="Female"> Female
<input type="radio" name="r1" value="Other"> Other
<br><br>
<input type="submit" name="b1" value="Submit">
</form>
</body>
</html>

This will produce the following result:

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 10


7] Date Control –
 It is used to take input of date from the user.
 Attributes :-

Min, max, readOnly, disabled, required.


 Tag :-

<input type="date">

Program:
<!DOCTYPE html>
<html>
<head>
<title> Date Demo </title>
</head>
<body>
<form name="form1" id="fid">
Select Your Date of Birth :
<input type="date" name="date1" value="d1">
<br><Br>
<input type="submit" name="s1" value="Submit">
</form>
</body>
</html>

This will produce the following result:

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 11


8] Select Element (List / Combobox/ Listbox) –
 It is used to create a drop-down listbox or scrolling listbox from which
user can select one ore more options.
 Attributes :-

Multiple ,autofocus, disabled, required, name, size


Multiple -> You can select multiple items at a time.

Size -> It is used to display Size no. of elements on screen.


 Tag :-

<select> ….. </select>

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

Program:
<!DOCTYPE html>
<html>
<head>
<title> Date Demo </title>
</head>
<body>
<form name="form1" id="fid">
Select Your Favorite Languages :
<br>
<select name="languages" multiple size="3">
<option value="C"> C </option>
<option value="C++"> C++ </option>
<option value="Java"> Java </option>
<option value="Python"> Python </option>
<option value="JavaScript"> JavaScript </option>
</select>
<br><br>
<input type="submit" name="s1" value="Submit">
</form>
</body>

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 12


</html>

This will produce the following result:

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 13


Form Objects and Elements :

Program (By using document.forms.formName):


<html>
<body>
<script language="javascript" type="text/javascript">
function myFun() {
var name = document.forms.form1.tf1.value;
alert("Your name is "+name);
}
</script>
<form name="form1" id="fid">
Enter Your Name :
<input type="text" name="tf1" id="tid1" >
<br><br>
<input type="button" name="Submit" onclick="myFun()" value="Submit">

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

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 14


This will produce the following result:

 In the above script, we have created a form within <body> section. On


the form there are two elements textbox and button.
 The textbox has the name – tf1
 On button click we triggered an event onclick and this event can be
handled using the function myFun()

Program (By using document.getElementById)


<html>
<body>
<script language="javascript" type="text/javascript">

function myFun() {
var name = document.getElementById('tid1').value;
alert("Your name is "+name);
}

</script>

<form name="form1" id="fid">

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 15


Enter Your Name :
<input type="text" name="tf1" id="tid1" >
<br><br>
<input type="button" name="Submit" onclick="myFun()" value="Submit">

</form>

</body>

</html>

This will produce the following result:

 In the above script, we have created a form within <body> section. On


the form there are two elements textbox and button.
 The textbox has the id – tid1
 On button click we triggered an event onclick and this event can be
handled using the function myFun()

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 16


Form Events :

 Event is an activity that represents the change in the environment.


Example mouse clicks, pressing the key of keyboard represents the
events.
 A JavaScript event is an action that can be detected by the javascript.
 Most of the events are caused by the user, and some are generated by
the browser itself.

Form Events are:

Program (onChange and onSelect):


<html>
<body>
<form name="form1" onchange="OnChange()" onselect="OnSelect()">
<input type="text" name="tf1" value="t1" autofocus>
</form>
<script language="javascript" type="text/javascript">
function OnChange() {
alert("Form Value has Changed");
}
function OnSelect() {
alert("Form Text has Selected");
}
</script>
</body></html>

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 17


This will produce the following result:

Program (onBlur and onFocus):


<html>
<body>
<form name="form1">
<input type="text" name="tf1" value="t1">
</form>

< script language="javascript" type="text/javascript">


function onBlur() {
alert("Form has lost focus");
}

function onFocus() {
alert("Form is in focus");
}

// Get a reference to the input element


var inputElement = document.forms["form1"].elements["tf1"];

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 18


// Attach event handlers
inputElement.onblur = onBlur;
inputElement.onfocus = onFocus;
</script>
</body>
</html>

This will produce the following result:

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 19


Mouse Events are:

Program:
<html>
<form name="form1">
<input type="button" name="b1" value="Click Me" onmouseup="MouseUp()"
onmousedown="MouseDown()" onmouseover="MouseOver()" onmouseout="MouseOut()"
oncontextmenu="OnContextMenu()">

<input type="text" name="tf1">


</form>
<script language="javascript" type="text/javascript">
function MouseUp() {
document.forms.form1.tf1.value="MouseUp Event";
}
function MouseDown() {
document.forms.form1.tf1.value="MouseDown Event";
}
function MouseOver() {
document.forms.form1.tf1.value="MouseOver Event";
}

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 20


function MouseOut() {
document.forms.form1.tf1.value="MouseOut Event";
}
function OnContextMenu() {
document.forms.form1.tf1.value="OnContextMenu Event";
}
</script>
</html>

This will produce the following result:

Key Events are:

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 21


Program:
<html>
<body>
<form name="form1" id="fid">
<input type="button" value = "Click Me " onkeypress="onPress()" onkeydown="onDown()"
onkeyup="onUp()">
<input type="text" name = "tf1" value="t1">

</form>
<script language="javascript" type="text/javascript">
function onPress()
{
document.forms.form1.tf1.value="Key is Pressed";
}
function onDown()
{
document.forms.form1.tf1.value-"Key is Down";
}
function onUp()
{
document.forms.form1.tf1.value="Key is Up";
}
</script>
</body>
</html>

This will produce the following result:

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 22


Types of Button
There are three types of button

1] Simple button (It is used to perform some action)


2] Submit button (It is used to submit the form data to the server)
3] Reset button (It is used to reset the form data)

Program:
<html>
<body>
<form name="form1" id="fid"> <center>
<h1> Login Form </h1>
<h3>Username :
<input type="text" name="tf1" id="t1">
<br> <br>
Password :
<input type="text" name="tf2" id="t2" >
<br> <br> <br>
<input type="submit" value="Submit" onclick="submitForm()">
<input type="reset" value="Reset" onclick="resetForm()">
</form>
<script language="javascript" type="text/javascript">
function submitForm() {
alert("Form data is submitted");
}
function resetForm() {
alert("Form data is Reset");
}

</script>
</body>
</html>

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 23


Creating Login Form:

Program:
<html>
<body>
<form> <center>
<h1> <label> Login Form </label> </h1>
<h3><label> Username : </label>
<input type="text" name="tf1" placeholder="Enter Username">
<br> <br>
<label> Password : </label>
<input type="text" name="tf2" placeholder="Enter Password">
<br> <br><br>
<input type="button" name="b1" value="LOGIN" onclick="login()">
</form>

<script language="javascript" type="text/javascript">


function login() {
alert("Login Sucessfully!!!!");
}
</script>
</body>
</html>

This will produce the following result:

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 24


Creating Calculator

Program:
<html>
<body>
<form name="form1">
<center>
<h1> Calculator </h1>
Enter First Number :
<input type="text" name="tf1" id="t1">
<br><Br>

Enter Second Number :


<input type="text" name="tf2" id="t2">
<Br><Br><Br>

<input type="button" name="b1" value="Add" onclick="Addition()" >


<input type="button" name="b2" value="Sub" onclick="Substraction()">
<input type="button" name="b3" value="Mul" onclick="Multiplication()">
<input type="button" name="b4" value="Div" onclick="Division()">
<Br><br>
<input type="reset" value="Reset" onclick="ResetFun()">
</center>
</form>

<script language="javascript" type="text/javascript">


function Addition() {
var a = document.forms.form1.tf1.value;
var b = document.forms.form1.tf2.value;
var c = parseInt(a)+parseInt(b);
alert("Addition = "+c);
}

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 25


function Multiplication() {
var a = document.getElementById('t1').value;
var b = document.getElementById('t2').value;
var c = parseInt(a) * parseInt(b);
alert("Multiplication = "+c);
}
function Division() {
var a = document.forms.form1.tf1.value;
var b = document.forms.form1.tf2.value;
var c = parseInt(a)/parseInt(b);
alert("Division = "+c);
}
function Substraction() {
var a = document.getElementById('t1').value;
var b = document.getElementById('t2').value;
var c = parseInt(a) - parseInt(b);
alert("Substraction = "+c);
}
function ResetFun() {
alert("Form data is Reset");
}

</script>
</body>
</html>

This will produce the following result:

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 26


Changing Attribute Value Dynamically –
 We can change the attribute value dynamically.
 We can change an attribute by assigning a new value to the attribute in
JavaScript function and that function can be called when an appropriate
event will occur.
 For eg. If the element is loaded with default value at the time of page
load, then the values can be changed at runtime and we can notify the
user the importance of alteration in form element values.

Program:
<html>
<body>
<script language="javascript" type="text/javascript">
function ChangeValue() {

document.forms.form1.tf1.style.backgroundColor="red";
document.forms.form1.tf1.style.color="blue";

</script>
<form name="form1" id="id1">
<input type="text" name="tf1" onkeypress="ChangeValue()">

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

This will produce the following result:

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 27


After Typing in the Textbox

Changing Label Dynamically –


 We can change the Label dynamically by using JavaScript function to
achieve the reusability of element.
 In below example, we created two textboxes and one button to enable or
disable the textbox.
 In below program, we are changing the label of button dynamically and
performing the action based on label with the textbox.

Program:
<html>
<body>
<form name="form1" id="fid">
Enter Your Name : <input type="text" name="tf1" id="tid1" >

<br><br>
<input type="button" name="b1" value="Disable" onclick="ChangeState()">
</form>

<script language="javascript" type="text/javascript">


with(document.forms.form1) {
function ChangeState() {
if(b1.value=="Disable") {
b1.value="Enable";
tf1.disabled=true;
}

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 28


else {
tf1.disabled=false;
b1.value="Disable";
}
}
}

</script>
</body>
</html>

This will produce the following result:

After clicking on disable button, its label will get changed and textbox will be
disabled.

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 29


Changing OptionList Dynamically –
 In JavaScript we can change the values at runtime according to the choice
or input from the user.
 OptionList is used to show the list of items to the user, where user can
select one or more element.
 We can change the OptionList by using JavaScript function.

Program:
<html>
<body>
<form name="form1" id="fid">

<input type="radio" name="items" value=1


onclick=MySelection(this.value)>Fruit
<input type="radio" name="items" value=2 onclick=MySelection(this.value)
checked>Flower
<input type="radio" name="items" value=3
onclick=MySelection(this.value)>Colour
<br>

<select name="choices" id="Flowers"size="3">


<option value="1" name="c1">Rose</option>
<option value="2" name="c2">Jasmine</option>
<option value="3" name="c3">Lotus</option>
<option value="4" name="c4"> Mogra </option>

</select>

</form>

<script language="javascript" type="text/javascript">

function MySelection(val)

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 30


{
with(document.forms.form1)
{
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
choices[3].text="Apple"
choices[3].value=4
}
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
choices[3].text="Mogra"
choices[3].value=4
}
if(val==3)
{
choices[0].text="Red"
choices[0].value=1
choices[1].text="Green"
choices[1].value=2
choices[2].text="Blue"

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 31


choices[2].value=3
choices[3].text="Pink"
choices[3].value=4
}

}
}
</script>
</body>
</html>

This will produce the following result:

After clicking on other radio button, then OptionList will get changed.

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 32


Evaluating Checkbox Selection –
 Checkbox is used to select one or more items from the given set of
choices.
 We can use a JavaScript function to evaluate whether checkbox is
selected or not and we can process the result as per the need of
application.

Program:
<html>
<body>
<script language="javascript" type="text/javascript">

function Evaluate() {
with(document.forms.form1) {
var hobbies="Your Hobbies are : ";
if(c1.checked)
hobbies+=" Cricket";
if(c2.checked)
hobbies+=" Dancing";
if(c3.checked)
hobbies+=" Reading";
if(c4.checked)
hobbies+=" Walking";

if(hobbies=="Your Hobbies are : ")


alert("You have not Selected any Hobby");
else
alert(hobbies);
}
}

</script>

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 33


<form name="form1" id="id1">
Select Your Hobbies:
<input type="checkbox" name="c1" value="Cricket" > Cricket
<input type="checkbox" name="c2" value="Dancing" > Dancing
<input type="checkbox" name="c3" value="Reading" > Reading
<input type="checkbox" name="c4" value="Walking" > Walking
<br>
<br>
<input type="submit" name="s1" value="Submit" onclick="Evaluate()">

</form>

</body>
</html>

This will produce the following result:

If you don’t select any checkbox.

If you have selected any of the checkbox

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 34


Manipulating Form Elements –
 Sometimes its mandatory to manipulate form events after button click or
before form is being submitted to CGI application or server.
 To validate whether each field on the form is filled with data or not using
JavaScript function and we can call such functions on events like
onsubmit, onclick.
 In below example, we are generating password by taking input of
username from the user and then placing the password in 2 nd textbox,
thereby changing the form elements.

Program:
<html>
<body>
<form name="form1" id="fid">
Enter Your Name : <input type="text" name="tf1" id="id1" >
<br>
Generated Password : <input type="text" name="tf2" id="id2" disabled = true>
<br>
<input type="button" value="Generate" name="b1" id="bid"
onclick="GeneratePassword()" >

</form>

<script language="javascript" type="text/javascript">


with(document.forms.form1)
{
function GeneratePassword()
{
tf2.value = "!@#("+tf1.value+")#@!";
}
}
</script>
</body>
</html>

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 35


This will produce the following result:

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 36


Intrinsic JavaScript functions –
 Intrinsic functions means the built-in functions that are provided by the
JavaScript.
 JavaScript provides the intrinsic functions for Submit and Reset button.
One can use these functionalities while submitting the form or resetting
the form fields.
 Intrinsic functions are used to replace the submit and reset buttons with
some other images.

Program:
<html>
<body>
<script language="javascript" type="text/javascript">

</script>
<form name="form1" id="id1">
Enter Username :
<input type="text" name="tf1">
<br>
Enter Password :
<input type="password" name="tf2";
<br><br>
<img src="login.jpg" onclick="javascript:document.forms.form1.submit(alert('form
Data Submitted'))" width="40" height="20">
<img src="reset.jpg" onclick="javascript:document.forms.form1.reset(alert('form
Data reseted'))" width="40" height="20">

</form>

</body>

</html>

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 37


This will produce the following result:

Disabling Elements –
 We can restrict some fields on the form by using disabled.
 If disabled property of the form element is set to true, then the user
cannot edit that element.

Program:
<html>
<body>
<form name="form1" id="fid">
Enter Your Name : <input type="text" name="tf1" id="tid1" >

<br><br>
<input type="button" name="b1" value="Disable" onclick="ChangeState()">
</form>

<script language="javascript" type="text/javascript">


with(document.forms.form1) {
function ChangeState() {

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 38


if(b1.value=="Disable") {
b1.value="Enable";
tf1.disabled=true;
}
else {
tf1.disabled=false;
b1.value="Disable";
}
}
}

</script>
</body>
</html>

This will produce the following result:

After clicking on disable button, its label will get changed and textbox will be
disabled.

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 39


Read-Only Elements –
 In JavaScript we can restrict the user from changing the value of an
element by setting its readOnly property to true.
 If we want user to enter the value in that element then we can set its
readOnly property to false.
 It is possible to change the value of readOnly attribute from within your
javascript function.

Program:
<html>
<head>
<script language="javascript" type="text/javascript">
function makeReadOnly() {
document.getElementById('t1').readOnly=true;
}
function removeReadOnly() {
document.getElementById('t1').readOnly=false;
}
</script>
</head>

<body>
<form name="form1" id="fid">
Enter Your Name : <input type="text" name="tf1" id="t1">
<br><br>
<input type="button" name="btn" value="Read Only" id="b1" onclick="makeReadOnly()">
<input type="button" name="btn1" value="Read & Write" id="b2" onclick="removeReadOnly()">

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

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 40


This will produce the following result:

 BY LAXMIKANT MAHINDRAKAR (MAHINDRATECH COACHING) - +91 8767369115 41

You might also like