Scribd
Upload
20 views4 pages

Experiment Number 2

Uploaded by

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

Experiment Number 2

Uploaded by

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

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:

You might also like