Scribd
Upload
56 views

Design/Execution Steps: Web Technology Lab Manual

The document describes the steps to create and execute a web application using HTML and JavaScript. It outlines 4 steps: 1) writing HTML code and saving with a .html extension, 2) writing validation functions in JavaScript, 3) calling the validation functions on submit button click, and 4) opening the HTML page in a browser. It then lists test cases to validate fields are mandatory and phone numbers only allow numeric input. The conclusion states validation is applied using JavaScript. Sample code and output is provided to demonstrate a registration form with validation.

Uploaded by

Ankit Baj
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
56 views

Design/Execution Steps: Web Technology Lab Manual

The document describes the steps to create and execute a web application using HTML and JavaScript. It outlines 4 steps: 1) writing HTML code and saving with a .html extension, 2) writing validation functions in JavaScript, 3) calling the validation functions on submit button click, and 4) opening the HTML page in a browser. It then lists test cases to validate fields are mandatory and phone numbers only allow numeric input. The conclusion states validation is applied using JavaScript. Sample code and output is provided to demonstrate a registration form with validation.

Uploaded by

Ankit Baj
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Web Technology Lab Manual

DESIGN/EXECUTION STEPS

Following steps are used to Create and Execute web applications,


1. Write an HTML code in notepad and save with .html extension.
2. Write the function for validation of email id and phone no and enclosed this function in
script.
3. Call this function on ‘onClick’ event of submit button.
4. Open HTML page in the browser.

TEST CASES

Manual testing is used to check following validations


All the fields like Full name, Class, Department, Address, Phone number and email id are
mandatory fields.
Phone no. should be numbers only.
Email id should be in proper format like [email protected]

CONCLUSION/ANALYSIS

Hence, we applied validate the data using JavaScript.

PROGRAM CODE & OUTPUT

Registration.html
<html>
<head>
<title>regform</title>
<link href="samp.css" rel="stylesheet"></link>

<script type="text/javascript">
function Validation()
{
var emailID =document.myForm.EMail.value;
var num=document.myForm.ph.value;
atpos = emailID.indexOf("@");

Computer Department, AISSMS IOIT Page 21


Web Technology Lab Manual

dotpos = emailID.lastIndexOf(".");

if (atpos< 1 || ( dotpos - atpos< 2 ))


{
alert("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false;
}
else if (isNaN(num)){
document.getElementById("ph");
alert("Please enter numeric only.")
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<div class="con">
<form name="myForm" action="display.xml" method="get" align="center">
<div class="con2">
<imgsrc="D:/handshake.jpg" width=380px
height=100px></img>
</div>
<div class="main">
<table align="center">
<tr><td><b><br>Welcome to Registration Page<br><br></td></tr>
</table>
<div class="con1">
<table align="center">
<tr>
<td>Full Name:</td>
<td><input type="text" id="FirstName" value="" required></input></td>
</tr>
<tr>
<td>Class:</td>
<td><input type="text" id="Class" value=""
required></input></td>
</tr>
<tr>
<td>Department:</td>
<td><input type="text" id="Department" value=""
required></input></td>
</tr>
<tr>

Computer Department, AISSMS IOIT Page 22


TE Comp (Sem-II) Web Technology Lab Manual

<td>address:</td>
<td><textarea row="3" column="2" value=""
required></textarea></td>
</tr>
<tr>
<td>email Id:</td>
<td><input type="text" value="" id="EMail"
required></input></td>
</tr>
<tr>
<td>phone no:</td>
<td><input type="text" id="ph" value="" required></input></td>
</tr>
<tr>
<tr></tr><tr></tr></table>
<table align="center">
<td><input type="submit" value="SUBMIT" onclick="return
(Validation());"></td>
<td><input type="reset" value="CANCEL"></td>
</tr>
</table>
</div>
</div>
</form>
</div>
</body>
</html>

Output:

Computer Department, AISSMS IOIT Page 23

You might also like