Web Lab PGM 4

EXPERIMENT 4
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.
CSS file:
/* General styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
h1 {
color: darkblue;
text-align: center;
}
form {
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 700px;
margin: auto;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
table td {
padding: 10px;
}
/* Input field styling */

input[type="text"], input[type="email"], input[type="number"],
input[type="password"], input[type="file"], input[type="date"],
input[type="url"], select, textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
/* Background colors and font styles */

.bg-light {
background-color: #f9f9f9;
}
.highlight {
background-color: #d3f0d1;
}
/* Styling for buttons */

input[type="submit"], input[type="reset"] {
background-color: darkblue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover, input[type="reset"]:hover {
background-color: blue;
}
/* Font sizes and colors */

td label {
font-size: 1.1em;
color: darkgreen;
}
td select, td input, td textarea {
font-size: 1em;
color: #333;
}
td {
vertical-align: top;
}
/* Image and file input styling */

input[type="file"] {
border: none;
}
/* Error message styles (for potential client-side validation using JS) */

.error-message {
color: red;
font-size: 0.9em;
}
HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>University Student Registration</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>University Student Registration Form</h1>
<form action="#" method="POST" enctype="multipart/form-data">

<table class="bg-light">
<tr>
<td><label for="firstname">First Name:</label></td>
<td><input type="text" id="firstname" name="firstname" required
placeholder="Enter your first name"></td>
</tr>
<tr>
<td><label for="lastname">Last Name:</label></td>
<td><input type="text" id="lastname" name="lastname" required
placeholder="Enter your last name"></td>
</tr>
<tr>
<td><label for="email">Email Address:</label></td>
<td><input type="email" id="email" name="email" required placeholder="Enter a
valid email address"></td>
</tr>
<tr>
<td><label for="phone">Phone Number:</label></td>
<td><input type="number" id="phone" name="phone" required placeholder="Enter
your phone number" min="1000000000" max="9999999999"></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" name="password" required
placeholder="Create a password" minlength="8"></td>
</tr>
<tr>
<td><label for="confirmpassword">Confirm Password:</label></td>
<td><input type="password" id="confirmpassword" name="confirmpassword"
required placeholder="Confirm your password" minlength="8"></td>
</tr>
<tr class="highlight">
<td><label for="program">Select Program:</label></td>
<td>
<select id="program" name="program" required>
<option value="">--Select Program--</option>
<option value="B.Sc Computer Science">B.Sc in Computer Science</option>
<option value="BBA">BBA</option>
<option value="B.Com">B.Com</option>
<option value="B.A.">B.A.</option>
</select>
</td>
</tr>
<tr>
<td><label for="gender">Gender:</label></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" required>
<label for="female">Female</label>
</td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><textarea id="address" name="address" rows="4" required placeholder="Enter
your address"></textarea></td>
</tr>
<tr class="highlight">
<td><label for="dob">Date of Birth:</label></td>
<td><input type="date" id="dob" name="dob" required></td>
</tr>
<tr>
<td><label for="nationality">Nationality:</label></td>
<td><input type="text" id="nationality" name="nationality" required
placeholder="Enter your nationality"></td>
</tr>
<tr>
<td><label for="photo">Upload Photo:</label></td>
<td><input type="file" id="photo" name="photo" accept="image/*" required></td>
</tr>
<tr>
<td><label for="website">Personal Website (Optional):</label></td>
<td><input type="url" id="website" name="website" placeholder="Enter your
personal website URL (optional)"></td>
</tr>
<tr>
<td><label for="newsletter">Subscribe to Newsletter:</label></td>
<td><input type="checkbox" id="newsletter" name="newsletter" value="yes"> Yes,
I would like to receive the newsletter.</td>
</tr>
<tr>
<td><label for="terms">Agree to Terms and Conditions:</label></td>
<td><input type="checkbox" id="terms" name="terms" required> I agree to the
terms and conditions.</td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" value="Submit"></td>
<td><input type="reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>
Sample Output:

Web Lab PGM 4

Uploaded by

Copyright:

Available Formats

Web Lab PGM 4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Lab PGM 4

Uploaded by

Copyright:

Available Formats

EXPERIMENT 4

4.Develop HTML page named as “registration.html” having variety of HTML input

/* Input field styling */

/* Background colors and font styles */

/* Styling for buttons */

/* Font sizes and colors */

/* Image and file input styling */

/* Error message styles (for potential client-side validation using JS) */

<h1>University Student Registration Form</h1>

<form action="#" method="POST" enctype="multipart/form-data">

You might also like