Practical-1
Objective: Write a simple html registration form which stores students details required for
admission process in a university such as First name, Last name, roll no, course, branch, gender,
phone number, subject choice, hobbies and testimonial.
Introduction:
Different types of input tags and buttons used here are:
Important HTML Tags: -
<input>: tag is a fundamental element in HTML, used to create interactive controls for web-
based forms to accept data from users.
<button>: Creates a clickable button.
<form>: Contains interactive controls that users can use to submit data.
<select>: Creates a drop-down list.
<textarea>: Defines a multi-line text input field.
<label>: Defines a label for an <input> element.
Important HTML Attributes: -
type: Specifies the type of <input> or <button>.
value: Specifies the initial value of <input>, <button>, or <option>.
action: Specifies the URL to send the form data to when the form is submitted.
placeholder: Provides a hint to the user of what to enter in an <input> or <textarea>.
class: Specifies one or more class names for an element, which can be used to apply CSS
styles or target elements with JavaScript.
id: Defines a unique identifier for an HTML element, which can be used for styling or
scripting.
name: Specifies a name for <input>, <select>, or <textarea>, which is used to reference form
data.
Important HTML Buttons: -
Basic Button: A simple clickable button.
Submit Button: Used to submit a form.
Reset Button: Used to reset a form to its default values.
Radio Button: select one option from a set of predefined choices.
Checkboxes: allow users to select one or more options from a set of predefined choices.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>University Admission Form</title>
<style>
/* General Styling */
body {
font-family: 'Arial', sans-serif;
background-color: #f0f5f9;
margin: 0;
padding: 30px;
.form-container {
max-width: 650px;
margin: 0 auto;
background-color: #ffffff;
padding: 40px;
border-radius: 15px;
box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
border: none;
h1 {
text-align: center;
color: #333;
font-size: 26px;
margin-bottom: 25px;
font-family: 'Poppins', sans-serif;
.form-group {
margin-bottom: 20px;
.form-group label {
font-weight: bold;
display: block;
margin-bottom: 8px;
color: #555;
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #e0e0e0;
border-radius: 10px;
background-color: #f9fafb;
transition: border-color 0.3s ease;
font-size: 15px;
.form-group input[type="radio"],
.form-group input[type="checkbox"] {
width: auto;
margin-right: 10px;
}
.form-group input[type="file"] {
padding: 5px 0;
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: #a8d5ba;
.form-group textarea {
resize: vertical;
.submit-btn {
width: 100%;
background-color: #a8d5ba;
color: #fff;
padding: 12px;
border: none;
cursor: pointer;
font-size: 16px;
border-radius: 10px;
transition: background-color 0.3s ease;
.submit-btn:hover {
background-color: #8ec1a1;
}
.form-group input[type="radio"] + label,
.form-group input[type="checkbox"] + label {
display: inline;
margin-left: 5px;
.checkbox-group,
.radio-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
.checkbox-group input[type="checkbox"],
.radio-group input[type="radio"] {
margin-right: 8px;
/* Aesthetic Color Scheme */
body {
background-color: #f3e8ff; /* Light pastel lavender background */
.form-container {
background-color: #fff;
padding: 30px;
border-radius: 15px;
box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.1);
border: none;
h1 {
color: #7d4b94; /* Aesthetic lavender */
font-size: 24px;
.form-group input,
.form-group select,
.form-group textarea {
border: 1px solid #ddd;
padding: 10px;
font-size: 15px;
background-color: #fafafa; /* Light gray */
.form-group label {
color: #7d4b94; /* Soft lavender for label */
.submit-btn {
background-color: #ffd1dc; /* Light pastel pink */
color: #333;
.submit-btn:hover {
background-color: #ffafc0; /* Slightly darker pastel pink */
</style>
</head>
<body>
<div class="form-container">
<h1>University Admission Form</h1>
<form action="submit_form.php" method="post" enctype="multipart/form-data">
<!-- First Name -->
<div class="form-group">
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name" required>
</div>
<!-- Last Name -->
<div class="form-group">
<label for="last_name">Last Name:</label>
<input type="text" id="last_name" name="last_name" required>
</div>
<!-- Roll No -->
<div class="form-group">
<label for="roll_no">Roll No:</label>
<input type="text" id="roll_no" name="roll_no" required>
</div>
<!-- Course -->
<div class="form-group">
<label for="course">Course:</label>
<select id="course" name="course" required>
<option value="B.Tech">B.Tech</option>
<option value="M.Tech">M.Tech</option>
<option value="MBA">MBA</option>
<option value="PhD">PhD</option>
</select>
</div>
<!-- Branch -->
<div class="form-group">
<label for="branch">Branch:</label>
<input type="text" id="branch" name="branch" required>
</div>
<!-- Gender -->
<div class="form-group">
<label>Gender:</label>
<div class="radio-group">
<input type="radio" id="male" name="gender" value="Male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="Other">
<label for="other">Other</label>
</div>
</div>
<!-- Phone Number -->
<div class="form-group">
<label for="phone_number">Phone Number:</label>
<input type="tel" id="phone_number" name="phone_number" required>
</div>
<!-- Subject Choice (Checkboxes) -->
<div class="form-group">
<label for="subjects">Subject Choice:</label>
<div class="checkbox-group">
<input type="checkbox" id="subject1" name="subjects[]" value="Mathematics">
<label for="subject1">Mathematics</label>
<input type="checkbox" id="subject2" name="subjects[]" value="Physics">
<label for="subject2">Physics</label>
<input type="checkbox" id="subject3" name="subjects[]" value="Chemistry">
<label for="subject3">Chemistry</label>
<input type="checkbox" id="subject4" name="subjects[]" value="Computer Science">
<label for="subject4">Computer Science</label>
</div>
</div>
<!-- Hobbies (Checkboxes) -->
<div class="form-group">
<label for="hobbies">Hobbies:</label>
<div class="checkbox-group">
<input type="checkbox" id="hobby1" name="hobbies[]" value="Reading">
<label for="hobby1">Reading</label>
<input type="checkbox" id="hobby2" name="hobbies[]" value="Sports">
<label for="hobby2">Sports</label>
<input type="checkbox" id="hobby3" name="hobbies[]" value="Music">
<label for="hobby3">Music</label>
<input type="checkbox" id="hobby4" name="hobbies[]" value="Traveling">
<label for="hobby4">Traveling</label>
</div>
</div>
<!-- Testimonial -->
<div class="form-group">
<label for="testimonial">Testimonial:</label>
<textarea id="testimonial" name="testimonial" rows="4"></textarea>
</div>
<!-- Photo Upload -->
<div class="form-group">
<label for="photo">Upload Your Photo:</label>
<input type="file" id="photo" name="photo" accept="image/*" required>
</div>
<!-- Submit Button -->
<button type="submit" class="submit-btn">Submit</button>
</form>
</div>
</body>
</html>
Output:
