Scribd
Upload
3 views

gfn

fghf

Uploaded by

anubhav.gcetj
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
3 views

gfn

fghf

Uploaded by

anubhav.gcetj
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/ 31

GOVERNMENT COLLEGE OF ENGINEERING

AND TECHNOLOGY

Name: Arshiva Verma

Enrollment No: 231103035

Course Name: Web Technology


Lab

Course Code: CSP3313

Semester: 3RD

Branch: Computer Science &


Engineering

Submitted To: Er. Yawar Azad


INDEX
Page
S. No. Practical Name Remarks
No.

Write a program to create an HTML page which has properly aligned


1
paragraphs with an image.

Write a program in HTML to create a Student Feedback Form (use textbox,


2
textarea, checkbox, radio button, select box, etc.).

Create a web page using frames. Divide the page into two parts with
3 Navigation links on the left-hand side (width=20%) and content on the
right-hand side (width=80%).

Create your class timetable using the table tag. Use External CSS to
4
format it.

Create your resume using HTML tags and then use inline CSS for
5
formatting.

6 Develop a JavaScript program to display today's date.

Develop a simple calculator for addition, subtraction, multiplication, and


7
division operations using JavaScript.

Write a JavaScript program that calculates the squares and cubes of the
8 numbers from 0 to 10 and outputs HTML text displaying the resulting
values in an HTML table format.

Write a JavaScript code that displays text “TEXT-GROWING” with


9 increasing font size at intervals of 100ms in RED color, and shrinks at 50pt
in BLUE color.

Write a PHP program to keep track of the number of visitors visiting the
10
webpage and to display this count with proper headings.

11 Write a PHP program to display today’s date in dd-mm-yyyy format.

12 Write a PHP program to check if a number is prime or not.

Create an HTML page containing textbox, submit/reset button. Write a


13
PHP program to display this information and store it in a text file.

Page | 1
PRACTICAL 1
Write a program to create an HTML page which has properly aligned paragraphs
with an image .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explore Jammu & Kashmir</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
}
.content {
display: flex;
align-items: center;
justify-content: space-between;
}
.text {
width: 60%;
padding: 20px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.image {
width: 35%;
}
.image img {
width: 100%;
border-radius: 8px;
}
p {

Page | 2
line-height: 1.6;
color: #555;
}
.highlight {
color: #006400;
font-weight: bold;
}
</style>
</head>
<body>

<div class="container">
<h1>Explore Jammu & Kashmir</h1>
<div class="content">
<div class="text">
<p><span class="highlight">Jammu & Kashmir</span> is a
beautiful region located in the northern part of India. Known for its
breathtaking landscapes, including the majestic Himalayas and serene lakes, it
is a place of immense natural beauty.</p>
<p>The state is famous for its <span
class="highlight">Kashmiri carpets</span>, traditional handicrafts, and
delicious cuisine. The region is also home to some of the most popular tourist
destinations, such as <span class="highlight">Srinagar</span>, <span
class="highlight">Gulmarg</span>, and <span
class="highlight">Pahalgam</span>.</p>
<p>Despite facing challenges, Jammu & Kashmir remains a
cultural treasure trove, attracting visitors from around the world who are
eager to experience its beauty, history, and hospitality.</p>
</div>
<div class="image">
<img src="image.jpg" alt="Scenic View of Jammu & Kashmir">
</div>
</div>
</div>

</body>
</html>

Page | 3
OUTPUT:

Page | 4
PRACTICAL 2
Write a program in HTML to create a Student Feedback Form (use textbox, textarea,
checkbox, radio button, select box, etc.).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Feedback Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Student Feedback Form</h1>
<form action="" method="post">
<div class="form-group">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" placeholder="Enter
your full name" required>
</div>

<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter
your email" required>
</div>

<div class="form-group">
<label>Rate your overall experience:</label>
<div class="rating">
<input type="radio" id="excellent" name="rating"
value="Excellent">
<label for="excellent">Excellent</label>
<input type="radio" id="good" name="rating" value="Good">
<label for="good">Good</label>
<input type="radio" id="average" name="rating"
value="Average">
<label for="average">Average</label>
<input type="radio" id="poor" name="rating" value="Poor">
<label for="poor">Poor</label>
</div>
</div>

<div class="form-group">
<label for="feedback">Your Feedback:</label>

Page | 5
<textarea id="feedback" name="feedback" rows="4"
placeholder="Write your comments here" required></textarea>
</div>

<div class="form-group">
<label for="subjects">Subjects:</label>
<select id="subjects" name="subjects" required>
<option value="oops">oops</option>
<option value="web">web tech</option>
<option value="business">business</option>
<option value="dsd">dsd</option>
</select>
</div>

<div class="form-group">
<label>Would you recommend this course to others?</label>
<input type="checkbox" id="recommend" name="recommend"
value="Yes">
<label for="recommend">Yes, I would recommend it!</label>
</div>

<button type="submit" class="submit-btn">Submit Feedback</button>


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

CSS FILE:

body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
margin: 0;
padding: 0;
}

