BCA161-1: – INTRODUCTION TO WEB TECHNOLOGY
Practical -1
BY
Student Name: Keshav Arora
(Registration Number: 25215026)
1 BCA(A)
SUBMITTED TO-
Prof. Lata Yadav
SCHOOL OF SCIENCES
Design a Personal Information & Qualifications Form
General Requirements:
1. The form should be created using HTML5.
2. The form must be divided into two sections:
Personal Information
Qualifications
3. The form must include submit and reset buttons.
4. Apply CSS to style the form.
Codes:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Personal Information & Qualifications Form</TITLE>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
h2 {
text-align: center;
form {
width: 400px;
margin: 0 auto;
border: 1px black;
padding: 20px;
border-radius: 5px;
}
fieldset {
margin-bottom: 75px;
legend {
font-weight: bold;
label {
display: block;
margin-bottom: 15px;
input, select, textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
buttons{
text-align: center;
margin-top: 15px;
button {
padding: 8px 12px;
margin :5px;
</style>
</HEAD>
<body>
<h2>Personal Information & Qualifications</h2>
<form action="#" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" name="fullName">
<style>#fullName {
width: 95%;
padding: 5px;
margin-top: 5px;
}</style>
<br></br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<style>#email {
width: 95%;
padding: 5px;
margin-top: 5px;
}</style>
<br></br>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone">
<style>#phone {
width: 95%;
padding: 5px;
margin-top: 5px;
}</style>
<br></br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
<style>#dob {
width: 95%;
padding: 5px;
margin-top: 5px;
}</style>
<br></br>
<label for="address">Address:</label>
<textarea id="address" name="address" rows="3"></textarea>
<style>#address {
width: 95%;
padding: 5px;
margin-top: 5px;
}</style>
</fieldset>
<fieldset>
<legend>Qualifications</legend>
<label for="education">Highest Education:</label>
<select id="education" name="education">
<option value="">-- Select --</option>
<option value="highschool">High School</option>
<option value="bachelor">Bachelor's</option>
<option value="master">Master's</option>
<option value="phd">Ph.D.</option>
</select>
<style>#education {
width: 99%;
padding: 5px;
margin-top: 5px;
}</style>
<br></br>
<label for="field">Field of Study:</label>
<input type="text" id="field" name="field">
<style>#field {
width: 95%;
padding: 5px;
margin-top: 5px;
}</style>
<br></br>
<label for="skills">Skills:</label>
<textarea id="skills" name="skills" placeholder="e.g., Programming, Communication"
rows="2"></textarea>
<style>#skills {
width: 95%;
padding: 5px;
margin-top: 5px;
}</style>
<br></br>
<label for="experience">Years of Experience:</label>
<input type="number" id="experience" name="experience">
<style>#experience {
width: 95%;
padding: 5px;
margin-top: 5px;
}</style>
<br></br>
</fieldset>
<div class="buttons">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</div>
</form>
</body>
</HTML>
Output:
