Scribd
Upload
55 views42 pages

Practical W DD

Uploaded by

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

Practical W DD

Uploaded by

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

PRACTICAL

HTML
1. Create an HTML document with following formatting – Bold, Italics,
Underline, Colors, Headings, Title, Font and Font Width, Background,
Paragraph, Line Brakes, Horizontal Line, Marquee text.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Formatting Example</title>
<style>
body {
background-color: #f0f8ff; /* Light blue background */
font-family: Arial, sans-serif;
}
.colored-text {
color: #ff6347; /* Tomato color */
}
.bold-text {
font-weight: bold;
}
.italic-text {
font-style: italic;
}
.underline-text {
text-decoration: underline;
}
.wide-font {
font-stretch: expanded;
}
</style>
</head>
<body>

<!-- Title -->


<h1>HTML Document with Various Formatting</h1>

<!-- Headings -->


<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>

<!-- Paragraph and Line Breaks -->


<p>This is a <span class="colored-text">paragraph</span> demonstrating
different formatting options in HTML. <br>
You can use various HTML tags and CSS properties to style text, background,
and layout.
</p>

<!-- Bold, Italics, and Underline -->


<p>This text is in <span class="bold-text">bold</span>, <span class="italic-
text">italics</span>, and
<span class="underline-text">underline</span>.</p>

<!-- Horizontal Line -->


<hr>

<!-- Marquee Text -->


<marquee behavior="scroll" direction="left" scrollamount="10">This is a
scrolling marquee text example.</marquee>

<!-- Font and Font Width -->


<p style="font-size: 20px;" class="wide-font">This text has a larger font size
and a wider font stretch.</p>
</body>
</html>

OUTPUT:
2. Create an HTML document with Ordered and Unordered lists, Images,
Internal and External linking.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Lists and Links Example</title>
</head>
<body>

<!-- Title -->


<h1>HTML Document with Lists, Images, and Links</h1>

<!-- Unordered List -->


<h2>Unordered List of Fruits</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ul>

<!-- Ordered List -->


<h2>Ordered List of Steps</h2>
<ol>
<li>Wake up</li>
<li>Brush your teeth</li>
<li>Have breakfast</li>
<li>Start your work</li>
</ol>

<!-- Images -->


<h2>Sample Image</h2>
<img src="https://via.placeholder.com/150" alt="Sample Image" width="150"
height="150">

<!-- Internal Linking -->


<h2>Internal Link</h2>
<p>To go back to the top of this page, click <a href="#top">here</a>.</p>

<!-- External Linking -->


<h2>External Link</h2>
<p>Visit <a href="https://www.example.com"
target="_blank">Example.com</a> for more information.</p>

<!-- Anchor for internal link -->


<a id="top"></a>

</body>
</html>

OUTPUT:
3. Create an HTML document for displaying the current semester’s
timetable.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semester Timetable</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
}
h1 {
text-align: center;
color: #2c3e50;
}
table {
width: 80%;
margin: 0 auto;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
}
th {
background-color: #3498db;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #e0f7fa;
}
</style>
</head>
<body>

<h1>Current Semester Timetable</h1>

<table>
<tr>
<th>Day/Time</th>
<th>9:00 - 10:00 AM</th>
<th>10:00 - 11:00 AM</th>
<th>11:00 - 12:00 PM</th>
<th>12:00 - 1:00 PM</th>
<th>2:00 - 3:00 PM</th>
<th>3:00 - 4:00 PM</th>
</tr>
<tr>
<th>Monday</th>
<td>Math</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Break</td>
<td>Computer Science</td>
<td>Elective</td>
</tr>
<tr>
<th>Tuesday</th>
<td>Biology</td>
<td>Math</td>
<td>Physics</td>
<td>Break</td>
<td>Chemistry</td>
<td>Computer Science</td>
</tr>
<tr>
<th>Wednesday</th>
<td>Chemistry</td>
<td>Math</td>
<td>Physics</td>
<td>Break</td>
<td>Elective</td>
<td>Computer Science</td>
</tr>
<tr>
<th>Thursday</th>
<td>Physics</td>
<td>Biology</td>
<td>Chemistry</td>
<td>Break</td>
<td>Math</td>
<td>Elective</td>
</tr>
<tr>
<th>Friday</th>
<td>Computer Science</td>
<td>Math</td>
<td>Biology</td>
<td>Break</td>
<td>Physics</td>
<td>Chemistry</td>
</tr>
</table>

