Scribd
Upload
94 views

Web Eng. Lab2 PDF

The document is a lab report submitted by Ahmed Kamal of section A with roll number 2018-SE-264. The lab task was to create a simple registration form for admission to SSUET and validate it using JavaScript. Ahmed created an HTML form with fields for username, password, email, age, contact and a submit button. He added basic validation to require fields and styles it with Bootstrap and CSS. On form submission, the user is redirected to the next page.

Uploaded by

Ahmed Kamal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
94 views

Web Eng. Lab2 PDF

The document is a lab report submitted by Ahmed Kamal of section A with roll number 2018-SE-264. The lab task was to create a simple registration form for admission to SSUET and validate it using JavaScript. Ahmed created an HTML form with fields for username, password, email, age, contact and a submit button. He added basic validation to require fields and styles it with Bootstrap and CSS. On form submission, the user is redirected to the next page.

Uploaded by

Ahmed Kamal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

SWE315 Web Engineering Lab BSSE-FA20-6A

LAB#2

Sir Syed University of Engineering and Technology

Department of Software Engineering


SWE315 Web Engineering Lab BSSE-FA20-6A
LAB#2

Name:Ahmed Kamal
Section: A
Roll no: 2018-SE-264

2018-SE-264
SWE315 Web Engineering Lab BSSE-FA20-6A
LAB#2

LAB NO.2
JavaScript Forms and Validation

LAB TASKS

1.​Create a simple Registration Form for Admission in SSUET also validate it .Also apply
CSS where necessary.

SOLUTION:
CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">

<style>
@media screen and (max-width: 740px){
.login-area,
.delete-area,
.signup-area{
width: 100%;
}

2018-SE-264
SWE315 Web Engineering Lab BSSE-FA20-6A
LAB#2

@media screen and (max-width: 270px){


.display-3{
font-size: 2rem;
}
}

}
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">


<a class="navbar-brand" href="#">SSUET.</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarColor01">


<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="signup.html">Sign Up</a>

2018-SE-264
SWE315 Web Engineering Lab BSSE-FA20-6A
LAB#2

</li>
</ul>
</div>
</nav>

<div class="container">
<div class="signup-area">
<h1 class="display-3 login-heading">Sign Up</h1>
<hr class="my-4">
<form action="" method="POST">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control"
placeholder="Enter Username" required><br>
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control"
placeholder="Enter Password" required><br>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" class="form-control"
placeholder="Enter Email Address" required><br>
<label for="age">Age</label>
<input type="text" name="age" id="age" class="form-control" placeholder="Enter
Age"><br>
<label for="contact">Contact</label>
<input type="text" name="contact" id="contact" class="form-control"
placeholder="Enter Contact" required><br>
<input type="submit" name="signup" value="Sign Up" class="btn
btn-outline-primary">
</form>
</div>

2018-SE-264
SWE315 Web Engineering Lab BSSE-FA20-6A
LAB#2

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHND
z0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>

</body>
</html>

2018-SE-264
SWE315 Web Engineering Lab BSSE-FA20-6A
LAB#2

OUTPUT:

VALIDATION:

2018-SE-264
SWE315 Web Engineering Lab BSSE-FA20-6A
LAB#2

REDIRECTS TO THE NEXT PAGE ON SUBMITION:

2018-SE-264

You might also like