Scribd
Upload
43 views

Example 1

The document describes how to create a basic HTML form with various input elements like text fields, radio buttons, checkboxes and submit buttons. It includes a username and password text field, male/female/other radio buttons for gender selection, bike/car checkboxes for vehicle selection, and a submit button to submit the form.

Uploaded by

ϻohammed Ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
43 views

Example 1

The document describes how to create a basic HTML form with various input elements like text fields, radio buttons, checkboxes and submit buttons. It includes a username and password text field, male/female/other radio buttons for gender selection, bike/car checkboxes for vehicle selection, and a submit button to submit the form.

Uploaded by

ϻohammed Ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 43

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>

2.ondblclick event
<html>
<head>
<script>
functionmyFunction() {
document.getElementById("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:-
1.onmouseover&onmouseout event
<!DOCTYPE html>
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">Mouse over this text</h1>
</body>
</html>

2.onmouseup&onmousedown event
<html>
<head>
<script>
functionmyFunction(elmnt, clr)
{ elmnt.style.color = clr;
}
</script>
</head>
<body>
<p onmousedown="myFunction(this,'red')"
onmouseup="myFunction(this,'green')">
hi how r u?
</p>
</body>
</html>

Load Events:-
1.onload event
<html>
<head>
<script>
functionmyFunction() {
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h2>Hello World!</h2>
</body>
</html>

2.unload event
<html>
<head>
<script>
functionmyFunction()
{
alert("Thank you for visiting My page!");
}
</script>
</head>
<body onunload="myFunction()">
</body>
</html>

Key Events
1.onkeypress event
<html>
<head>
<script>
functionmyFunction() {
alert("You pressed a key inside the input field");
}
</script>
</head>
<body>
<input type="text" onkeypress="myFunction()">
</body>
</html>

2.onkeyup event
<html>
<head>
<script>
functionmyFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname"
onkeyup="myFunction()">
</body>
</html>

3.onkeydown 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
1.onchange event
<html>
<head>
<script>
functionmyFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname"
onchange="myFunction()">
</body>
</html>

2.onselect event
<html>
<head>
<script>
functionmyFunction()
{
document.write("selected some text");
}
</script>
</head>
<body>
Some text: <input type="text" value="Hello world!"
onselect="myFunction()">
</body>
</html>

3.onfocus event
<html>
<head>
<script>
functionmyFunction(x)
{
x.style.background = "yellow";
}
</script>
</head>
<body>
Enter your name: <input type="text" onfocus="myFunction(this)">
</body>
</html>

4.onblur event
<html>
<head>
<script>
functionmyFunction()
{
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname"
onblur="myFunction()">
</body>
</html>

5.onreset 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>

6.onsubmit event
<html>
<head>
<script>
functionconfirmInput()
{
fname = document.forms[0].fname.value;
alert("Hello " + fname + "! You will now be redirected to My Page");
}
</script>
</head>
<body>
<form onsubmit="confirmInput()" action="https://google.com/">
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 =”submit.gif”
onlclik=”javascript:document.forms.myform.submit()”/>
<br/><br/>
</form>
</body>
</html>

For Example
<!DOCTYPE html>
<html>
<head>
<script type =”text/javascript”>
Function EnableFunction()
{
document.forms.myform.name.disabled=false
}
Function DisableFunction()
{
document.forms.myform.name.disabled=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()
{ document.forms.myform.name.readOnly=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(document.myform.customer.value == "" )
{
alert("Enter some value!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
document.write ("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 = document.cookie;
document.write ("All Cookies : " + allcookies );
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for(var i=0; i<cookiearray.length; i++) {
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write ("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();
now.setMonth(now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write ("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();
now.setMonth(now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("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 = window.open("", "", "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 = window.open("", "myWindow", "width=200,
height=100");
myWindow.document.write("<p>This is 'myWindow'</p>");
setTimeout(function(){ myWindow.close() }, 3000);
}
</script>
</body>
</html>
<HTML>
<head></head>
<Body>
<textarea rows=”2″ cols=”50″ name=”rollovertext”
onmouseover=”this.value=’What is rollover?'”
onmouseout=”this.value=’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=”vb2010book.jpg” name=”book”></a>
</td>
<td><img height=”1″ width=”10″></td>
<td><a
onmouseover=”document.book.src=’vb2010book.jpg'”><b>Visual Basic
2010 Made
Easy</b></a>
<br>
<a onmouseover=”document.book.src=’vb2008book.jpg'”><b>Visual
Basic 2008 Made Easy</b></a>
<br>
<a onmouseover=”document.book.src=’vb6book.jpg'”><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=”http://www.w3.org/1999/xhtml”>
<head>
<script language=”Javascript”>
MyBooks=new Array(‘vb2010book.jpg’,’vb2008book.jpg’,’vb6book.jpg’)
book=0
function ShowCover(book){document.DisplayBook.src=MyBooks[book]
}</script></head>
<body>
<body>
<P align=”center”><imgsrc=”vb2010book.jpg”
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" :
document.getElementById("status").options[0]=new Option("Select
status","");
document.getElementById("status").options[1]=new
Option("OPEN","open");
document.getElementById("status").options[2]=new
Option("DELIVERED","delivered");
break;
case "online" :
document.getElementById("status").options[0]=new Option("Select
status","");
document.getElementById("status").options[1]=new
Option("OPEN","open");
document.getElementById("status").options[2]=new
Option("DELIVERED","delivered");
document.getElementById("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(this.options[this.selectedIndex].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">
document.write('<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="window.status='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) {
window.setInterval("displayText('"+text+"')", milliseconds)
}
function displayText(text) {
window.defaultStatus = 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="http://www.java2s.com/style/logo.png"
alt="www.java2s.com"
width="99"
height="76">
</body>
</html>

You might also like