</body>
</html>

OUTPUT:
4. Create a Student Registration Form (for taking inputs like Roll
Number, First Name, Last Name, Gender, Department, DOB) using
HTML, which has the following controls:
a. Text Box
b. Dropdown box
c. Option/radio button
d. Check boxes
e. Reset and Submit button.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}
h2 {
text-align: center;
color: #2c3e50;
}
label {
font-weight: bold;
margin-top: 10px;
display: block;
}
input[type="text"], input[type="date"], select {
width: 100%;
padding: 8px;
margin-top: 5px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
.radio-group, .checkbox-group {
margin-bottom: 15px;
}
.radio-group label, .checkbox-group label {
font-weight: normal;
margin-right: 10px;
}
.buttons {
text-align: center;
margin-top: 15px;
}
input[type="submit"], input[type="reset"] {
padding: 8px 20px;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
margin: 5px;
}
input[type="submit"] {
background-color: #3498db;
}
input[type="reset"] {
background-color: #e74c3c;
}
</style>
</head>
<body>

<form action="#" method="post">


<h2>Student Registration Form</h2>

<!-- Roll Number -->


<label for="rollNumber">Roll Number:</label>
<input type="text" id="rollNumber" name="rollNumber" required>

<!-- First Name -->


<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required>

<!-- Last Name -->


<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" required>

<!-- Gender -->


<label>Gender:</label>
<div class="radio-group">
<input type="radio" id="male" name="gender" value="Male" required>
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="Female"


required>
<label for="female">Female</label>

<input type="radio" id="other" name="gender" value="Other"


required>
<label for="other">Other</label>
</div>

<!-- Department -->


<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="Electronics">Electronics</option>
<option value="Mechanical">Mechanical</option>
<option value="Civil">Civil</option>
<option value="Biotechnology">Biotechnology</option>
</select>

<!-- Date of Birth -->


<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>

<!-- Agreement Checkboxes -->


<div class="checkbox-group">
<input type="checkbox" id="agree" name="agreement" required>
<label for="agree">I agree to the terms and conditions</label>
</div>

<!-- Buttons -->


<div class="buttons">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</div>
</form>

</body>
</html>

OUTPUT:
JAVASCRIPT
1. Write event-driven programs in JavaScript for the following:
a. Enter a number and on click of a button print its factors.
b. Print the smallest of five numbers entered by the user.
c. Find the factorial of a number entered by the user.
d. Take a number in an input text box, on click of a button, display its
multiplication table.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Find Factors</title>
</head>
<body>
<h2>Find Factors of a Number</h2>
<input type="number" id="number" placeholder="Enter a number">
<button onclick="findFactors()">Find Factors</button>
<p id="factors"></p>

<script>
function findFactors() {
const num = parseInt(document.getElementById("number").value);
let result = "Factors of " + num + " are: ";
for (let i = 1; i <= num; i++) {
if (num % i === 0) {
result += i + " ";
}
}
document.getElementById("factors").textContent = result;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Find Smallest Number</title>
</head>
<body>
<h2>Find the Smallest of Five Numbers</h2>
<input type="number" id="num1" placeholder="Enter 1st number">
<input type="number" id="num2" placeholder="Enter 2nd number">
<input type="number" id="num3" placeholder="Enter 3rd number">
<input type="number" id="num4" placeholder="Enter 4th number">
<input type="number" id="num5" placeholder="Enter 5th number">
<button onclick="findSmallest()">Find Smallest</button>
<p id="smallest"></p>

<script>
function findSmallest() {
const numbers = [
parseInt(document.getElementById("num1").value),
parseInt(document.getElementById("num2").value),
parseInt(document.getElementById("num3").value),
parseInt(document.getElementById("num4").value),
parseInt(document.getElementById("num5").value)
];
const smallest = Math.min(...numbers);
document.getElementById("smallest").textContent = "Smallest number
is: " + smallest;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Find Factorial</title>
</head>
<body>
<h2>Find Factorial of a Number</h2>
<input type="number" id="factorialNumber" placeholder="Enter a number">
<button onclick="findFactorial()">Find Factorial</button>
<p id="factorialResult"></p>

<script>
function findFactorial() {
const num =
parseInt(document.getElementById("factorialNumber").value);
let factorial = 1;
for (let i = 1; i <= num; i++) {
factorial *= i;
}
document.getElementById("factorialResult").textContent = "Factorial of "
+ num + " is: " + factorial;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiplication Table</title>
</head>
<body>
<h2>Display Multiplication Table</h2>
<input type="number" id="tableNumber" placeholder="Enter a number">
<button onclick="displayTable()">Show Table</button>
<div id="multiplicationTable"></div>

<script>
function displayTable() {
const num = parseInt(document.getElementById("tableNumber").value);
let table = "<h3>Multiplication Table for " + num + "</h3>";
for (let i = 1; i <= 10; i++) {
table += num + " x " + i + " = " + (num * i) + "<br>";
}
document.getElementById("multiplicationTable").innerHTML = table;
}
</script>
</body>
</html>

OUTPUT:
2. Use the Student Registration Form created above and add functions
to perform the following checks:
a. Student id is a 10-digit alphanumeric value
b. Name should be an alphabetical value (String)
c. Non-empty fields like Age.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form with Validation</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}
h2 {
text-align: center;
color: #2c3e50;
}
label {
font-weight: bold;
margin-top: 10px;
display: block;
}
input[type="text"], input[type="date"], select {
width: 100%;
padding: 8px;
margin-top: 5px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
.radio-group, .checkbox-group {
margin-bottom: 15px;
}
.radio-group label, .checkbox-group label {
font-weight: normal;
margin-right: 10px;
}
.buttons {
text-align: center;
margin-top: 15px;
}
input[type="submit"], input[type="reset"] {
padding: 8px 20px;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
margin: 5px;
}
input[type="submit"] {
background-color: #3498db;
}
input[type="reset"] {
background-color: #e74c3c;
}
.error {
color: red;
font-size: 0.9em;
}
</style>
</head>
<body>

<form id="registrationForm" onsubmit="return validateForm()">


<h2>Student Registration Form</h2>
<!-- Roll Number -->
<label for="rollNumber">Student ID:</label>
<input type="text" id="rollNumber" name="rollNumber" required>
<div id="rollNumberError" class="error"></div>

<!-- First Name -->


<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" required>
<div id="firstNameError" class="error"></div>

<!-- Last Name -->


<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" required>
<div id="lastNameError" class="error"></div>

<!-- Age -->


<label for="age">Age:</label>
<input type="text" id="age" name="age" required>
<div id="ageError" class="error"></div>

<!-- Gender -->


<label>Gender:</label>
<div class="radio-group">
<input type="radio" id="male" name="gender" value="Male" required>
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="Female"


required>
<label for="female">Female</label>

<input type="radio" id="other" name="gender" value="Other"


required>
<label for="other">Other</label>
</div>

<!-- Department -->


<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="Electronics">Electronics</option>
<option value="Mechanical">Mechanical</option>
<option value="Civil">Civil</option>
<option value="Biotechnology">Biotechnology</option>
</select>

<!-- Date of Birth -->


<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<div id="dobError" class="error"></div>

<!-- Agreement Checkboxes -->


<div class="checkbox-group">
<input type="checkbox" id="agree" name="agreement" required>
<label for="agree">I agree to the terms and conditions</label>
</div>

<!-- Buttons -->


<div class="buttons">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</div>
</form>

<script>
function validateForm() {
let isValid = true;

// Validate Student ID
const rollNumber = document.getElementById("rollNumber").value;
const rollNumberPattern = /^[a-zA-Z0-9]{10}$/;
if (!rollNumberPattern.test(rollNumber)) {
document.getElementById("rollNumberError").textContent = "Student
ID must be a 10-digit alphanumeric value.";
isValid = false;
} else {
document.getElementById("rollNumberError").textContent = "";
}

// Validate First Name


const firstName = document.getElementById("firstName").value;
if (!/^[a-zA-Z]+$/.test(firstName)) {
document.getElementById("firstNameError").textContent = "First
Name must contain only alphabetical characters.";
isValid = false;
} else {
document.getElementById("firstNameError").textContent = "";
}

// Validate Last Name


const lastName = document.getElementById("lastName").value;
if (!/^[a-zA-Z]+$/.test(lastName)) {
document.getElementById("lastNameError").textContent = "Last Name
must contain only alphabetical characters.";
isValid = false;
} else {
document.getElementById("lastNameError").textContent = "";
}
// Validate Age (non-empty numeric value)
const age = document.getElementById("age").value;
if (age === "" || isNaN(age) || age <= 0) {
document.getElementById("ageError").textContent = "Please enter a
valid age.";
isValid = false;
} else {
document.getElementById("ageError").textContent = "";
}

// Ensure Date of Birth is filled


const dob = document.getElementById("dob").value;
if (!dob) {
document.getElementById("dobError").textContent = "Please select a
valid date of birth.";
isValid = false;
} else {
document.getElementById("dobError").textContent = "";
}

return isValid;
}
</script>

</body>
</html>

OUTPUT:
3. Create a form containing various HTML elements and perform
appropriate validations on each of them while submitting the form.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Comprehensive Form with Validations</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 100%;
}
h2 {
text-align: center;
color: #2c3e50;
}
label {
font-weight: bold;
margin-top: 10px;
display: block;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], select {
width: 100%;
padding: 8px;
margin-top: 5px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
.radio-group, .checkbox-group {
margin-bottom: 15px;
}
.radio-group label, .checkbox-group label {
font-weight: normal;
margin-right: 10px;
}
.buttons {
text-align: center;
margin-top: 15px;
}
input[type="submit"] {
padding: 8px 20px;
border: none;
border-radius: 4px;
background-color: #3498db;
color: #fff;
cursor: pointer;
}
.error {
color: red;
font-size: 0.9em;
}
</style>
</head>
<body>
<form id="userForm" onsubmit="return validateForm()">
<h2>Registration Form</h2>

<!-- Full Name -->


<label for="fullName">Full Name:</label>
<input type="text" id="fullName" name="fullName">
<div id="fullNameError" class="error"></div>

<!-- Email -->


<label for="email">Email:</label>
<input type="email" id="email" name="email">
<div id="emailError" class="error"></div>

<!-- Password -->


<label for="password">Password:</label>
<input type="password" id="password" name="password">
<div id="passwordError" class="error"></div>

<!-- Age -->


<label for="age">Age:</label>
<input type="text" id="age" name="age">
<div id="ageError" class="error"></div>

<!-- Gender -->


<label>Gender:</label>
<div class="radio-group">
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label>
</div>
<div id="genderError" class="error"></div>

<!-- Hobbies -->


<label>Hobbies:</label>
<div class="checkbox-group">
<input type="checkbox" id="reading" name="hobbies"
value="Reading">
<label for="reading">Reading</label>
<input type="checkbox" id="sports" name="hobbies" value="Sports">
<label for="sports">Sports</label>
<input type="checkbox" id="music" name="hobbies" value="Music">
<label for="music">Music</label>
</div>
<div id="hobbiesError" class="error"></div>

<!-- Country -->


<label for="country">Country:</label>
<select id="country" name="country">
<option value="">Select Country</option>
<option value="USA">USA</option>
<option value="India">India</option>
<option value="Canada">Canada</option>
<option value="Australia">Australia</option>
</select>
<div id="countryError" class="error"></div>

<!-- Date of Birth -->


<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
<div id="dobError" class="error"></div>

<!-- Submit Button -->


<div class="buttons">
<input type="submit" value="Register">
</div>
</form>

<script>
function validateForm() {
let isValid = true;

// Validate Full Name (only letters and spaces)


const fullName = document.getElementById("fullName").value;
if (!/^[a-zA-Z\s]+$/.test(fullName) || fullName.trim() === "") {
document.getElementById("fullNameError").textContent = "Full Name
should contain only letters and spaces.";
isValid = false;
} else {
document.getElementById("fullNameError").textContent = "";
}

// Validate Email
const email = document.getElementById("email").value;
if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
document.getElementById("emailError").textContent = "Enter a valid
email address.";
isValid = false;
} else {
document.getElementById("emailError").textContent = "";
}

// Validate Password (minimum 6 characters)


const password = document.getElementById("password").value;
if (password.length < 6) {
document.getElementById("passwordError").textContent = "Password
must be at least 6 characters.";
isValid = false;
} else {
document.getElementById("passwordError").textContent = "";
}

// Validate Age (only numbers)


const age = document.getElementById("age").value;
if (!/^\d+$/.test(age) || age < 1 || age > 120) {
document.getElementById("ageError").textContent = "Enter a valid
age between 1 and 120.";
isValid = false;
} else {
document.getElementById("ageError").textContent = "";
}

// Validate Gender (one option must be selected)


if (!document.querySelector('input[name="gender"]:checked')) {
document.getElementById("genderError").textContent = "Select your
gender.";
isValid = false;
} else {
document.getElementById("genderError").textContent = "";
}

// Validate Hobbies (at least one checkbox should be checked)


if (!document.querySelector('input[name="hobbies"]:checked')) {
document.getElementById("hobbiesError").textContent = "Select at
least one hobby.";
isValid = false;
} else {
document.getElementById("hobbiesError").textContent = "";
}

// Validate Country (one option must be selected)


const country = document.getElementById("country").value;
if (country === "") {
document.getElementById("countryError").textContent = "Select your
country.";
isValid = false;
} else {
document.getElementById("countryError").textContent = "";
}

// Validate Date of Birth (non-empty)


const dob = document.getElementById("dob").value;
if (!dob) {
document.getElementById("dobError").textContent = "Please enter
your date of birth.";
isValid = false;
} else {
document.getElementById("dobError").textContent = "";
}

return isValid;
}
</script>
</body>
</html>
OUTPUT:
PHP
1. Write a PHP script to print the sum of even digits of a number.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Even Digits Sum</title>
</head>
<body>
<form method="POST">
<label for="number">Enter a number:</label>
<input type="text" id="number" name="number" required>
<button type="submit">Submit</button>
</form>

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$number = $_POST['number'];

// Function to calculate the sum of even digits


function sumOfEvenDigits($number) {
$sum = 0;
$digits = str_split($number); // Split the number into individual digits

foreach ($digits as $digit) {


if (is_numeric($digit) && $digit % 2 === 0) {
$sum += $digit;
}
}
return $sum;
}

echo "<p>The sum of even digits in $number is: " .


sumOfEvenDigits($number) . "</p>";
}
?>
</body>
</html>

OUTPUT:
2. Write a script in PHP to display a Multiplication Table.

<!DOCTYPE html>
<html>

<body>
<center>
<h1 style="color: green;">
MULTIPLICATION TABLE
</h1>

<h3>
Program to print multiplication<br>
table of any number in PHP
</h3>

<form method="POST">
Enter a number:
<input type="text" name="number">

<input type="Submit"
value="Get Multiplication Table">
</form>
</center>
</body>

</html>

<?php
if($_POST) {
$num = $_POST["number"];
echo nl2br("<p style='text-align: center;'>
Multiplication Table of $num: </p>
");

for ($i = 1; $i <= 10; $i++) {


echo ("<p style='text-align: center;'>$num"
. " X " . "$i" . " = "
. $num * $i . "</p>
");
}
}
?>

OUTPUT:

3. Design a Student Registration form, using appropriate input fields


consisting of following:
a. Roll Number
b. First Name
c. Last Name
d. Gender
e. Department
f. DOB
Submit and retrieve the form data using the $_POST variable and
display it.

INDEX.PHP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Student Registration Form</title>
</head>
<body>
<h2>Student Registration Form</h2>
<form action="process.php" method="POST">
<label for="rollNumber">Roll Number:</label>
<input type="text" id="rollNumber" name="rollNumber"
required><br><br>

<label for="firstName">First Name:</label>


<input type="text" id="firstName" name="firstName" required><br><br>

<label for="lastName">Last Name:</label>


<input type="text" id="lastName" name="lastName" required><br><br>

<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="Male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female"
required>
<label for="female">Female</label><br><br>

<label for="department">Department:</label>
<select id="department" name="department" required>
<option value="Computer Science">Computer Science</option>
<option value="Mathematics">Mathematics</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
</select><br><br>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob" required><br><br>

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


</form>
</body>
</html>

PROCESS.PHP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Confirmation</title>
</head>
<body>
<h2>Registration Confirmation</h2>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$rollNumber = htmlspecialchars($_POST['rollNumber']);
$firstName = htmlspecialchars($_POST['firstName']);
$lastName = htmlspecialchars($_POST['lastName']);
$gender = htmlspecialchars($_POST['gender']);
$department = htmlspecialchars($_POST['department']);
$dob = htmlspecialchars($_POST['dob']);
echo "<p><strong>Roll Number:</strong> $rollNumber</p>";
echo "<p><strong>First Name:</strong> $firstName</p>";
echo "<p><strong>Last Name:</strong> $lastName</p>";
echo "<p><strong>Gender:</strong> $gender</p>";
echo "<p><strong>Department:</strong> $department</p>";
echo "<p><strong>Date of Birth:</strong> $dob</p>";
} else {
echo "<p>No data submitted.</p>";
}
?>
</body>
</html>

OUTPUT:
index.php

process.php

You might also like