Scribd
Upload
33 views

CSS Pract-8

Uploaded by

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

CSS Pract-8

Uploaded by

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

Practical No-8: Create web page to implement Form Events.

Part II

Code-1: Onload event

<html>

<head>

<script type="text/javascript">

function sayHello() {

alert("Hello World!")

</script>

</head>

<body>

<p>Click the button to see result</p>

<form>

<input type="button" onclick="sayHello()" value="Say Hello" />

</form>

</body>

</html>

Output:
Code-2:

<html>

<body>

<button id="btn">Click here</button>

<p id="para" onmouseover="mouseOver()" onmouseout="mouseOut()">Hover over this Text !</p>

<b id="output"></b>

<script>

var x = document.getElementById("btn");

x.addEventListener("click", btnClick);

function mouseOver() {

document.getElementById("output").innerHTML += "MouseOver Event" + "<br>";

function mouseOut() {

document.getElementById("output").innerHTML += "MouseOut Event" + "<br>";

function btnClick() {

document.getElementById("output").innerHTML += "Click Event" + "<br>";

</script>

</body>

</html>
Output:

Code-3:

<html>

<head>

<script>

function changeColor(color)

var panel = document.getElementById('panel')

document.body.style.backgroundColor = color

panel.innerHTML = "Background color is set to: " + color.toUpperCase()

</script>

</head>

<body onload="changeColor('red')">

<p>Select option to change background color of page</p>

<form name="myform">
<input type="radio" name="color" value="red" onchange="changeColor(this.value)"
checked="false">RED<br />

<input type="radio" name="color" value="green"


onchange="changeColor(this.value)">GREEN<br />

<input type="radio" name="color" value="blue" onchange="changeColor(this.value)">BLUE<br />

</form>

<p id="panel"></p>

</body>

</html>

Output:
Code-4:

You might also like