Q1. HTML Form Website Design

Question 1:
Design a website with HTML Form.

In this assignment, we are required to create a simple website that demonstrates the use of HTML forms.
Forms are one of the most important features in web development since they allow users to input data, such as login details or registration information.

Here we will design two forms:

A Login Form
A Registration Form

File Name: login.html


<!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="style.css" />
</head>
<body>
  <div class="login-container">
    <div class="login-box">
      <h2>Welcome Back</h2>
      <p class="subtitle">Please login to continue</p>
      <form>
        <div class="input-group">
          <input type="text" placeholder="Username" required />
        </div>
        <div class="input-group">
          <input type="password" placeholder="Password" required />
        </div>
        <button type="submit" class="btn-login">Login</button>
        <p class="signup-text">
          Don’t have an account? <a href="/lab_web/forms/register.html">Sign up</a>
        </p>
      </form>
    </div>
  </div>
</body>
</html>


/*
* Author: Ansari In
*/
/* General reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
/* Container */
.login-container {
  width: 100%;
  max-width: 400px;
  padding: 20px;
}
 
/* Login Card */
.login-box {
  background: #fff;
  padding: 40px 30px;
  border-radius: 12px;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
}
 
.login-box h2 {
  margin-bottom: 10px;
  color: #333;
}
 
.login-box .subtitle {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}
 
/* Input Fields */
.input-group {
  margin-bottom: 15px;
}
 
.input-group input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
  font-size: 15px;
  transition: 0.3s;
}
 
.input-group input:focus {
  border-color: #2575fc;
  box-shadow: 0px 0px 5px rgba(37, 117, 252, 0.5);
}
 
/* Button */
.btn-login {
  width: 100%;
  padding: 12px;
  background: #2575fc;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}
 
.btn-login:hover {
  background: #1a5edc;
}
 
/* Sign up link */
.signup-text {
  margin-top: 15px;
  font-size: 14px;
  color: #444;
}
 
.signup-text a {
  color: #2575fc;
  text-decoration: none;
  font-weight: 600;
}
 
.signup-text a:hover {
  text-decoration: underline;
}

Output Preview : `login form`

Example 2: Registration Form

File Name: register.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Registration Form</title>
  <link rel="stylesheet" href="register.css" />
</head>
<body class="register-body">
  <div class="register-container">
    <div class="register-box">
      <h2>Create Account</h2>
      <p class="subtitle">Fill in the details to sign up</p>
      <form>
        <div class="input-group">
          <input type="text" placeholder="Full Name" required />
        </div>
        <div class="input-group">
          <input type="email" placeholder="Email Address" required />
        </div>
        <div class="input-group">
          <input type="text" placeholder="Username" required />
        </div>
        <div class="input-group">
          <input type="password" placeholder="Password" required />
        </div>
        <div class="input-group">
          <input type="password" placeholder="Confirm Password" required />
        </div>
        <button type="submit" class="btn-register">Register</button>
        <p class="login-text">
          Already have an account? <a href="login.html">Login</a>
        </p>
      </form>
    </div>
  </div>
</body>
</html>


/* Registration Background */
.register-body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #ff512f 0%, #dd2476 100%);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.register-container {
  width: 100%;
  max-width: 450px;
  padding: 20px;
}
 
/* Registration Card */
.register-box {
  background: #fff;
  padding: 40px 30px;
  border-radius: 12px;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
}
 
.register-box h2 {
  margin-bottom: 10px;
  color: #333;
}
 
.register-box .subtitle {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}
 
/* Inputs */
.input-group {
  margin-bottom: 15px;
}
 
.input-group input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
  font-size: 15px;
  transition: 0.3s;
}
 
.input-group input:focus {
  border-color: #dd2476;
  box-shadow: 0px 0px 5px rgba(221, 36, 118, 0.5);
}
 
/* Register Button */
.btn-register {
  width: 100%;
  padding: 12px;
  background: #dd2476;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}
 
.btn-register:hover {
  background: #b71c5a;
}
 
/* Login link */
.login-text {
  margin-top: 15px;
  font-size: 14px;
  color: #444;
}
 
.login-text a {
  color: #dd2476;
  text-decoration: none;
  font-weight: 600;
}
 
.login-text a:hover {
  text-decoration: underline;
}

Output Preview : `register form`

Registration Form Link

Q1. HTML Form Website Design

Example 1: Login Form

Output Preview : login form

Example 2: Registration Form

Output Preview : register form

Output Preview : `login form`

Output Preview : `register form`