Scribd
Upload
6 views7 pages

Job Application Form Bhrigu 0068

The document outlines a job application form for Presidency University, including fields for personal information, education, experience, and expected salary. It features HTML for structure, CSS for styling, and JavaScript for form functionality such as submission, clearing, and previewing data. The form captures essential applicant details and saves them to local storage upon submission.

Uploaded by

bhrighugupta
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
6 views7 pages

Job Application Form Bhrigu 0068

The document outlines a job application form for Presidency University, including fields for personal information, education, experience, and expected salary. It features HTML for structure, CSS for styling, and JavaScript for form functionality such as submission, clearing, and previewing data. The form captures essential applicant details and saves them to local storage upon submission.

Uploaded by

bhrighugupta
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/ 7

Job Application Form

CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Application Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="heading">
<h2 style="text-align: center;">Presidency University Job Application
Form</h2>
</div>
<form id="jobForm">
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required>
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" required>
</div>
<div class="form-group">
<label for="education">Education Qualification:</label>
<select id="education" name="education" required>
<option value="">Select</option>
<option value="BTech">BTech</option>
<option value="MTech">MTech</option>
<option value="PhD">PhD</option>
</select>
</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" required></textarea>
</div>
<div class="form-group">
<label for="ctc">Current CTC (in LPA):</label>
<input type="number" id="ctc" name="ctc" min="0" required>
</div>
<div class="form-group">
<label for="role">Role Applying For:</label>
<select id="role" name="role" required>
<option value="">Select</option>
<option value="Assistant Professor">Assistant
Professor</option>
<option value="Associate Professor">Associate
Professor</option>
<option value="Professor">Professor</option>
</select>
</div>
<div class="form-group">
<label for="experience">Number of Years Experience:</label>
<input type="number" id="experience" name="experience" min="0"
required>
</div>
<div class="form-group">
<label for="latestOrg">Latest Organization Worked For:</label>
<input type="text" id="latestOrg" name="latestOrg" required>
</div>
<div class="form-group">
<label for="noticePeriod">Notice Period (Months):</label>
<input type="number" id="noticePeriod" name="noticePeriod" min="0"
required>
</div>
<div class="form-group">
<label for="expectedSalary">Expected Salary (in LPA):</label>
<input type="number" id="expectedSalary" name="expectedSalary"
min="0" required>
</div>
<div class="form-buttons">
<button type="submit" id="submitBtn">Submit</button>
<button type="button" id="clearBtn">Clear</button>
<button type="button" id="previewBtn">Preview</button>
</div>
</form>
<div id="previewArea" class="preview-area"></div>
<script src="script.js"></script>
</body>
</html>

body {
font-family: sans-serif;
margin: 20px;
background-color: #ffffff;
color: #000000;
background-image: url("bg.avif");
}

form {
width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #a4a4a4;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.heading {
background-color: #c4c4c4;
width: 600px;
margin: 20px auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
width: calc(100% - 22px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}

textarea {
height: 100px;
resize: vertical;
}

.form-buttons {
text-align: center;
margin-top: 20px;
}

button {
padding: 10px 20px;
margin: 0 10px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: white;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #0056b3;
}

#clearBtn {
background-color: #6c757d;
}

#clearBtn:hover {
background-color: #5a6268;
}

#previewBtn {
background-color: #28a745;
}

#previewBtn:hover {
background-color: #218838;
}

.preview-area {
width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
display: none;
}

.preview-area p {
margin-bottom: 10px;
}

document.getElementById('submitBtn').addEventListener('click', function(event)
{
event.preventDefault();
const formData = {
firstName: document.getElementById('firstName').value,
lastName: document.getElementById('lastName').value,
education: document.getElementById('education').value,
dob: document.getElementById('dob').value,
address: document.getElementById('address').value,
ctc: document.getElementById('ctc').value,
role: document.getElementById('role').value,
experience: document.getElementById('experience').value,
latestOrg: document.getElementById('latestOrg').value,
noticePeriod: document.getElementById('noticePeriod').value,
expectedSalary: document.getElementById('expectedSalary').value
};
localStorage.setItem('jobFormData', JSON.stringify(formData));
alert('Form submitted and data saved!');
});

document.getElementById('clearBtn').addEventListener('click', function() {
document.getElementById('jobForm').reset();
});

document.getElementById('previewBtn').addEventListener('click', function() {
const form = document.getElementById('jobForm')
previewHTML = `
<h3>Preview Information</h3>
<p><strong>Name:</strong> ${form.firstName.value}
${form.lastName.value}</p>
<p><strong>Education Qualification:</strong>
${form.education.value}</p>
<p><strong>Date of Birth:</strong> ${form.dob.value}</p>
<p><strong>Address:</strong> ${form.address.value}</p>
<p><strong>Current CTC:</strong> ${form.ctc.value} LPA</p>
<p><strong>Role:</strong> ${form.role.value}</p>
<p><strong>Experience:</strong> ${form.experience.value}
years</p>
<p><strong>Latest Organization:</strong>
${form.latestOrg.value}</p>
<p><strong>Notice Period:</strong> ${form.noticePeriod.value}
months</p>
<p><strong>Expected Salary:</strong>
${form.expectedSalary.value} LPA</p>
`;
previewArea.innerHTML = previewHTML;
previewArea.style.display = 'block';
});

OUTPUT:

You might also like