Extended intrinsic events (onload, onunload, onfocus, onblur, onsubmit, onreset, onselect, onchange)

Intrinsic events are meant to increase interactivity with the users of a site. They may not be directly analyzed by HTML but they rather have to be parsed by a client based or server based script (JavaScript, PHP, ASP).

These events may be applied to selected elements only. In combination with the scripting they can send important information to the server, modify the web page content or layout on the go and do many other interesting and useful things.

Related elements:

onload attribute:

BODY, FRAMESET

onunload attribute:

BODY, FRAMESET

onfocus attribute:

A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA

onblur attribute:

A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA

onsubmit attribute:

FORM

onreset attribute:

FORM

onselect attribute:

INPUT, TEXTAREA

onchange attribute:

INPUT, SELECT, TEXTAREA

Attribute characteristics and purpose:

onload attribute:

event occurs when the browser finishes loading a window or all frames inside a frameset

onunload attribute:

event occurs when the browser removes a document from a window or frame

onfocus attribute:

event occurs when an element receives focus by the pointing device or by tabbing navigation

onblur attribute:

event occurs when an element looses focus by the pointing device or by tabbing navigation

onsubmit attribute:

event occurs when a form is submitted

onreset attribute:

event occurs when a form is reset

onselect attribute:

event occurs when a user selects some text in a text field

onchange attribute:

event occurs when a control loses the input focus and its value has been modified after gaining focus

Example

HTML extended intrinsic events attributes:

<html>

<head>
<title>HTML tutorial</title>
<style type="text/css">
form {
	width:60%;
	margin:0px 15%;
	border:2px inset #454;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
select {
	padding:2px; margin:2px;
	border:1px solid black;
}
</style>
<script type="text/javascript">
function loadPage() {
	alert("Page loaded!");
}
function submitForm() {
	alert("Form submitted!");
}
function blurMenu() {
	alert("Option chosen!");
}
function changeText() {
	alert("Thanks for comment!");
}
</script>
</head> 

<body onload="loadPage()">

<h5>The example includes body 'onload', select 'onblur', input 'onchange' and form 'onsubmit' events:</h5>

<form action="" method="post" onsubmit="submitForm()">
<label for="sel">Choose an option:</label>
<select name="sel" id="sel" size="2" onblur="blurMenu()">
	<option>sky is blue</option>
	<option>sky is red</option>
	<option>sky is yellow</option>
	<option>sky is black and yellow</option>
</select><br />
<label for="id">Add a comment:</label>
<input type="text" name="inp" id="inp" onchange="changeText()" /><br />
<input type="submit" value="send" />
</form>

</body>

</html>

›› go to examples ››

Extended intrinsic events (onload, onunload, onfocus, onblur, onsubmit, onreset, onselect, onchange)

Related elements:

Attribute characteristics and purpose:

Example

HTML extended intrinsic events attributes:

Comments

About

Contact

Get Connected