.container {
width: 70%;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
color: #333;

Page | 6
}

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

label {
font-size: 16px;
color: #333;
}

input[type="text"], input[type="email"], textarea, select {


width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
}

textarea {
resize: vertical;
}

input[type="radio"], input[type="checkbox"] {
margin-right: 5px;
}

.rating {
display: flex;
justify-content: space-between;
max-width: 300px;
}

button.submit-btn {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
display: block;
margin: 0 auto;
}

button.submit-btn:hover {
background-color: #45a049;

Page | 7
}

@media screen and (max-width: 600px) {


.container {
width: 90%;
}

.rating {
flex-direction: column;
align-items: flex-start;
}
}

OUTPUT:

Page | 8
PRACTICAL 3
Create a web page using frames. Divide the page into two parts with Navigation links on the left-hand side
(width=20%) and content on the right-hand side (width=80%).

About.Html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
</head>
<body>
<h1>About Us</h1>
<p>We are a team of passionate individuals committed to providing
excellent services. Our mission is to deliver quality solutions that exceed
customer expectations.</p>
</body>
</html>

Contact.Html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
</head>
<body>
<h1>Contact Us</h1>
<p>If you have any questions, feel free to reach out to us. You can
contact us via email at [email protected] or call us at +1 (555) 123-4567.</p>
</body>
</html>

Page | 9
Output :

Page | 10
PRACTICAL 4
Create your class timetable using the table tag. Use External CSS to format it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Table</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Govt. College of Engineering & Technology, Jammu</h1>
<h2>B.E. 3rd Semester Computer Engineering Batch 2023</h2>
<h3>w.e.f. 1st August 2024</h3>
<table>
<thead>
<tr>
<th>Period</th>
<th>9:00-10:00</th>
<th>10:00-11:00</th>
<th>11:00-12:00</th>
<th>12:00-1:00</th>
<th>1:00-2:00</th>
<th>2:00-3:00</th>
<th>3:00-4:00</th>
<th>4:00-5:00</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Digital System Design (RC)</td>
<td>Web Technology (YA)</td>
<td>Entrepreneurship and Business Strategies (HUM-AA)</td>
<td></td>
<td>Break</td>
<td>Mathematics-III (HS)</td>
<td>Object Oriented Programming using C++ Lab
(TUI/MP)</td>
<td>Computer Programming Lab</td>
</tr>
<tr>

