Practical No 8 : Create web page to implement form Event.
part II
<!DOCTYPE html>
<html>
<head>
<title>Experiment 8</title>
<style>
body
background-image: url('slider-left-dec.png');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
margin: 0;
padding: 0;
.container
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
.eventOutput
background-color: #f4f4f4;
padding: 20px;
margin: 20px;
border: 1px solid #ccc;
border-radius: 5px;
label
{
display: block;
font-weight: bold;
margin-bottom: 5px;
#submit, #reset
width: 20%;
padding: 6px;
margin: 8px;
background-color: black;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
#colorBox
widh: 600px;
height: 180px;
background-color: black;
transition: background-color 1s ease;
</style>
</head>
<body onload="onLoad()">
<h1 style="color: white;"><center>FORM EVENTS PART-II</center></h1></div>
<div class="container">
<div class="eventOutput">
<h3 style="margin: 0;">KEYPRESS EVENT</h3><br>
<label for="text">Type something:</label>
<input type="text" id="textInput" onkeypress="onKeyPress()">
<p id="output"></p>
</div>
<div class="eventOutput">
<h3 style="margin: 0;">KEYUP & KEYDOWN EVENT</h3><br>
<input type="text" id="textInput" onkeyup="onKeyUp(event)"
onkeydown="onKeyDown(event)">
<p id="keyOutput"></p>
</div>
<div class="eventOutput">
<h3 style="margin: 0;">CHANGE EVENT</h3><br>
<label for="colorSelect">Select a color:</label>
<select id="mySelect" onchange="onChange()">
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
</select>
<p id="demo"></p>
</div>
<div class="eventOutput">
<h3 style="margin: 0;">FOCUS & BLUR EVENT</h3><br>
<label for="name">Enter your name:</label>
<input type="text" id="myInput" onfocus="onFocus()" onblur="onBlur()">
</div>
<div class="eventOutput" >
<h3 style="margin: 0;">SELECT EVENT</h3><br>
<label for="textArea">Text Area:</label>
<div style="flex-direction: column; align-items: center;">
<textarea id="textArea" rows="4" cols="40" onmouseup="onSelect()">Select some
text in this textarea.</textarea>
</div>
<p><b>Selected text: </b><span id="selectedText"></span></p>
</div>
<div class="eventOutput">
<h3 style="margin: 0;">SUBMIT & RESET EVENT</h3><br>
<form id="myForm" onsubmit="return onSubmit();" onreset="onReset();">
<h3 style="margin: 0;">Submit a Form</h3><br>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" id="submit" value="Submit" style="margin: 0;">
<input type="reset" id="reset" value="Reset" style="margin: 0;">
</form>
</div>
</div>
<center>
<div class="eventOutput">
<h3 style="margin: 0;">ONLOAD & ONUNLOAD EVENT</h3><br>
<div id="colorBox"></div>
</div>
</center>
<script type="text/javascript">
function onLoad()
const colorBox = document.getElementById('colorBox');
colorBox.style.backgroundColor = '#676767';
function onUnLoad(event)
const confirmationMessage = "You have unsaved changes. Are you sure you want to leave
this page?";
(event || window.event).returnValue = confirmationMessage;
return confirmationMessage;
window.onbeforeunload = onUnLoad;
function onKeyPress()
var inputText = document.getElementById("textInput").value;
document.getElementById("output").innerHTML = "<strong>You typed: </strong>" +
inputText;
function onKeyUp(event)
var key = event.key;
document.getElementById("keyOutput").innerHTML = "<strong>Key Up: </strong>"
+ key;
function onKeyDown(event)
var key = event.key;
document.getElementById("keyOutput").innerHTML = "<strong>Key Down: </strong>
" + key;
function onChange()
let x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
function onSelect()
const textArea = document.getElementById('textArea');
const selectedTextSpan = document.getElementById('selectedText');
const selectedText = window.getSelection().toString;
selectedTextSpan.textContent = selectedText;
function onFocus()
document.getElementById("myInput").style.background = "#BEBEBE";
function onBlur()
document.getElementById("myInput").style.background = "#676767";
function onSubmit()
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
if (nameInput.value.trim() === '' || emailInput.value.trim() === '')
alert('Please fill in all the required fields.');
return false;
alert('Form submitted successfully!');
return false;
function onReset()
alert("Form has been reset!");
</script>
</body>
</html>
