Scribd
Upload
14 views5 pages

Lab 2

Uploaded by

Maaz Sayyed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views5 pages

Lab 2

Uploaded by

Maaz Sayyed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

WT LAB

ASSIGNMENT - 2
Name: Ayush Vidhale
TY IT/A
Batch - 3
Roll no.: 77
PRN No.: 12111398

Problem Statement:
LAB2: Design a HTML form for student registration and perform validation using HTML
constraints.

Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Student Registration</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
h2 {
color: #4caf50;
text-align: center;
margin-bottom: 20px;
}
form {
max-width: 600px;
margin: auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
margin-top: 10px;
display: block;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
input[type="range"] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="radio"],
input[type="checkbox"] {
margin-top: 10px;
margin-right: 5px;
}
.checkbox-group {
display: flex;
margin-top: 5px;
}
button {
width: 100%;
background-color: #4caf50;
color: white;
padding: 14px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
button:hover {
background-color: #45a049;
}
.range-container {
display: flex;
align-items: center;
}
.range-label {
margin-right: 10px;
font-size: 14px;
}
</style>
</head>
<body>
<h2>Student Registration Form</h2>

<form action="#" method="post">


<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required />

<label for="lastName">Last Name:</label>


<input type="text" id="lastName" name="lastName" required />

<label for="email">Email:</label>
<input type="email" id="email" name="email" required />

<label for="password">Password:</label>
<input
type="password"
id="password"
name="password"
minlength="8"
required
/>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob" required />

<label for="gender">Gender:</label>
<div class="checkbox-group">
<input type="radio" id="male" name="gender" value="male" required
/>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female"
required />
<label for="female">Female</label>
</div>

<label for="course">Select Course:</label>


<select id="course" name="course" required>
<option value="" disabled selected>Select Course</option>
<option value="computerScience">Computer Science</option>
<option value="biology">Biology</option>
<option value="mathematics">Mathematics</option>
</select>

<label>Interests:</label>
<div class="checkbox-group">
<input type="checkbox" id="reading" name="interests"
value="reading" />
<label for="reading">Reading</label>
<input type="checkbox" id="sports" name="interests"
value="sports" />
<label for="sports">Sports</label>
<input type="checkbox" id="music" name="interests" value="music"
/>
<label for="music">Music</label>
</div>

<label for="progress">Programming Skills (0-100):</label>


<div class="range-container">
<label class="range-label">0</label>
<input type="range" id="progress" name="progress" min="0"
max="100" />
<label class="range-label">100</label>
</div>

<button type="submit">Submit</button>
</form>
</body>
</html>
----THE END --

You might also like