Page | 11
<td>Tuesday</td>
<td>Entrepreneurship and Business Strategies (T)</td>
<td>Object Oriented Programming using C++ (TUI)</td>
<td>Digital System Design Lab (RC)</td>
<td>MOOC</td>
<td>Break</td>
<td>Web Technology (YA)</td>
<td>Mathematics-III (HS)</td>
<td>Training Placement & Counselling</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Computer Organization & Architecture (AA-1)</td>
<td>Object Oriented Programming using C++ (TUI)</td>
<td>Object Oriented Programming Lab (TUI/MP)</td>
<td>Web Technology Lab (YA/SK)</td>
<td>Break</td>
<td>Digital System Design (T)</td>
<td>Entrepreneurship and Business Strategies (HUM-AA)</td>
<td>Doubt Clearing Class</td>
</tr>
<tr>
<td>Thursday</td>
<td>Mathematics-III (HS)</td>
<td>Web Technology (YA)</td>
<td>Computer Organization & Architecture (T) (AA-1)</td>
<td>Digital System Design (RC)</td>
<td>Break</td>
<td></td>
<td></td>
<td>Digital System Design Lab (RC)</td>
</tr>
<tr>
<td>Friday</td>
<td>Object Oriented Programming using C++ (TUI)</td>
<td>Digital System Design (RC)</td>
<td>Mathematics-III (HS)</td>
<td></td>
<td>Break</td>
<td>Cyber Ethics & Laws (ND)</td>
<td>Computer Organization & Architecture (AA-1)</td>
<td>Library/Co-Curricular</td>
</tr>
</tbody>
</table>
<div class="footer">
<p><strong>Faculty Abbreviations:</strong></p>

Page | 12
<p>HS: Dr. Heera Saini, ND: Er. Neeraj Dubey, RC: Er. Rohit
Chalotra, TUI: Er. Tawqeer Ul Islam, YA: Er. Yawar Azad, MP: Er. Menaka
Parihar, SK: Er. Sumit Kumar, HUM-AA:</p>
<p><strong>HOD: Computer Science & Engineering</strong></p>
</div>
</div>
</body>
</html>

CSS FILE:

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

.container {
max-width: 1200px;
margin: 20px auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1, h2, h3 {
text-align: center;
margin: 0 0 10px;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

thead th {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
}

tbody td {

Page | 13
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}

tr:nth-child(even) {
background-color: #f9f9f9;
}

tr:hover {
background-color: #f1f1f1;
}

.footer {
margin-top: 20px;
font-size: 0.9em;
color: #555;
text-align: center;
}

OUTPUT:

Page | 14
PRACTICAL 5
Create your resume using HTML tags and then use inline CSS for formatting.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resume - Arshiva Verma</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px; line-height: 1.6;">
<div style="border: 2px solid #4CAF50; padding: 20px; border-radius:
8px;">
<header style="text-align: center; margin-bottom: 20px;">
<h1 style="margin: 0; font-size: 2em;">Arshiva Verma</h1>
<p style="margin: 5px 0; font-size: 1.2em;">3rd Semester, Computer
Science Engineering</p>
<p style="margin: 0; font-size: 1em;">Govt. College of Engineering
& Technology, Jammu</p>
</header>
<section style="margin-bottom: 20px;">
<h2 style="margin-bottom: 10px; font-size: 1.5em; color:
#4CAF50;">Contact Information</h2>
<ul style="list-style-type: none; padding: 0;">
<li><strong>Email:</strong> [email protected]</li>
<li><strong>Phone:</strong> +91 9876543210</li>
<li><strong>Address:</strong> Jammu, Jammu and Kashmir,
India</li>
</ul>
</section>
<section style="margin-bottom: 20px;">
<h2 style="margin-bottom: 10px; font-size: 1.5em; color:
#4CAF50;">Education</h2>
<ul style="list-style-type: none; padding: 0;">
<li><strong>B.E. in Computer Science Engineering</strong></li>
<li>Govt. College of Engineering & Technology, Jammu</li>
<li>3rd Semester (2023-2027)</li>
<li>Current GPA: 8.6/10</li>
</ul>
</section>
<section style="margin-bottom: 20px;">
<h2 style="margin-bottom: 10px; font-size: 1.5em; color:
#4CAF50;">Skills</h2>
<ul style="list-style-type: disc; margin-left: 20px;">
<li>Programming Languages: C++, Python, HTML, CSS</li>
<li>Web Development: HTML, CSS, JavaScript</li>

Page | 15
<li>Database Management: MySQL</li>
<li>Problem-Solving and Algorithms</li>
<li>Team Collaboration and Leadership</li>
</ul>
</section>
<section style="margin-bottom: 20px;">
<h2 style="margin-bottom: 10px; font-size: 1.5em; color:
#4CAF50;">Projects</h2>
<ul style="list-style-type: none; padding: 0;">
<li><strong>Portfolio Website:</strong> Created a personal
portfolio website using HTML, CSS, and JavaScript.</li>
<li><strong>Library Management System:</strong> Developed a
system using Python and MySQL for managing library data.</li>
<li><strong>Quiz App:</strong> Designed an interactive quiz
application using JavaScript and Bootstrap.</li>
</ul>
</section>
<section style="margin-bottom: 20px;">
<h2 style="margin-bottom: 10px; font-size: 1.5em; color:
#4CAF50;">Achievements</h2>
<ul style="list-style-type: disc; margin-left: 20px;">
<li>Secured 1st position in a college-level coding
competition.</li>
<li>Completed Python Certification from Coursera.</li>
<li>Received "Best Team Player" award in a group project.</li>
</ul>
</section>
<section style="margin-bottom: 20px;">
<h2 style="margin-bottom: 10px; font-size: 1.5em; color:
#4CAF50;">Interests</h2>
<ul style="list-style-type: disc; margin-left: 20px;">
<li>Web Development</li>
<li>Artificial Intelligence and Machine Learning</li>
<li>Competitive Programming</li>
<li>Playing Badminton</li>
</ul>
</section>
<footer style="text-align: center; margin-top: 20px;">
<p style="font-size: 0.9em; color: #777;">This resume is created
using HTML and inline CSS.</p>
</footer>
</div>
</body>
</html>

Page | 16
OUTPUT:

Page | 17
PRACTICAL 6
Develop a JavaScript program to display today's date.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Today's Date</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px; }
#date {
font-size: 1.5em;
color: #4CAF50; }
</style>
</head>
<body>
<h1>Today's Date</h1>
<p id="date"></p>
<script src="script.js"></script>
</body>
</html>
JAVASCRIPT FILE :
function displayDate() {
const today = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day:
'numeric' };
const formattedDate = today.toLocaleDateString(undefined, options);
document.getElementById("date").textContent = formattedDate;
}
displayDate();

