Scribd
Upload
3 views

Css Exp 7 PDF Updated Tuesday

Uploaded by

ansari.abdullahsohel
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
3 views

Css Exp 7 PDF Updated Tuesday

Uploaded by

ansari.abdullahsohel
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/ 5

Name: Ansari Abdullah Roll no: 220402

Sub: Client-Side Scripting (CSS) Branch: CO

Experiment No. 7: Create a webpage to implement Form events-Part 1


▪ Write a program to use all form events

CODE:
<html>
<head>
<title>Form Events</title>
<script>
function myButton_onmouseup()
{ document.form1.myButton.value = "Mouse Goes Up"
}
function myButton_onmouseover()
{ document.form1.myButton.value = "Mouse over"
}
function myButton_onmouseout()
{ document.form1.myButton.value = "Mouse out"
}
function myButton_onmousedown()
{ document.form1.myButton.value = "Mouse Goes Down"
}
function on_select()
{
alert("Text was selected");
}
function c1()
{
alert("On change fired");
}
function kd()
{
document.form1.btn.value="Key down";}
function kp()
{
document.form1.btn.value="Key pressed";}
function ku(){
document.form1.btn.value="Key up";}
</script></head>
<body>
<form name="form1">
Mouse events:<br><input type="button" name="myButton" value="Mouse Goes Up"
onmouseup="myButton_onmouseup()"
onmousedown="myButton_onmousedown()"
onmousemove="myButton_onmousemove()"
onmouseover="myButton_onmouseover()"
onmouseout="myButton_onmouseout()"/><br><br>
Text box events:<br><input type="text" name="t1" value="Hi"
onselect="on_select()" onchange="c1()"/><br><br>
Key events:<br><input type="text" name="b1" value="Hello" onkeydown="kd()"
onkeypress="kp()" onkeyup="ku()"/> <br>
<input type="button" name="btn" value="Key up"/><br>
<hr>220402-Ansari Abdullah
</form></body>
</html>

OUTPUT:
▪ Write a program to create multiple forms in a single web page.
CODE:
<html>
<head>
<title>HTML Form</title>
<script>
function f1()
{
var l = document.forms.length;
var m;
for (m = 0; m<l; m++)
{
alert(document.forms[m].name);
}
}
</script>
</head>
<body onload="f1()">
<form name="form1">
<p>This is inside form1</p>
</form>
<form name="form2">
<p>This is inside form2</p>
</form>
<form name="form3">
<p>This is inside form3</p>
</form>
</body>
</html>

OUTPUT:
▪ Write a program to change attribute value dynamically

CODE:
<html>
<head><title>Changing attributes dynamically</title></head>
<body><form name="form1">
<input type="button" id="button1" value="Hello"><br>
<script>
var b=document.getElementById("button1");
var a=prompt("Enter attribute name");
var v=prompt("Enter attribute value");
b.setAttribute(a,v);
var c=prompt("Enter attribute whose value you want to view ");
document.write("<br>After setting the attribute: "+b.getAttribute(c));
document.write("<br>Checking the attribute: "+b.hasAttribute(c));
b.removeAttribute(c);
document.write("<br>After remove: "+b.hasAttribute(c));
</script></form>
</body>
</html>

OUTPUT:

You might also like