JKLMN
JKLMN
Course: MCA
MARKS
1
1. Create an HTML form that collects the following information from users:
• Full Name (text input)
• Email (email input)
• Password (password input)
• Gender (radio buttons)
• Hobbies (checkboxes)
• A drop-down menu to select a country
• A text area for additional comments
• A submit button
<!DOCTYPE html>
<html lang="en">
<head>
<title>User Information Form</title>
</head>
<body>
<Full Name>
<br><br>
<Email>
<label for="email">Email:</label>
<br><br>
<Passwords>
2
<label for="password">Password:</label>
<br><br>
<Gender>
<label>Gender:</label>
<label for="male">Male</label>
<label for="female">Female</label>
<label for="other">Other</label>
<br><br>
<Hobbies>
<label>Hobbies:</label>
<label for="hobby1">Reading</label>
<label for="hobby2">Traveling</label>
<label for="hobby3">Sports</label>
<br><br>
3
<Country>
<label for="country">Country:</label>
<option value="canada">Canada</option>
<option value="india">India</option>
<option value="australia">Australia</option>
</select>
<br><br>
<Additional Comments>
<br><br>
<Submit Button>
<button type="submit">Submit</button>
</form>
</body>
</html>
<?php
$name=$_POST["full-name"];
echo "$name<br/>";
$email=$_POST["email"];
4
echo"$email<br/>";
$password=$_POST["password"];
echo"$password<br/>";
if(isset($_POST['gender']))
$gender=$_POST['gender'];
if(isset($_POST["hobbies"]))
foreach($_POST['hobbies']as $myhobby)
if(isset($_POST['country']))
foreach($_POST['country'] as $country)
$comment=$_POST["comments"];
echo "$comment<br/>";
?>
5
OUTPUT:
Home.html
<!DOCTYPE html>
6
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home Page</title>
<style>
body {
text-align: center;
margin: 50px;
a{
text-decoration: none;
color: blue;
font-weight: bold;
</style>
</head>
<body>
<h1>Home Page</h1>
<p>Welcome to my website!</p>
</body></html>
7
Aboutme.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About Me</title>
<style>
body {
text-align: center;
margin: 50px;
a{
text-decoration: none;
color: blue;
font-weight: bold;
</style>
</head>
<body>
<h1>About Me</h1>
8
</body></html>
OUTPUT:
<!DOCTYPE html>
9
<html>
<head>
<style>
.container {
display: flex;
}
.color-block {
width: 13.33%;
height: 100px;
}
.orange {
background-color: orange;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.text {
color: white;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="color-block orange">
<p class="text">ORANGE</p>
</div>
10
<div class="color-block red">
<p class="text">RED</p>
</div>
<div class="color-block green">
<p class="text">GREEN</p>
</div>
</div>
<div class="container">
<div class="color-block blue">
<p class="text">BLUE</p>
</div>
<div class="color-block red">
</div>
<div class="color-block green">
</div>
</div>
</body>
</html>
OUTPUT:
11
4. Build an application using HTML, Java script to do the following tasks. When the
form runs in the Browser fill the textboxes with data. Write JavaScript code that
verifies that all textboxes has been filled. If a textboxes has been left empty, popup an
alert indicating which textbox has been left empty.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Validation</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
input {
display: block;
margin: 10px 0;
padding: 8px;
width: 300px;
}
button {
padding: 10px 15px;
background-color: blue;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Form Validation Example</h2>
<form id="myForm">
12
<input type="text" id="fullName" placeholder="Full Name" required>
<input type="email" id="email" placeholder="Email" required>
<input type="password" id="password" placeholder="Password" required>
<input type="text" id="gender" placeholder="Gender" required>
<input type="text" id="hobbies" placeholder="Hobbies" required>
<button type="button" onclick="validateForm()">Submit</button>
</form>
<script>
function validateForm() {
const fullName = document.getElementById('fullName').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const gender = document.getElementById('gender').value;
const hobbies = document.getElementById('hobbies').value;
if (!fullName) {
alert("Full Name is empty.");
return;
}
if (!email) {
alert("Email is empty.");
return;
}
if (!password) {
alert("Password is empty.");
return;
}
if (!gender) {
alert("Gender is empty.");
return;
}
if (!hobbies) {
alert("Hobbies are empty.");
return;
}
13
alert("Form submitted successfully!");
</script>
</body>
</html>
OUTPUT:
5. Create an HTML table to display a schedule with days of the week and time slots.
Include features like table headers, rowspan, colspan, and table borders.
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weekly Schedule</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Weekly Schedule</h2>
<table>
<thead>
<tr>
<th rowspan="2">Time</th>
<th colspan="5">Days of the Week</th>
</tr>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
15
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>
<tbody>
<tr>
<td>8:00 AM - 9:00 AM</td>
<td>Math</td>
<td>English</td>
<td>Science</td>
<td>History</td>
<td>Physical Education</td>
</tr>
<tr>
<td>9:00 AM - 10:00 AM</td>
<td>Art</td>
<td>Math</td>
<td>English</td>
<td>Science</td>
<td>History</td>
</tr>
<tr>
<td>10:00 AM - 11:00 AM</td>
<td colspan="5">Break</td>
</tr>
<tr>
<td>11:00 AM - 12:00 PM</td>
<td>Science</td>
<td>History</td>
<td>Math</td>
<td>English</td>
<td>Art</td>
</tr>
<tr>
16
<td>12:00 PM - 1:00 PM</td>
<td colspan="5">Lunch</td>
</tr>
<tr>
<td>1:00 PM - 2:00 PM</td>
<td>Physical Education</td>
<td>Science</td>
<td>History</td>
<td>Math</td>
<td>English</td>
</tr>
<tr>
<td>2:00 PM - 3:00 PM</td>
<td>English</td>
<td>Art</td>
<td>Physical Education</td>
<td>Science</td>
<td>History</td>
</tr>
</tbody>
</table>
</body>
</html>
OUTPUT:
17