OUTPUT :

Page | 18
PRACTICAL 7
Develop a simple calculator for addition, subtraction, multiplication, and division
operations using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
.calculator {
display: inline-block;
text-align: left;
border: 2px solid #4CAF50;
padding: 20px;
border-radius: 8px;
}
.calculator input, .calculator button {
margin: 5px;
padding: 10px;
font-size: 1em;
}
#result {
font-size: 1.2em;
color: #4CAF50;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Simple Calculator</h1>
<div class="calculator">
<input type="number" id="num1" placeholder="Enter first number">
<br>
<input type="number" id="num2" placeholder="Enter second number">
<br>
<button onclick="add()">Add</button>
<button onclick="subtract()">Subtract</button>
<button onclick="multiply()">Multiply</button>
<button onclick="divide()">Divide</button>

Page | 19
<p id="result"></p>
</div>

<script src="calculator.js"></script>
</body>
</html>

Javascript File :

function add() {
const num1 = parseFloat(document.getElementById("num1").value);
const num2 = parseFloat(document.getElementById("num2").value);
const result = num1 + num2;
displayResult(result);
}

function subtract() {
const num1 = parseFloat(document.getElementById("num1").value);
const num2 = parseFloat(document.getElementById("num2").value);
const result = num1 - num2;
displayResult(result);
}

function multiply() {
const num1 = parseFloat(document.getElementById("num1").value);
const num2 = parseFloat(document.getElementById("num2").value);
const result = num1 * num2;
displayResult(result);
}

function divide() {
const num1 = parseFloat(document.getElementById("num1").value);
const num2 = parseFloat(document.getElementById("num2").value);
if (num2 !== 0) {
const result = num1 / num2;
displayResult(result);
} else {
displayResult("Error: Division by zero");
}
}

function displayResult(result) {
document.getElementById("result").textContent = `Result: ${result}`; }

Page | 20
OUTPUT :

