Experiment number 2: Student
Registration Form
Source code:
<html>
<body>
<div class="container">
<h2>Student Registration Form</h2>
<form id="registrationForm">
<div class="form-group">
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" name="fullName" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
</div>
<div class="form-group">
<label for="address">Address:</label>
<textarea id="address" name="address" rows="4" required></textarea>
</div>
<div class="form-group">
<label>Gender:</label>
<label><input type="radio" name="gender" value="male" required> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
<label><input type="radio" name="gender" value="other"> Other</label>
</div>
<div class="form-group">
<label for="course">Select Course:</label>
<select id="course" name="course" required>
<option value="">--Select--</option>
<option value="btech">B.Tech</option>
<option value="bsc">B.Sc</option>
<option value="ba">B.A</option>
<option value="bcom">B.Com</option>
</select>
</div>
<div class="form-group">
<label>Select Your Hobbies:</label>
<label><input type="checkbox" name="hobbies" value="reading"> Reading</label>
<label><input type="checkbox" name="hobbies" value="sports"> Sports</label>
<label><input type="checkbox" name="hobbies" value="music"> Music</label>
<label><input type="checkbox" name="hobbies" value="gaming"> Gaming</label>
</div>
<button type="submit" class="submit-btn">Register</button>
</form>
</div>
<script>
document.getElementById('registrationForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent default form submission
const fullName = document.getElementById('fullName').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const phone = document.getElementById('phone').value;
const dob = document.getElementById('dob').value;
const address = document.getElementById('address').value;
const gender = document.querySelector('input[name="gender"]:checked');
const course = document.getElementById('course').value;
const hobbies = Array.from(document.querySelectorAll('input[name="hobbies"]:checked'))
.map(hobby => hobby.value);
if (!fullName || !email || !password || !phone || !dob || !address || !gender || !course ||
hobbies.length === 0) {
alert('Please fill out all the fields.');
return;
alert(`Registration successful for ${fullName}!
\nEmail: ${email}
\nPhone: ${phone}
\nDate of Birth: ${dob}
\nAddress: ${address}
\nGender: ${gender.value}
\nCourse: ${course}
\nHobbies: ${hobbies.join(', ')}`);
});
</script>
</body>
</html>
Screenshot:
