Creating a Student Registration Form in HTML code
Creating a student registration form in HTML code with CSS source code is a common exercise for learning web development. Below, we'll explore a detailed walkthrough of the source code for a student registration form in HTML with CSS, providing a clear understanding of how each component contributes to the overall design and functionality of the form.
HTML Structure
The HTML structure of the student registration form in HTML code with CSS source code is straightforward and semantic, ensuring accessibility and ease of maintenance. The document starts with the `<!DOCTYPE html>` declaration, specifying HTML5 as the document type. The `<html lang="en">` tag defines the language of the document, which helps search engines and browsers. The `<head>` section includes meta tags for character set and viewport settings, ensuring the student registration form in HTML with CSS displays correctly across different devices and screen sizes.
The `<style>` block within the `<head>` section defines the CSS that styles the form. The main content of the page is wrapped within a `<body>` tag, where the student registration form in HTML with CSS is encapsulated inside a `<div class="container">`. This container class is styled to create a centered, card-like form with rounded corners and shadowing effects, providing a modern look. The form itself is wrapped within a `<form>` tag and contains several input fields and a submit button, grouped logically in rows to maintain a clean and organized layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
</head>
<body>
<div class="container">
<h2>Student Registration Form</h2>
<form>
<div class="input-row">
<div class="input-group">
<label for="fullname">Full Name</label>
<input type="text" id="fullname" name="fullname" required>
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
</div>
<div class="input-row">
<div class="input-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" required>
</div>
<div class="input-group">
<label for="dob">Date of Birth</label>
<input type="date" id="dob" name="dob" required>
</div>
</div>
<div class="input-row">
<div class="input-group">
<label for="gender">Gender</label>
<select id="gender" name="gender" required>
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
<div class="input-group">
<label for="zipcode">Zip Code</label>
<input type="text" id="zipcode" name="zipcode" required>
</div>
</div>
<div class="input-row">
<div class="input-group">
<label for="country">Country</label>
<select id="country" name="country" required>
<option value="">Select Country</option>
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
<option value="india">India</option>
<option value="australia">Australia</option>
</select>
</div>
<div class="input-group">
<label for="course">Course</label>
<select id="course" name="course" required>
<option value="">Select Course</option>
<option value="computer-science">Computer Science</option>
<option value="business">Business</option>
<option value="design">Design</option>
<option value="engineering">Engineering</option>
</select>
</div>
</div>
<button type="submit" class="btn">Register</button>
</form>
</div>
</body>
</html>
CSS Styling
The CSS for the student registration form in HTML with CSS source code starts by applying a universal selector (`* { }`) to reset the default margin and padding of all elements and set a common font family. This helps to standardize the appearance across different browsers. The body of the document uses Flexbox to center the form both vertically and horizontally on the page. A soft background color (`#f0f2f5`) is used to contrast against the white form container, enhancing its visibility.
- Unlocking the Power of Free Google Tools for Seo Success
- Ultimate Guide: Google Search Console Crawl Reports you need to know Monitor
- What is dofollow backlinks: The ultimate 5 Benefit for your websites SEO
- Schema markup and How can you use schema markup for seo
The `.container` class applies styling to the student registration form in HTML with CSS, including padding, rounded corners, and a subtle box shadow (`box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1)`) to lift the form off the page visually. The width of 500px ensures that the student registration form in HTML with CSS has enough space to comfortably display its contents, and it provides a better layout when the form is organized into two columns.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f2f5;
}
.container {
background: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
width: 500px; /* Increased width for a better two-column layout */
}
h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.input-row {
display: flex;
gap: 15px; /* Space between input groups */
margin-bottom: 15px;
}
.input-group {
flex: 1; /* Allows inputs to evenly share available space */
}
.input-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
.input-group input,
.input-group select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
outline: none;
transition: border-color 0.3s ease;
}
.input-group input:focus,
.input-group select:focus {
border-color: #007bff;
}
.btn {
width: 100%;
padding: 12px;
border: none;
border-radius: 25px;
background: #007bff;
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background 0.3s, transform 0.3s;
}
.btn:hover {
background: #0056b3;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}