Page | 21
PRACTICAL 8
Write a JavaScript program that calculates the squares and cubes of the numbers
from 0 to 10 and outputs HTML text displaying the resulting values in an HTML table
format.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Squares and Cubes Table</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
table {
margin: 0 auto;
border-collapse: collapse;
width: 50%;
}
table, th, td {
border: 1px solid #4CAF50;
}
th, td {
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h1>Squares and Cubes Table</h1>
<div id="table-container"></div>

<script src="script.js"></script>
</body>
</html>

Page | 22
JAVASCRIPT FILE :

function generateTable() {
let htmlContent = `
<table>
<tr>
<th>Number</th>
<th>Square</th>
<th>Cube</th>
</tr>
`;
for (let i = 0; i <= 10; i++) {
const square = i * i;
const cube = i * i * i;
htmlContent += `
<tr>
<td>${i}</td>
<td>${square}</td>
<td>${cube}</td>
</tr>
`;
}
htmlContent += `</table>`;
document.getElementById("table-container").innerHTML = htmlContent;
}
generateTable();

OUTPUT :

Page | 23
PRACTICAL 9
Write a JavaScript code that displays text “TEXT-GROWING” with increasing font
size at intervals of 100ms in RED color, and shrinks at 50pt in BLUE color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Growing and Shrinking</title>
<script src="script.js" defer></script>
</head>
<body>
</body>
</html>

JAVASCRIPT FILE :

let text = document.createElement('div');


document.body.appendChild(text);
let size = 10;
let growing = true;

function updateText() {
text.style.fontSize = size + 'pt';
text.style.color = growing ? 'red' : 'blue';
text.textContent = growing ? 'TEXT-GROWING' : 'TEXT SHRINKING';

if (growing) {
size++;
if (size >= 50) {
growing = false;
}
} else {
size--;
if (size <= 5) {
clearInterval(interval);
}
}
}

let interval = setInterval(updateText, 100);

Page | 24
OUTPUT :

Page | 25
PRACTICAL 10
Write a PHP program to keep track of the number of visitors visiting the webpage and to display this count with
proper headings.

<?php
$visitor_file = 'visitor_count.txt';
if (!file_exists($visitor_file)) {
file_put_contents($visitor_file, 0);
}
$visitor_count = (int)file_get_contents($visitor_file);
$visitor_count++;

file_put_contents($visitor_file, $visitor_count);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visitor Count</title>
</head>
<body>
<h1>Welcome to the Page!</h1>
<h2>Number of Visitors: <?php echo $visitor_count; ?></h2>
</body>
</html>

OUTPUT :

Page | 26
PRACTICAL 11
Write a PHP program to display today’s date in dd-mm-yyyy format.

<?php

$current_date = date('d-m-Y');

echo "Today's date is: " . $current_date;


?>

OUTPUT :

Page | 27
PRACTICAL 12
Write a PHP program to check if a number is prime or not.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$number = $_POST['number'];
function isPrime($number) {
if ($number <= 1) {
return false;
}
for ($i = 2; $i <= sqrt($number); $i++) {
if ($number % $i == 0) {
return false;
}
}
return true;
}

if (isPrime($number)) {
echo $number . " is a prime number.";
} else {
echo $number . " is not a prime number.";
}
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prime Number Check</title>
</head>
<body>
<form method="post">
<label for="number">Enter a number:</label>
<input type="number" id="number" name="number" required>
<input type="submit" value="Check Prime">
</form>
</body>
</html>

Page | 28
OUTPUT:

Page | 29
PRACTICAL 13
Create an HTML page containing textbox, submit/reset button. Write a PHP
program to display this information and store it in a text file.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$input_data = $_POST['input_data'];
$file = 'user_input.txt';

file_put_contents($file, $input_data . PHP_EOL, FILE_APPEND);

echo "<h3>Input Received:</h3>";


echo "<p>" . htmlspecialchars($input_data) . "</p>";
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Form</title>
</head>
<body>
<h2>Enter some information</h2>
<form method="post">
<label for="input_data">Enter Text:</label>
<input type="text" id="input_data" name="input_data" required>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>

OUTPUT :

Page | 30

You might also like