Scribd
Upload
14 views5 pages

WEB TECHNOLOGY Exp2-2

Uploaded by

PRIYANSHU SINGHAL
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views5 pages

WEB TECHNOLOGY Exp2-2

Uploaded by

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

PRACTICAL: 2

AIM: Write HTML program to design an entry form for faculty details.

THEORY: In this lab, we designed an entry form to collect details for a student, employee, or faculty
member. The form collects information such as name, ID, email, department, gender, date of birth
(DOB), and position. It uses various form elements like text inputs, radio buttons, select options, and
more to ensure user-friendly data collection.
 Purpose and Scope:
 Purpose: The purpose of this lab is to design and implement an interactive HTML form
for collecting details of individuals, specifically for students, employees, and faculty
members. The form allows users to enter their personal and professional details such as
name, ID, email, department, gender, date of birth, and position.
 Scope: The scope of this lab is centered on building a user-friendly entry form using
HTML and CSS that can collect essential details from different users (students,
employees, and faculty members).
 Key HTML Form Elements Used:
1. <form> Tag: The <form> element defines a form that collects user input. It acts as a
container for all the input elements.
2. <input> Tag: The <input> element is used to create input fields where users can enter
various types of information.
3. <select> and <option> Tags: The <select> tag creates a dropdown list, and <option>
defines the items within the list. In this lab, we used a select dropdown to allow the user
to choose their gender.
4. Radio Button: Radio buttons are used when the user must select only one option from
a list of predefined choices.
5. Date of Birth (DOB) Field: The DOB is separated into three <input> fields: Day (dd),
Month (mm), and Year (yyyy). Each field accepts numbers within a defined range to
ensure proper format. This ensures the date is entered in a valid and expected format
(dd/mm/yyyy).
6. Submit Button: A submit button triggers the form submission. It sends the form data
to the server when clicked.
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Faculty Entry Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #000; /* Black background */
color: #ffffff; /* White text color for readability */
margin: 0;
padding: 20px;
}
.form-container {
background-color: #1c1c1c; /* Dark grey background for the form */
border-radius: 8px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
padding: 20px;
max-width: 600px;
margin: auto;
}
h2 {
text-align: center;
color: #ffffff; /* White heading */
}
label {
display: block;
margin: 10px 0 5px;
color: #dddddd; /* Light grey for labels */
}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #444; /* Dark border */
border-radius: 4px;
background-color: #333; /* Dark background for inputs */
color: #ffffff; /* White text for inputs */
}
margin: 0;
padding: 20px;
}
.form-container {
background-color: #1c1c1c; /* Dark grey background for the form */
border-radius: 8px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
padding: 20px;
max-width: 600px;
margin: auto; }
h2 {
text-align: center;
color: #ffffff; /* White heading */
}
label {
display: block;
margin: 10px 0 5px;
color: #dddddd; /* Light grey for labels */ }
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #444; /* Dark border */
border-radius: 4px;
background-color: #333; /* Dark background for inputs */
color: #ffffff; /* White text for inputs */
}
input[type="submit"] {
background-color: #28a745; /* Green button */
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover {
background-color: #218838; /* Darker green on hover */
}
</style>
</head>
<body>

<div class="form-container">
<h2>Faculty Entry Form</h2>
<form action="#" method="POST">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="phone">Phone Number:</label>


<input type="text" id="phone" name="phone" required>
<label for="department">Department:</label>
<select id="department" name="department" required>
<option value="">Select Department</option>
<option value="computer_science">Computer Science</option>
<option value="mathematics">Mathematics</option>
<option value="physics">Physics</option>
<option value="chemistry">Chemistry</option>
<option value="biology">Biology</option>
</select>
<label for="position">Position:</label>
<input type="text" id="position" name="position" required>

<label for="date_joined">Date Joined:</label>


<input type="date" id="date_joined" name="date_joined" required>

<label for="qualification">Highest Qualification:</label>


<input type="text" id="qualification" name="qualification" required>

<label for="experience">Years of Experience:</label>


<input type="number" id="experience" name="experience" required>

<label for="research_interests">Research Interests:</label>


<input type="text" id="research_interests" name="research_interests">

<label for="publications">Number of Publications:</label>


<input type="number" id="publications" name="publications">

<label for="address">Address:</label>
<input type="text" id="address" name="address" required>

<input type="submit" value="Submit">


</form>
</div>

</body>
</html>
OUTPUT:

You might also like