Scribd
Upload
0 views

mst observation

The document contains multiple HTML forms for user interaction, including a login form and a signup form. The login form allows users to enter their email and password, while the signup form collects additional information such as name, email, password, and terms agreement. Each form features basic styling and JavaScript functionality for toggling between login and signup views.

Uploaded by

mahig77777
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views

mst observation

The document contains multiple HTML forms for user interaction, including a login form and a signup form. The login form allows users to enter their email and password, while the signup form collects additional information such as name, email, password, and terms agreement. Each form features basic styling and JavaScript functionality for toggling between login and signup views.

Uploaded by

mahig77777
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

1.

d Login form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login & Signup</title>
<style>
body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-
items: center;height: 100vh;margin: 0;background: linear-gradient(135deg,
#00203F, #ADEFD1);color: #fff;}
.container {width: 300px;padding: 20px;background: rgba(0,0,0,0.7);border-
radius: 10px;text-align: center;}
input, button {width: 100%;margin: 10px 0;padding: 10px;border:
none;border-radius: 5px;}
button {background: #ADEFD1;color: #00203F;cursor: pointer;}
button:hover {background: #00203F;color: #ADEFD1;}
a {color: #ADEFD1;cursor: pointer;}
.hidden {display: none;}
</style>
</head>
<body>
<div class="container">
<div id="login" class="form">
<h2>Login</h2>
<input type="email" id="loginEmail" placeholder="Email">
<input type="password" id="loginPassword" placeholder="Password">
<button onclick="alert('Login Successful')">Login</button>
<a onclick="toggleForms()">Sign Up</a>
</div>
<div id="signup" class="form hidden">
<h2>Sign Up</h2>
<input type="text" id="signupName" placeholder="Name">
<input type="email" id="signupEmail" placeholder="Email">
<input type="password" id="signupPassword" placeholder="Password">
<input type="password" id="signupConfirmPassword"
placeholder="Confirm Password">
<button onclick="alert('Signup Successful')">Sign Up</button>
<a onclick="toggleForms()">Login</a>
</div>
</div>
<script>
function toggleForms() {
document.getElementById('login').classList.toggle('hidden');
document.getElementById('signup').classList.toggle('hidden');
}
</script>
</body>
</html>
Output:
2.a
<!DOCTYPE html>
<html lang="en">
<head>
<title>IEKart Online Shopping</title>
</head>
<body>
<table>
<tr>
<th colspan="3">Clothing</th>
</tr>
<tr>
<td>Men's</td>
<td>Women's</td>
<td>Kids</td>
</tr>
<tr>
<td><img src="men.jpg" width="200" height="250" /></td>
<td><img src="womens.jpg" width="200" height="250" /></td>
<td><img src="kids.jpg" width="200" height="250" /></td>
</tr>
</table>
</body>
</html>
Output:
2.b
<!DOCTYPE html>
<html>
<head>
<title>Sign-Up Page</title>
</head>
<body>
<form>
<h1 align="center">REGISTRATION</h1>
<table align="center" cellspacing="10">
<tr><td>Name:</td><td><input name="uname"
type="text"></td></tr>
<tr><td>Password:</td><td><input name="pwd"
type="password"></td></tr>
<tr><td>E-mail ID:</td><td><input name="email"
type="text"></td></tr>
<tr><td>Phone No:</td><td><input name="phno" type="text"
maxlength="10"></td></tr>
<tr><td>Gender:</td>
<td>
<input name="gender" type="radio" value="Male">Male
<input name="gender" type="radio" value="Female">Female
</td>
</tr>
<tr><td>DOB:</td><td><input type="date" name="dob"></td></tr>
<tr>
<td>Languages:</td>
<td>
<input name="lk" type="checkbox" value="English">English
<input name="lk" type="checkbox" value="Telugu">Telugu
<input name="lk" type="checkbox" value="Hindi">Hindi
<input name="lk" type="checkbox" value="Tamil">Tamil
</td>
</tr>
<tr><td>Address:</td><td><textarea></textarea></td></tr>
<tr><td colspan="2" align="center">
<input type="submit" value="Register"><input type="reset"
value="Cancel">
</td></tr>
</table>
</form>
</body>
</html>
Output:
2.c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up</title>
<style>
body{text-align:center;font-family:Arial,sans-
serif;background:#f9f9f9;padding:20px;}
form{display:inline-block;text-align:left;background:#fff;padding:20px;border-
radius:8px;box-shadow:0 4px 6px rgba(0,0,0,0.1);}
label{display:block;margin:10px 0;}
input[type="text"],input[type="email"],input[type="password"]
{width:100%;padding:8px;margin:5px 0;border:1px solid #ccc;border-
radius:4px;}
button{width:100%;padding:10px;background:#007BFF;color:#fff;border:none;b
order-radius:4px;cursor:pointer;}
button:hover{background:#0056b3;}
a{text-decoration:none;color:#007BFF;}
a:hover{color:#0056b3;}
</style>
</head>
<body>
<h1>Create Account</h1>
<form action="/signup" method="post">
<label>Name:<input type="text" name="name" required pattern="[A-Za-z\s]
{3,50}"></label>
<label>Email:<input type="email" name="email" required></label>
<label>Password:<input type="password" name="password" required
minlength="8" maxlength="20"></label>
<label>Confirm:<input type="password" name="confirm-password" required
minlength="8" maxlength="20"></label>
<label><input type="checkbox" name="terms" required>I agree to <a
href="#">Terms</a></label>
<button type="submit">Sign Up</button>
</form>
<p><a href="Login.html">Login</a></p>
</body>
</html>
Output:

You might also like