4. Develop HTML page named as "registration.
html" having variety of HTML input
elements with background colors, table for alignment & provide font colors & size using
CSS styles.
<html>
<head>
<title>Registration Form</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h2>Student Registration Form</h2>
<hr>
<form action="#" method="post">
<table>
<tr>
<td><label for="name">Full Name:</label></td>
<td><input type="text" id="name" name="name" placeholder="Enter your full
name" required></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" id="email" name="email" placeholder="Enter your
email" required></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" name="password"
placeholder="Enter your password" required></td>
</tr>
<tr>
<td><label for="dob">Date of Birth:</label></td>
<td><input type="date" id="dob" name="dob" required></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</td>
</tr>
<tr>
<td><label for="course">Course:</label></td>
<td>
<select id="course" name="course" required>
<option value="">Select Course</option>
<option value="cse">Computer Science</option>
<option value="ece">Electronics</option>
<option value="mech">Mechanical Engineering</option>
</select>
</td>
</tr>
<tr>
<td><label for="phone">Phone Number:</label></td>
<td><input type="tel" id="phone" name="phone" placeholder="Enter your
phone number"></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><textarea id="address" name="address" rows="3" placeholder="Enter your
address"></textarea></td>
</tr>
<tr>
<td>Languages Known:</td>
<td>
<input type="checkbox" id="english" name="language" value="english">
<label for="english">English</label>
<input type="checkbox" id="hindi" name="language" value="hindi">
<label for="hindi">Hindi</label>
<input type="checkbox" id="kannada" name="language" value="kannada">
<label for="kannada">Kannada</label>
</td>
</tr>
<tr>
<td colspan="2" class="center">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
[Link]
/* General Styles */
body
{
background-color: #f0f4f8;
font-family: 'Segoe UI', Tahoma, sans-serif;
margin: 0;
padding: 0;
}
/* Container Styling */
.container
{
max-width: 600px;
margin: 40px auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
border-radius: 12px;
}
/* Heading Styling */
h2
{
text-align: center;
color: #2c3e50;
font-size: 30px;
margin-bottom: 10px;
}
/* Styling for table */
table
{
width: 100%;
border-spacing: 10px;
}
/* Input and Textarea Styling */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="tel"],
select,
textarea
{
width: 100%;
padding: 10px;
margin: 5px 0;
border: 2px solid transparent;
border-radius: 8px;
background-color: #e8f4fc;
transition: border-color 0.3s;
}
input:focus,
select:focus,
textarea:focus
{
border-color: #3498db;
outline: none;
}
/* Radio and Checkbox Styling */
input[type="radio"],
input[type="checkbox"]
{
margin-right: 5px;
accent-color: #3498db;
}
/* Button Styling */
button
{
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
margin: 5px;
cursor: pointer;
border-radius: 8px;
font-size: 16px;
transition: background-color 0.3s, transform 0.2s;
}
button:hover
{
background-color: #2980b9;
transform: scale(1.05);
}
/* Center Align Buttons */
.center
{
text-align: center;
}
/* Label Styling */
label
{
font-weight: bold;
color: #34495e;
font-size: 15px;
}
/* HR Styling */
hr
{
border: 2px solid #3498db;
margin-bottom: 20px;
}
