Scribd
Upload
102 views7 pages

Web Lab PGM 4

Uploaded by

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

Web Lab PGM 4

Uploaded by

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

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:

You might also like