Example
<html><body>
<form action="">
User name:<br>
<input type="text" name="userid"><br>
User password:<br>
<input type="password" name="psw"><br>
<input type="submit" value="Submit"><br>
<input type="reset"><br>
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other">Other<br>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<input type="checkbox" name="vehicle2" value="Car"> I have a car <br>
</form>
</body></html>
Examples
Click Events:-
1. onclick Event
<html>
<head>
<script type = "text/javascript">
function sayHello()
{
alert("Hello World")
}
</script>
</head>
<body>
<form><input type = "button" onclick = "sayHello()" value = "Say
Hello" />
</form>
</body>
</html>
[Link] event
<html>
<head>
<script>
functionmyFunction() {
[Link]("demo").innerHTML = "Hello World";
}
</script>
</head>
<body>
<p ondblclick="myFunction()">
Doubleclick this paragraph to trigger a function.</p>
<p id="demo"></p>
</body>
</html>
Mouse Events:-
[Link]&onmouseout event
<!DOCTYPE html>
<html>
<body>
<h1 onmouseover="[Link]='red'"
onmouseout="[Link]='black'">Mouse over this text</h1>
</body>
</html>
[Link]&onmousedown event
<html>
<head>
<script>
functionmyFunction(elmnt, clr)
{ [Link] = clr;
}
</script>
</head>
<body>
<p onmousedown="myFunction(this,'red')"
onmouseup="myFunction(this,'green')">
hi how r u?
</p>
</body>
</html>
Load Events:-
[Link] event
<html>
<head>
<script>
functionmyFunction() {
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h2>Hello World!</h2>
</body>
</html>
[Link] event
<html>
<head>
<script>
functionmyFunction()
{
alert("Thank you for visiting My page!");
}
</script>
</head>
<body onunload="myFunction()">
</body>
</html>
Key Events
[Link] event
<html>
<head>
<script>
functionmyFunction() {
alert("You pressed a key inside the input field");
}
</script>
</head>
<body>
<input type="text" onkeypress="myFunction()">
</body>
</html>
[Link] event
<html>
<head>
<script>
functionmyFunction() {
var x = [Link]("fname");
[Link] = [Link]();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname"
onkeyup="myFunction()">
</body>
</html>
[Link] event
<html>
<head>
<script>
functionmyFunction() {
alert("You pressed a key inside the input field");
}
</script>
</head>
<body>
<input type="text" onkeydown="myFunction()">
</body>
</html>
Other Events
[Link] event
<html>
<head>
<script>
functionmyFunction() {
var x = [Link]("fname");
[Link] = [Link]();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname"
onchange="myFunction()">
</body>
</html>
[Link] event
<html>
<head>
<script>
functionmyFunction()
{
[Link]("selected some text");
}
</script>
</head>
<body>
Some text: <input type="text" value="Hello world!"
onselect="myFunction()">
</body>
</html>
[Link] event
<html>
<head>
<script>
functionmyFunction(x)
{
[Link] = "yellow";
}
</script>
</head>
<body>
Enter your name: <input type="text" onfocus="myFunction(this)">
</body>
</html>
[Link] event
<html>
<head>
<script>
functionmyFunction()
{
var x = [Link]("fname");
[Link] = [Link]();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname"
onblur="myFunction()">
</body>
</html>
[Link] event
<html>
<head>
<script>
function message() {
alert("This alert box was triggered by the onreset event handler");
}
</script>
</head>
<body>
<form onreset="message()">
Enter your name: <input type="text" size="20">
<input type="reset">
</form>
</body>
</html>
[Link] event
<html>
<head>
<script>
functionconfirmInput()
{
fname = [Link][0].[Link];
alert("Hello " + fname + "! You will now be redirected to My Page");
}
</script>
</head>
<body>
<form onsubmit="confirmInput()" action="[Link]
Enter your name: <input id="fname" type="text" size="20">
<input type="submit">
</form>
</body>
</html>
JavaScript Example
<!DOCTYPE html>
<html>
<body>
<form name=”myform”>
Roll Number:<input type=”text” name=”roll”/>
<br/> <br/>
Name :<input type=”text” name=”name”/>
<br/><br/>
<img src =”[Link]”
onlclik=”javascript:[Link]()”/>
<br/><br/>
</form>
</body>
</html>
For Example
<!DOCTYPE html>
<html>
<head>
<script type =”text/javascript”>
Function EnableFunction()
{
[Link]=false
}
Function DisableFunction()
{
[Link]=true
}
</script>
</head>
<body>
<form name=”myform”>
Username:<input type=”text” name=”name”/>
<br/> <br/>
<input type=”button” value=”Disable Name Field” onclick=”
DisableFunction()”/>
<br/><br/>
<input type=”button” value=”Enable Name Field” onclick=”
EnableFunction()”/>
</form>
</body>
</html>
JavaScript Example
<!DOCTYPE html>
<html>
<head>
<script type =”text/javascript”>
Function ReadOnlyFunction()
{ [Link]=true
}
</script>
</head>
<body>
<form name=”myform”>
Username: <input type=”text” name=”name”/>
<br/> <br/>
<input type=”button” value=”Read-only Name Field” onclick=”
ReadOnlyFunction())”/>
</form>
</body>
</html>
Example
<html>
<head>
<script type = "text/javascript">
functionWriteCookie() {
if([Link] == "" )
{
alert("Enter some value!");
return;
}
cookievalue = escape([Link]) + ";";
[Link] = "name=" + cookievalue;
[Link] ("Setting Cookies : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name = "myform" >
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
</form>
</body>
</html>
Example
<html>
<head>
<script type = "text/javascript">
functionReadCookie() {
varallcookies = [Link];
[Link] ("All Cookies : " + allcookies );
// Get all the cookies pairs in an array
cookiearray = [Link](';');
// Now take key value pair out of this array
for(var i=0; i<[Link]; i++) {
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
[Link] ("Key is : " + name + " and Value is : " + value);
}
}
</script>
</head>
<body>
<form name = "myform" action = "">
<p> click the following button and see the result:</p>
<input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
</form>
</body>
</html>
Example
<html>
<head>
<script type = "text/javascript">
functionWriteCookie() {
var now = new Date();
[Link]([Link]() + 1 );
cookievalue = escape([Link]) + ";"
[Link] = "name=" + cookievalue;
[Link] = "expires=" + [Link]() + ";"
[Link] ("Setting Cookies : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>
Example
<html>
<head>
<script type = "text/javascript">
functionWriteCookie() {
var now = new Date();
[Link]([Link]() - 1 );
cookievalue = escape([Link]) + ";"
[Link] = "name=" + cookievalue;
[Link] = "expires=" + [Link]() + ";"
[Link]("Setting Cookies : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Click the button to open an about:blank page in a new browser
window that is 200px wide and
100px tall.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var myWindow = [Link]("", "", "width=200,height=100");
}
</script>
</body>
</html>
Example
<html>
<body>
<p>Click the button to open a new window and close the window after
three seconds (3000
milliseconds)</p>
<button onclick="openWin()">Open "myWindow"</button>
<script>
function openWin() {
var myWindow = [Link]("", "myWindow", "width=200,
height=100");
[Link]("<p>This is 'myWindow'</p>");
setTimeout(function(){ [Link]() }, 3000);
}
</script>
</body>
</html>
<HTML>
<head></head>
<Body>
<textarea rows=”2″ cols=”50″ name=”rollovertext”
onmouseover=”[Link]=’What is rollover?'”
onmouseout=”[Link]=’Rollover means a webpage changes when
the user moves his or her mouse
over an object on the page'”></textarea>
</body>
</html>
<html>
<head>
<title>Rollover Effect</title>
</head>
<body>
<table>
<tbody>
<trvalign=”top”>
<td width=”50″>
<a><imgsrc=”[Link]” name=”book”></a>
</td>
<td><img height=”1″ width=”10″></td>
<td><a
onmouseover=”[Link]=’[Link]'”><b>Visual Basic
2010 Made
Easy</b></a>
<br>
<a onmouseover=”[Link]=’[Link]'”><b>Visual
Basic 2008 Made Easy</b></a>
<br>
<a onmouseover=”[Link]=’[Link]'”><b>Visual Basic
6 Made Easy</b></a>
<br>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”>
<html xmlns=”[Link]
<head>
<script language=”Javascript”>
MyBooks=new Array(‘[Link]’,’[Link]’,’[Link]’)
book=0
function ShowCover(book){[Link]=MyBooks[book]
}</script></head>
<body>
<body>
<P align=”center”><imgsrc=”[Link]”
name=”DisplayBook”/><p>
<center>
<table border=0>
<tr>
<td align=center><a onmouseover=”ShowCover(0)”><b>Visual Basic
2010 Made Easy</b></a><br>
<a onmouseover=”ShowCover(1)”><b>Visual Basic 2008 Made
Easy</b></a><br>
<a onmouseover=”ShowCover(2)”><b>Visual Basic 6 Made
Easy</b></a><br>
</td>
</tr>
</table>
</body>
</html>
Example
<html>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
Example
<html>
<head>
<script language="javascript" type="text/javascript">
function dynamicdropdown(listindex)
{
switch (listindex)
{
case "manual" :
[Link]("status").options[0]=new Option("Select
status","");
[Link]("status").options[1]=new
Option("OPEN","open");
[Link]("status").options[2]=new
Option("DELIVERED","delivered");
break;
case "online" :
[Link]("status").options[0]=new Option("Select
status","");
[Link]("status").options[1]=new
Option("OPEN","open");
[Link]("status").options[2]=new
Option("DELIVERED","delivered");
[Link]("status").options[3]=new
Option("SHIPPED","shipped");
break;
}
return true;
}
</script>
</head>
<title>Dynamic Drop Down List</title>
<body>
<div class="category_div" id="category_div">Source:
<select id="source" name="source" onchange="javascript:
dynamicdropdown([Link][[Link]].value);">
<option value="">Select source</option>
<option value="manual">MANUAL</option>
<option value="online">ONLINE</option>
</select>
</div>
<div class="sub_category_div" id="sub_category_div">Status:
<script type="text/javascript" language="JavaScript">
[Link]('<select name="status" id="status"><option
value="">Select
status</option></select>')
</script>
<select id="status" name="status">
<option value="open">OPEN</option>
<option value="delivered">DELIVERED</option>
</select>
</div>
</body>
</html>
<html>
<head>
<title>JavaScript Status Bar</title></head>
<body onLoad="[Link]='Welcome!';return true">
</body>
</html>
Moving the message along the status bar
<html>
<head>
<title>Scrolling Text</title>
<script language="JavaScript">
var scrollPos = 0
var maxScroll = 100
var blanks = ""
function scrollText(text, milliseconds) {
[Link]("displayText('"+text+"')", milliseconds)
}
function displayText(text) {
[Link] = blanks + text
++scrollPos
blanks += " "
if(scrollPos > maxScroll) {
scrollPos = 0
blanks = ""
}
}
</script>
</head>
<body onload="scrollText('Watch this text scroll!!!', 300)">
<p>Watch the text scroll at the bottom of this window!</p>
</body>
</html>
Example
<html>
<head>
<script language="JavaScript">
function function2() {
alert("This image is copyrighted")
}
</script>
</head>
<body oncontextmenu="function2()">
<p>Right click in the image.</p>
<img oncontextmenu="function2()"
src="[Link]
alt="[Link]"
width="99"
height="76">
</body>
</html>