Scribd
Upload
3 views

program 21

The document provides an HTML code for a student registration form, including fields for name, email, password, gender, date of birth, languages known, and address. It features a styled layout with a responsive design and includes buttons for submitting and resetting the form. The form is intended for students and is affiliated with Dr. A.P.J. Abdul Kalam Technical University in India.

Uploaded by

amitsinghanda905
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

program 21

The document provides an HTML code for a student registration form, including fields for name, email, password, gender, date of birth, languages known, and address. It features a styled layout with a responsive design and includes buttons for submitting and resetting the form. The form is intended for students and is affiliated with Dr. A.P.J. Abdul Kalam Technical University in India.

Uploaded by

amitsinghanda905
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Approved by AICTE, Govt.

of India &
Affiliated to Dr. A.P.J. Abdul Kalam Technical University,
Lucknow, UP, India
---------------------------------------------------------------------------------------------------------------------

PROGRAM – 2
AIM: Write HTML program to design an registration form for student details.
CODE:
<!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>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: auto;
background: white;
padding: 20px;
margin-top: 50px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.container h2 {

Department of Computer Science and Engineering


Approved by AICTE, Govt. of India &
Affiliated to Dr. A.P.J. Abdul Kalam Technical University,
Lucknow, UP, India
---------------------------------------------------------------------------------------------------------------------

text-align: center;
color: #333;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
.form-group input[type="radio"],
.form-group input[type="checkbox"] {
margin-right: 10px;
}
.form-actions {

Department of Computer Science and Engineering


Approved by AICTE, Govt. of India &
Affiliated to Dr. A.P.J. Abdul Kalam Technical University,
Lucknow, UP, India
---------------------------------------------------------------------------------------------------------------------

text-align: center;
}
.form-actions button {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007bff;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
.form-actions button.reset {
background-color: #dc3545;
}
.form-actions button:hover {
opacity: 0.9;
}
</style>
</head>
<body>

<div class="container">
<h2>Student Registration Form</h2>
<form>
<!-- Name -->
<div class="form-group">

Department of Computer Science and Engineering


Approved by AICTE, Govt. of India &
Affiliated to Dr. A.P.J. Abdul Kalam Technical University,
Lucknow, UP, India
---------------------------------------------------------------------------------------------------------------------

<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
</div>

<!-- Email -->


<div class="form-group">
<label for="email">Email ID:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
</div>

<!-- Password -->


<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your
password" required>
</div>

<!-- Gender -->


<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" required> Female</label>
<label><input type="radio" name="gender" value="other" required> Other</label>
</div>

<!-- DOB -->


<div class="form-group">

Department of Computer Science and Engineering


Approved by AICTE, Govt. of India &
Affiliated to Dr. A.P.J. Abdul Kalam Technical University,
Lucknow, UP, India
---------------------------------------------------------------------------------------------------------------------

<label>Date of Birth:</label>
<select name="dob_day" required>
<option value="" disabled selected>Day</option>
<!-- Days -->
<script>
for (let i = 1; i <= 31; i++) {
document.write('<option value="' + i + '">' + i + '</option>');
}
</script>
</select>
<select name="dob_month" required>
<option value="" disabled selected>Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="dob_year" required>
<option value="" disabled selected>Year</option>

Department of Computer Science and Engineering


Approved by AICTE, Govt. of India &
Affiliated to Dr. A.P.J. Abdul Kalam Technical University,
Lucknow, UP, India
---------------------------------------------------------------------------------------------------------------------

<!-- Years -->


<script>
for (let i = new Date().getFullYear(); i >= 1900; i--) {
document.write('<option value="' + i + '">' + i + '</option>');
}
</script>
</select>
</div>

<!-- Language Known -->


<div class="form-group">
<label>Languages Known:</label>
<label><input type="checkbox" name="language" value="Hindi"> Hindi</label>
<label><input type="checkbox" name="language" value="Tamil"> Tamil</label>
<label><input type="checkbox" name="language" value="Bengali"> Bengali</label>
</div>

<!-- Address -->


<div class="form-group">
<label for="address">Address:</label>
<textarea id="address" name="address" rows="3" placeholder="Enter your address"
required></textarea>
</div>

<!-- Buttons -->


<div class="form-actions">
<button type="submit">Submit</button>

Department of Computer Science and Engineering


Approved by AICTE, Govt. of India &
Affiliated to Dr. A.P.J. Abdul Kalam Technical University,
Lucknow, UP, India
---------------------------------------------------------------------------------------------------------------------

<button type="reset" class="reset">Reset</button>


</div>
</form></div> </body></html>

OUTPUT

Name – Amit Kumar Singh


Roll No – 2301920109004
Sec – 3(A), G2
Semester-5

Department of Computer Science and Engineering

You might also like