Web Tech Lab Manual - A

1.
COUNT THE NUMBER OF ELEMENTS IN A FORM

AIM:
To create an HTML form with a number of elements and count the elements using Java Script code.
PROCEDURE:
1. Start the program
2. Design the web page with number of form elements using <form> tag.
3. Create a java script function to display the number of elements.
4. Use document.forms.length to get the number of form elements.
5. Display the number of elements in the alert box.
SOURCE CODE:
<html>
<head>
<title>Registration Form</title>
<script type = "text/javascript">
function display()
{
alert("Number of Elements in this page "+document.getElementById("form1").length);
}
</script>
</head>
<body>
<h1 align="center"> Students Registration Form </h1>
<form id = "form1">
<table border = "0" align="center">
<tr>
<td>Name</td>
<td><input type = "text" value = "firstname" /></td>
<td><input type = "text" value = "Lastname" /></td>
</tr>
<tr>
<td>Date of Birth</td>
<td><select name = "date"><option value = "7" >11</td>
<td><select name = "month"><option value = "November">November</td>
<td><select name = "year"><option value = "1991">1991</td>
</tr>
<tr>
<td>Gender</td>
<td><input type = "radio" name = "gender"/>Male</td>
<td><input type = "radio" name = "gender"/>Female</td>
</tr>
<tr>
<td>Mobile</td>
<td><input type = "text" ></td>
</tr>
<tr>
<td>Address</td>
<td><textarea name = "address"></textarea></td>
</tr>
<tr>
<td>Language you known</td>
<td><input type = "checkbox" /> Tamil </td>
<td><input type = "checkbox" /> English </td>
<td><input type = "checkbox" /> Others </td>
</tr>
<tr>
<td><input type = "button" value = "Submit" /></td><td></td>
<td><input type = "button" value = "Check no of elements" onclick = "display()" /></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT:
RESULT:
Thus the above program executed successfully.
2. TEXTBOX VALIDATION
SOURCE CODE:
<html>
<head>
<title>Personal Information</title>
function validate()
{
if(document.myForm.Name.value == "")
{
alert("Please Provide Your Name");
document.myForm.Name.focus();
return false;
}
if(document.myForm.Email.value == "")
{
alert("Please Provide Your Email ID");
document.myForm.Email.focus();
return false;
}
if((document.myForm.Phone.value == "") || (document.myForm.Phone.value.length != 10) )
{
alert("Please Provide a valid Phone Number");
return false;
}
if ((document.myForm.Zip.value == "")||(document.myForm.Zip.value.length != 5))
{
alert("Please Provide a valid zip code format #####");
document.myForm.Zip.focus();
return false;
}
if(document.myForm.Country.value == "-1")
{
alert("Please Provide Your Country Name");
return false;
}
return true;
}
function validateEmail()
{
var emailID = document.myForm.Email.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if(atpos < 1 || (dotpos - atpos < 2))
{
alert("Please Enter Correct Email ID");
return false;
}
return true;
}
</script>
</head>
<body >
<h1 align = "center"> Personal Information </h1>
<form name = "myForm" onsubmit = "return(validate());" >
<table cellspacing = "2" cellpadding = "2" border = "1" align = "center">
<tr>
<td>Name</td>
<td><input type = "text" name = "Name" /></td>
</tr>
<tr>
<td>Email ID</td>
<td><input type = "text" name = "Email" onchange = "validateEmail();"/></td>
</tr>
<tr>
<td>Phone Number</td>
<td><input type = "text" name = "Phone"/></td>
</tr>
<tr>
<td>Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>
<tr>
<td>Country</td>
<td><select name = "Country" >
<option value = "-1" selected> [Choose Yours]</option>
<option value = "1" >INDIA</option>
<option value = "2" >USA</option>
<option value = "3" >UK</option>
</select>
</td>
</tr>
<tr>
<td colspan = "2" align = "center"><input type = "submit" value = "Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT:
3. EVALUATE MATHEMATICAL EXPRESSION

SOURCE CODE:
<html>
<head>
<title>Mathematical Expression</title>
function math_exp()
{
var x = document.form1.exptext.value;
var result = eval(x);
document.form1.resulttext.value = result;
}
</script>
</head>
<body >
<h1> Evaluate Mathematical Expression </h1>
<p> Enter mathematical expression in below text box. Ex: 5+4</p>
<form name = "form1">
<table>
<tr>
<td>Expression</td>
<td><input type = "text" name = "exptext" /></td>
</tr>
<tr>
<td>Result</td>
<td><input type = "text" name = "resulttext" /></td>
</tr>
<tr >
<td colspan="2" align = "center" ><input type = "button" value = "calculate" onclick = "math_exp()"
/></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT:
4. PAGE WITH DYNAMIC EFFECTS

SOURCE CODE:
<html>
<head>
<style>
.moveable{
position: absolute;
}
</style>
var x = 5;
var y = 5;
var dest_x = 300;
var dest_y = 300;
var interval = 10;
function moveImage()
{
if(x < dest_x)
x = x + interval;
if(y < dest_y)
y = y + interval;
document.getElementById("ufo").style.top = y + "px";
document.getElementById("ufo").style.left = x + "px";
if((x + interval < dest_x) && (y + interval < dest_y))
{
window.setTimeout("moveImage()", 100);
}
}
</script>
</head>
<body onload = "moveImage()">
<div id = "ufo" class = "moveable">
<img src = "image.jpg" alt = "please link to a valid image" />
</div>
</body>
</html>
OUTPUT:
5. SUM OF N NATURAL NUMBERS
SOURCE CODE:
<html>
<head>
var num = window.prompt("Enter the number:","");
var n = parseInt(num);
result = sumnaturalno(n);
//window.alert("The sum of " + n + " natural number is" + result);
document.write("<br><b>The sum of " + n + " natural number is " + result+"<b>");
function sumnaturalno(n)
{
var i;
var sum = 0;
document.write("Natural numbers are:");
for(i = 1;i <= n; i++)
{
document.write(i+" ");
sum = sum + i;
}
return (sum);
}
</script>
</head>
</html>
OUTPUT:

Web Tech Lab Manual - A

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Tech Lab Manual - A

Uploaded by

Copyright:

Available Formats

1.

COUNT THE NUMBER OF ELEMENTS IN A FORM

3. EVALUATE MATHEMATICAL EXPRESSION

4. PAGE WITH DYNAMIC EFFECTS

You might also like