Scribd
Upload
41 views

Css Practical No 7

Uploaded by

masterhackeryt3
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
41 views

Css Practical No 7

Uploaded by

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

Practical No.7: Create a webpage to implement Form Events. Part-I.

Introduction:
An event is something that happens when user interact with the web page, such as when he clicked
a link or button, entered text into an input box or textarea, made selection in a select box, pressed
key on the keyboard, moved the mouse pointer, submits a form, etc. In some cases, the Browser itself
can trigger the events, such as the page load and unload events.
When an event occur, you can use a JavaScript event handler (or an event listener) to detect them
and perform specific task or set of tasks. By convention, the names for event handlers always begin
with the word "on", so an event handler for the click event is called onclick, similarly an event
handler for the load event is called onload, event handler for the blur event is called onblur, and so
on.

What is Form Event?


● Event is an activity that represent a change in the environment.
● A JavaScript event is an action that can be detected by JavaScript.
● Many of them are initiated by user action but the browser generates some.
● Event is triggered & then it can be caught by JavaScript functions, which then do
something response.
● Event handler is a script that are executed in response to these events. Event handler enables
the web documents to respond the user activities through the browser window.
● Event are specified in lowercase & these are case sensitive.

Form Event:
A form event is fired when a form control receive or loses focus or when the user modify a form
control value such as by typing text in a text input, select any option in a select box etc. Here're
some most important form events and their event handler.
1. The Focus Event (onfocus)
The focus event occurs when the user gives focus to an element on a web page. You
can handle the focus event with the onfocus event handler.
2. The Blur Event (onblur)
The blur event occurs when the user takes the focus away from a form element or a window. You
can handle the blur event with the onblur event handler.
3. The Change Event (onchange)
The change event occurs when a user changes the value of a form element.
You can handle the change event with the onchange event handler.
4. The Submit Event (onsubmit)
The submit event only occurs when the user submits a form on a web page. You
can handle the submit event with the onsubmit event handler.
Document/Window Events:
Events are also triggered in situations when the page has loaded or when user resize the
browser window, etc. Here're some most important document/window events and their event
handler.
1. The Load Event (onload)
The load event occurs when a web page has finished loading in the web browser. You
can handle the load event with the onload event handler.
2. The Unload Event (onunload)
The unload event occurs when a user leaves the current web page. You
can handle the unload event with the onunload event handler.
3. The Resize Event (onresize)
The resize event occurs when a user resizes the browser window. The resize event also occurs in
situations when the browser window is minimized or maximized.
You can handle the resize event with the onresize event handler.

.Programs on Various event handler.


1)JavaScript on onload event handler:
<!DOCTYPE html>
<html>
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</body>
</html>

OUTPUT
2)JavaScript on onclick event handler.
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time
is?</button>
<p id="demo"></p>
</body>
</html>

OUTPUT

3)JavaScript on onblur event handler.


<!DOCTYPE html>
<html>
<body>
Enter your name: <input type="text" id="fname" onblur="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the input text to
upper case.</p>
<script>
function myFunction()
{
var x = document.getElementById("fname"); x.value
= x.value.toUpperCase();
}
</script>
</body>
</html>
OUTPUT

4)JavaScript on onblur & onfocus event handler.

<!DOCTYPE html>
<html>
<body>
<p>When you enter the input field (child of FORM), a function is triggered
which sets the background color to yellow. When you leave the input field, a
function is triggered which removes the background color.</p>
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction,
true); x.addEventListener("blur",
myBlurFunction, true); function
myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
</body>
</html>
OUTPUT
Conclusion: We understand that how to create a webpage using form events.

You might also like