INTERNET CONCEPTS AND WEB DESIGN MCSL 016
Create a web page for employee leave management which should have an option to select a particular type of leave (CL, EL, Medical Leave, etc.), starting and end dates for applying for leave and submit button for submitting the leave form. It should have a button to go to the page where the complete details of remaining leaves are shown.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Leave Management</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 20px auto;
text-align: center;
}
form {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="date"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
box-sizing: border-box;
}
select, button {
padding: 8px;
margin-bottom: 10px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>Employee Leave Management</h2>
<form id="leaveForm">
<label for="leaveType">Select Leave Type:</label>
<select id="leaveType" name="leaveType">
<option value="CL">Casual Leave (CL)</option>
<option value="EL">Earned Leave (EL)</option>
<option value="Medical">Medical Leave</option>
<!-- Add more leave types here -->
</select><br>
<label for="startDate">Start Date:</label>
<input type="date" id="startDate" name="startDate"><br>
<label for="endDate">End Date:</label>
<input type="date" id="endDate" name="endDate"><br>
<button type="submit">Submit Leave</button>
</form>
<button onclick="showLeaveDetails()">View Remaining Leaves</button>
</div>
<script>
function showLeaveDetails() {
// Redirect to the page showing remaining leave details
window.location.href = "leave_details.html";
}
</script>
</body></html>
No comments:
Post a Comment