Scribd
Upload
19 views33 pages

Web Lab Ex

The document contains multiple HTML examples demonstrating various web pages and functionalities, including navigation, forms, and a simple calculator. It also includes Java servlet examples for handling login and data retrieval. Additionally, there are XML and XSL files for displaying person information and a registration form layout.

Uploaded by

Shiva kannan
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
19 views33 pages

Web Lab Ex

The document contains multiple HTML examples demonstrating various web pages and functionalities, including navigation, forms, and a simple calculator. It also includes Java servlet examples for handling login and data retrieval. Additionally, there are XML and XSL files for displaying person information and a registration form layout.

Uploaded by

Shiva kannan
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/ 33

EX 1

Page1.html
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<h1>This is Page 1</h1>
<p>Click the link below to go to Page 2:</p>
<a href="page2.html">Go to Page 2</a>
</body>
</html>

Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
</head>
<body>
<h1>This is Page 2</h1>
<p>You came from Page 1.</p>
<a href="page1.html">Back to Page 1</a>
</body>
</html>

Internal_nav.html
<!DOCTYPE html>
<html>
<head>
<title>Internal Navigation</title>
</head>
<body>

<h1 id="top">Welcome to Internal


Navigation</h1>
<p>Click the link to jump to the bottom of this
page:</p>
<a href="#bottom">Go to Bottom</a>

<!-- Filler to simulate scroll -->


<div style="height: 800px;"></div>

<h2 id="bottom">You have reached the


bottom!</h2>
<a href="#top">Back to Top</a>

</body>
</html>

EX 2
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 30px;
}
input, select, button {
padding: 10px;
margin: 5px;
font-size: 16px;
}
</style>
</head>
<body>

<h1>Simple Calculator</h1>

<form id="calcForm"
onsubmit="calculate(event)">
<input type="number" id="num1"
placeholder="Enter first number" required>

<select id="operator" required>


<option value="+">+</option>
<option value="-">−</option>
<option value="*">×</option>
<option value="/">÷</option>
<option value="%">%</option>
</select>

<input type="number" id="num2"


placeholder="Enter second number" required>

<button type="submit">Calculate</button>
</form>

<h2 id="result"></h2>

<script>
function calculate(event) {
event.preventDefault(); // Prevent page
reload

let num1 =
parseFloat(document.getElementById("num1").value);
let num2 =
parseFloat(document.getElementById("num2").value);
let op =
document.getElementById("operator").value;
let result;

switch (op) {
case '+': result = num1 + num2;
break;
case '-': result = num1 - num2;
break;
case '*': result = num1 * num2;
break;
case '/':
result = num2 !== 0 ? (num1 /
num2) : "Error: Division by zero";
break;
case '%':
result = num2 !== 0 ? (num1 %
num2) : "Error: Division by zero";
break;
default:
result = "Invalid operator";
}

document.getElementById("result").innerText =
"Result: " + result;
}
</script>

</body>
</html>

EX 3

College.html
<!DOCTYPE html>
<html>
<head>
<title>My College</title>

<!-- External CSS -->


<link rel="stylesheet" href="styles.css">

<!-- Internal CSS -->


<style>
.intro {
font-size: 18px;
color: #333;
margin-bottom: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
table, th, td {
border: 1px solid #999;
}
th, td {
padding: 10px;
text-align: left;
}
</style>
</head>
<body>

<h1 class="main-heading">ABC Engineering


College</h1>

<p class="intro">ABC Engineering College is


committed to academic excellence and innovation in
education.</p>

<!-- Inline CSS -->


<h2 style="color: darkblue; border-bottom: 2px
solid darkblue;">Departments</h2>
<ul>
<li>Computer Science and Engineering</li>
<li>Electrical and Electronics
Engineering</li>
<li>Mechanical Engineering</li>
<li>Civil Engineering</li>
</ul>

<h2>Contact Details</h2>
<table>
<tr>
<th>Office</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>Admin Office</td>
<td>[email protected]</td>
<td>+91-1234567890</td>
</tr>
<tr>
<td>Admission Cell</td>
<td>[email protected]</td>
<td>+91-9876543210</td>
</tr>
</table>

</body>
</html>

Styles.css
body {
font-family: Verdana, sans-serif;
background-color: #f0f4f8;
padding: 30px;
}

.main-heading {
color: #005a9c;
text-align: center;
border: 3px solid #005a9c;
padding: 10px;
border-radius: 10px;
background-color: #e0f0ff;
}

Ex 4

Person.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl"
href="person.xsl"?>

<people>
<person>
<name>John Doe</name>
<age>30</age>
<gender>Male</gender>
<email>[email protected]</email>
</person>
<person>
<name>Jane Smith</name>
<age>28</age>
<gender>Female</gender>
<email>[email protected]</email>
</person>
</people>

Person.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<head>
<title>Person Information</title>
<style>
body { font-family: Arial;
background-color: #f0f0f0; padding: 20px; }
table { border-collapse: collapse;
width: 100%; }
th, td { border: 1px solid #999;
padding: 10px; text-align: left; }
th { background-color: #005a9c;
color: white; }
</style>
</head>
<body>
<h2>Person Information</h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Email</th>
</tr>
<xsl:for-each
select="people/person">
<tr>
<td><xsl:value-of
select="name"/></td>

Ex 5

Registration.html
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #eef2f3;
padding: 30px;
}
.form-container {
width: 400px;
background-color: #fff;
padding: 25px;
margin: auto;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h2 {
text-align: center;
color: #333;
}
input, select {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 6px;
}
input[type="submit"] {
background-color: #0077cc;
color: white;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #005fa3;
}
</style>
</head>
<body>

<div class="form-container">
<h2>Registration Form</h2>
<form>
<label for="fullname">Full
Name:</label>
<input type="text" id="fullname"
name="fullname" required>

<label for="email">Email
Address:</label>
<input type="email" id="email"
name="email" required>

<label for="password">Password:</label>
<input type="password" id="password"
name="password" required>

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


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

<label for="gender">Gender:</label>
<select id="gender" name="gender"
required>
<option value="">--Select--
</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
<label for="course">Course:</label>
<input type="text" id="course"
name="course">

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


</form>
</div>

</body>
</html>

EX 6 your own ex image map

EX 7

Index.html
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<h1>Welcome to Our Website</h1>
<nav>
<ul>
<li><a href="about.html">About
Us</a></li>
<li><a href="services.html">Our
Services</a></li>
<li><a href="contact.html">Contact
Us</a></li>
</ul>
</nav>
</body>
</html>

About .html
<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
</head>
<body>
<h1>About Us</h1>
<p>This page contains information about our
company.</p>
<a href="index.html">Back to Home</a>
</body>
</html>
Services.html
<!DOCTYPE html>
<html>
<head>
<title>Our Services</title>
</head>
<body>
<h1>Our Services</h1>
<p>Details about the services we offer.</p>
<a href="index.html">Back to Home</a>
</body>
</html>

Contact.html
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
</head>
<body>
<h1>Contact Us</h1>
<p>Contact details and inquiry form.</p>
<a href="index.html">Back to Home</a>
</body>
</html>

EX 8
EmployeeLoginServlet.java

package servlet;
import jakarta.servlet.*;
import java.io.IOException;
import java.io.PrintWriter;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@WebServlet("/EmployeeLoginServlet")
public class EmployeeLoginServlet extends
HttpServlet {

protected void doPost(HttpServletRequest


request, HttpServletResponse response)
throws ServletException, IOException {

// Read parameters from the request


String username =
request.getParameter("username");
String password =
request.getParameter("password");

response.setContentType("text/html");
PrintWriter out = response.getWriter();

out.println("<html><body>");

if(username != null && password != null) {


// For demo, just print them. In real
apps, validate against DB.
out.println("<h2>Login Details</h2>");
out.println("<p>Username: " + username
+ "</p>");
out.println("<p>Password: " + password
+ "</p>");
} else {
out.println("<p>Missing username or
password!</p>");
}

out.println("</body></html>");
}

protected void doGet(HttpServletRequest


request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
}

login.html

<!DOCTYPE html>
<html>
<head>
<title>Employee Login</title>
</head>
<body>
<h2>Employee Login</h2>
<form action="EmployeeLoginServlet"
method="post">
<label for="username">Username:</label>
<input type="text" name="username"
id="username" required><br><br>

<label for="password">Password:</label>
<input type="password" name="password"
id="password" required><br><br>

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


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

EX 9
(i)

LoginServlet.java

package servlet;

import jakarta.servlet.*;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.*;
import java.io.*;

@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest
request, HttpServletResponse response)
throws ServletException, IOException {

String username =
request.getParameter("username");
String password =
request.getParameter("password");

response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html><body>");
out.println("<h3>Login Received</h3>");
out.println("Username: " + username +
"<br>");
out.println("Password: " + password +
"<br>");
out.println("</body></html>");
}
}

login.html

<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<h2>Login Form</h2>
<form action="LoginServlet" method="post">
<label>Username:</label>
<input type="text" name="username"
required><br><br>
<label>Password:</label>
<input type="password" name="password"
required><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>

(ii)

DataServlet.java

package servlet;

import jakarta.servlet.*;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.*;
import java.io.*;

@WebServlet("/DataServlet")
public class DataServlet extends HttpServlet {
protected void doGet(HttpServletRequest
request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/plain");
PrintWriter out = response.getWriter();
out.println("Hello from Servlet! Data sent
to Applet.");
}
}

MyApplet.java

package servlet;
import java.applet.Applet;
import java.awt.*;
import java.io.*;
import java.net.*;

public class MyApplet extends Applet {


public void paint(Graphics g) {
try {
URL url = new URL(getCodeBase(),
"DataServlet");
BufferedReader in = new
BufferedReader(new
InputStreamReader(url.openStream()));
String line = in.readLine();
g.drawString(line, 20, 20);
in.close();
} catch (Exception e) {
g.drawString("Error: " + e, 20, 20);
}
}
}

applet.html

<html>
<body>
<applet code="MyApplet.class" width="300"
height="100">
</applet>
</body>
</html>

EX 10

Login_js.html
<!DOCTYPE html>
<html>
<head>
<title>User Login Validation</title>
<script>
function validateLogin() {
const username =
document.forms["loginForm"]["username"].value.trim(
);
const password =
document.forms["loginForm"]["password"].value.trim(
);

if (username === "") {


alert("Username must be filled
out");
return false;
}
if (password === "") {
alert("Password must be filled
out");
return false;
}

// Show success message

document.getElementById("loginMsg").innerText =
"Login Successful!";
return false; // prevent form
submission for demonstration
}
</script>
</head>
<body>
<h2>User Login</h2>
<form name="loginForm" onsubmit="return
validateLogin()" method="post">
Username: <input type="text"
name="username"><br><br>
Password: <input type="password"
name="password"><br><br>
<input type="submit" value="Login">
</form>
<p id="loginMsg" style="color: green;"></p>
</body>
</html>

ii) registration_js.html
<!DOCTYPE html>
<html>
<head>
<title>Registration Form Validation</title>
<script>
function validateRegistration() {
const form = document.forms["regForm"];
const fullname =
form["fullname"].value.trim();
const email =
form["email"].value.trim();
const password =
form["password"].value;
const dob = form["dob"].value;
const gender = form["gender"].value;

if (fullname === "") {


alert("Full Name is required");
return false;
}
if (email === "") {
alert("Email is required");
return false;
}

const emailPattern = /^[^ ]+@[^ ]+\.[a-


z]{2,3}$/;
if (!emailPattern.test(email)) {
alert("Invalid email format");
return false;
}
if (password.length < 6) {
alert("Password must be at least 6
characters");
return false;
}
if (dob === "") {
alert("Date of Birth is required");
return false;
}
if (gender === "") {
alert("Please select your gender");
return false;
}

// Show success message

document.getElementById("regMsg").innerText =
"Registered Successfully!";
return false; // prevent form
submission for demonstration
}
</script>
</head>
<body>
<h2>Registration Form</h2>
<form name="regForm" onsubmit="return
validateRegistration()" method="post">
Full Name: <input type="text"
name="fullname"><br><br>
Email: <input type="text"
name="email"><br><br>
Password: <input type="password"
name="password"><br><br>
Date of Birth: <input type="date"
name="dob"><br><br>
Gender:
<select name="gender">
<option value="">Select</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select><br><br>
<input type="submit" value="Register">
</form>
<p id="regMsg" style="color: green;"></p>
</body>
</html>

EX 11

i)index.html
<!DOCTYPE html>
<html>
<head>
<title>Course: Web Development 101</title>
<style>
body {
font-family: 'Segoe UI', Tahoma,
Geneva, Verdana, sans-serif;
margin: 30px;
line-height: 1.6;
text-align: center;
}
</style>
<script>
function colorHeadings() {
const colors = ["#2E86C1", "#28B463",
"#CA6F1E", "#8E44AD", "#D68910", "#7F8C8D"];
for (let i = 1; i <= 6; i++) {
const headings =
document.getElementsByTagName("h" + i);
for (let j = 0; j <
headings.length; j++) {
headings[j].style.color =
colors[i - 1];
}
}
}
</script>
</head>
<body onload="colorHeadings()">

<h1>Web Development 101</h1>


<h2>Module 1: HTML Basics</h2>
<h3>Introduction to HTML</h3>
<h4>Tags and Elements</h4>
<h5>Block vs Inline</h5>
<h6>Tip: Always close your tags!</h6>

<h2>Module 2: CSS Styling</h2>


<h3>Selectors and Properties</h3>
<h4>Classes vs IDs</h4>
<h5>Color and Background</h5>
<h6>Pro Tip: Use external stylesheets for
reusability</h6>

</body>
</html>
ii)index.html
<!DOCTYPE html>
<html>
<head>
<title>Article Styling with Headings</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
line-height: 1.6;
text-align: center;
}
h1 {
font-size: 36px;
color: red;
border-bottom: 2px solid #3498db;
margin-bottom: 10px;
}
h2 {
font-size: 30px;
color: blue;
margin-top: 30px;
}
h3 {
font-size: 24px;
color: green;
margin-top: 25px;
}
h4 {
font-size: 20px;
color: yellow;
}
h5 {
font-size: 18px;
color: orange;
}
h6 {
font-size: 16px;
color: purple;
font-style: italic;
}
</style>
</head>
<body>
<h1>Latest Tech Trends 2025</h1>
<p>Welcome to our annual tech trend report where
we analyze the upcoming changes in technology.</p>

<h2>1. Artificial Intelligence</h2>


<p>AI continues to shape various industries, from
healthcare to education.</p>

<h3>1.1 Machine Learning in Health</h3>


<p>ML algorithms help doctors diagnose faster and
more accurately.</p>

<h4>Use Cases</h4>
<p>Radiology, surgery planning, drug discovery,
etc.</p>

<h5>Statistics</h5>
<p>Over 60% of hospitals are adopting AI tools in
diagnostics.</p>

<h6>Note</h6>
<p>This data is based on a global 2025
survey.</p>
</body>
</html>

EX 12

Index.html
<!DOCTYPE html>
<html>
<head>
<title>Simple Centered Lists</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
padding: 20px;
background:pink;
}
.container {
text-align: center;

}
ol, ul, dl {
list-style-position: inside;
}

dt {
font-weight: bold;
}

</style>
</head>
<body>
<div class="container">
<h1>Types of Lists in HTML</h1>

<h2>1. Ordered List</h2>


<ol>
<li>Wake up</li>
<li>Brush teeth</li>
<li>Have breakfast</li>
<li>Go to work</li>
</ol>

<h2>2. Unordered List</h2>


<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
<li>Fruits</li>
</ul>

<h2>3. Definition List</h2>


<dl>
<dt>HTML</dt>
<dd>A standard markup language for creating
web pages.</dd>

<dt>CSS</dt>
<dd>A style sheet language used to describe
the look of a document written in HTML.</dd>

<dt>JavaScript</dt>
<dd>A scripting language that enables dynamic
content on web pages.</dd>
</dl>
</div>
</body>
</html>

EX 13

i)session.jsp

<%@ page import="java.util.*" %>

<%@ page session="true" %>

<html>

<head><title>Session Tracking Example</title></head>

<body>

<%

// No need to declare session again – it's already available!

Integer visitCount = (Integer) session.getAttribute("visitCount");


if (visitCount == null) {

visitCount = 1;

} else {

visitCount = visitCount + 1;

session.setAttribute("visitCount", visitCount);

out.println("<h2>Welcome to Session Tracking Example</h2>");

out.println("<p>Session ID: " + session.getId() + "</p>");

out.println("<p>Number of visits in this session: " + visitCount +


"</p>");

%>

</body>

</html>

ii)

login.html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h2>User Login</h2>
<form action="login.jsp" method="post">
Username: <input type="text"
name="username" required><br><br>
Password: <input type="password"
name="password" required><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>

Login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Login Result</title>

</head>

<body>

<h2>Login Details Received</h2>

<%

// Reading form parameters from request

String username = request.getParameter("username");

String password = request.getParameter("password");

if(username != null && password != null) {

%>

<p><strong>Username:</strong> <%= username %></p>

<p><strong>Password:</strong> <%= password %></p>

<%

} else {

%>

<p style="color:red;">No login details received. Please <a


href="login.html">try again</a>.</p>

<%

%>

</body>
</html>

EX 14

Track.php
<?php
// File to store the visitor count
$file = 'visitor_count.txt';

// Check if the file exists, if not, create it and


initialize count to 0
if (!file_exists($file)) {
file_put_contents($file, 0);
}

// Read the current count from the file


$count = (int)file_get_contents($file);

// Increment the visitor count


$count++;

// Write the updated count back to the file


file_put_contents($file, $count);

// Display the count with proper headings


?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Visitor Counter</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
background: #f4f4f9;
color: #333;
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
h2 {
font-size: 1.8rem;
color: #555;
}
.count {
font-size: 4rem;
color: #007BFF;
margin-top: 20px;
font-weight: bold;
letter-spacing: 3px;
}
</style>
</head>
<body>
<h1>Welcome to Our Website!</h1>
<h2>Number of Visitors So Far:</h2>
<div class="count"><?php echo $count; ?></div>
</body>
</html>

EX 15

Sort.php
<!DOCTYPE html>
<html>
<head>
<title>Merge and Sort Arrays</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 40px auto;
padding: 20px;
color: #222;
background-color: #fff;
}
.label {
font-weight: bold;
margin-top: 15px;
margin-bottom: 5px;
}
.code-block {
background-color: #f4f4f4;
border: 1px solid #ccc;
padding: 10px 12px;
border-radius: 4px;
font-family: monospace;
font-size: 16px;
}
.answer {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>

<div class="label">array1:</div>
<div class="code-block">[3, 45, 2, 99]</div>
<div class="label">array2:</div>
<div class="code-block">[10, 56, 7, 20]</div>

<div class="answer">
Answer (merged & sorted descending):<br>
[<?= implode(', ', $merged) ?>]
</div>

</body>
</html>

EX 16

Index.html
<!DOCTYPE html>
<html>
<head>
<title>Squares and Cubes Table</title>
<style>
table {
border-collapse: collapse;
width: 300px;
margin: 20px auto;
text-align: center;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid #333;
padding: 8px;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>

<h2 style="text-align:center;">Squares and Cubes


from 0 to 10</h2>
<div id="result"></div>

<script>
// Create the table element
let table = "<table>";
table +=
"<tr><th>Number</th><th>Square</th><th>Cube</th></t
r>";

// Loop from 0 to 10 and calculate square and


cube
for (let i = 0; i <= 10; i++) {
let square = i * i;
let cube = i * i * i;
table +=
`<tr><td>${i}</td><td>${square}</td><td>${cube}</td
></tr>`;
}

table += "</table>";

// Output the table inside the div with id


"result"
document.getElementById("result").innerHTML =
table;
</script>

</body>
</html>

EX 17

Index.html
<!DOCTYPE html>
<html>
<head>
<title>Registration Form Validation</title>
<style>
body {
background-color: #eef7fa;
font-family: Arial, sans-serif;
}
.form-container {
width: 320px;
margin: 50px auto;
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
.form-container h2 {
text-align: center;
}
.error {
color: red;
font-size: 0.85em;
margin-bottom: 10px;
}
.success {
color: green;
font-weight: bold;
text-align: center;
margin-top: 10px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 6px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #28a745;
color: white;
font-weight: bold;
cursor: pointer;
border: none;
}
input[type="submit"]:hover {
background-color: #218838;
}
</style>
</head>
<body>

<div class="form-container">
<h2>Registration Form</h2>
<form name="myForm" method="post"
onsubmit="return validateForm()">
<label>Name:</label>
<input type="text" name="name">
<div id="nameError" class="error"></div>

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

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

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

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


</form>
<div id="successMessage" class="success"></div>
</div>

<script>
function validateForm() {

document.getElementById("successMessage").textConte
nt = "";

document.querySelectorAll(".error").forEach(el =>
el.textContent = "");
let isValid = true;

const name =
document.forms["myForm"]["name"].value.trim();
const email =
document.forms["myForm"]["email"].value.trim();
const age =
document.forms["myForm"]["age"].value.trim();
const password =
document.forms["myForm"]["password"].value;

if (name === "") {

document.getElementById('nameError').textContent =
"Name must be filled out.";
isValid = false;
}

const emailPattern =
/^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {

document.getElementById('emailError').textContent =
"Please enter a valid email.";
isValid = false;
}

const ageNum = Number(age);


if (age === "" || isNaN(ageNum) || ageNum < 1
|| ageNum > 120) {

document.getElementById('ageError').textContent =
"Age must be a number between 1 and 120.";
isValid = false;
}

if (password.length < 6) {

document.getElementById('passwordError').textConten
t = "Password must be at least 6 characters.";
isValid = false;
}

if (isValid) {

document.getElementById("successMessage").textConte
nt = "Registration successful!";
document.forms["myForm"].reset(); // ←
Clear all input fields
}

return false; // Prevent actual form


submission (for now)
}
</script>

</body>
</html>

EX 18

Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Customer Details from XML</title>
<style>
body { font-family: Arial, sans-serif; padding:
20px; }
table { border-collapse: collapse; width: 100%;
max-width: 600px; margin: auto; }
th, td { border: 1px solid #ccc; padding: 8px;
text-align: left; }
th { background: #f4f4f4; }
caption { font-size: 1.2em; margin-bottom:
10px; }
</style>
</head>
<body>

<table id="customersTable">
<caption>Customer Details</caption>
<thead>
<tr>

<th>ID</th><th>Name</th><th>Email</th><th>Phone</th
><th>Address</th>
</tr>
</thead>
<tbody>
<!-- rows will be inserted here -->
</tbody>
</table>

<script>
// Fetch and parse the XML, then build the
table
fetch('customers_18.xml')
.then(response => response.text())
.then(xmlText => {
const parser = new DOMParser();
const xmlDoc =
parser.parseFromString(xmlText, "application/xml");
const rows = [];
xmlDoc.querySelectorAll('customer').forEach(cust =>
{
const id = cust.getAttribute('id');
const name =
cust.querySelector('name').textContent;
const email =
cust.querySelector('email').textContent;
const phone =
cust.querySelector('phone').textContent;
const addr =
cust.querySelector('address');
const street =
addr.querySelector('street').textContent;
const city =
addr.querySelector('city').textContent;
const state =
addr.querySelector('state').textContent;
const zip =
addr.querySelector('zip').textContent;
const fullAddr = `${street}, ${city},
${state} ${zip}`;

rows.push(`
<tr>
<td>${id}</td>
<td>${name}</td>
<td>${email}</td>
<td>${phone}</td>
<td>${fullAddr}</td>
</tr>
`);
});

document.querySelector('#customersTable
tbody').innerHTML = rows.join('');
})
.catch(err => {
console.error('Error loading XML:', err);
document.querySelector('#customersTable
tbody').innerHTML =
`<tr><td colspan="5">Failed to load
customer data.</td></tr>`;
});
</script>

</body>
</html>

Customer.xml
<?xml version="1.0" encoding="UTF-8"?>
<customers>
<customer id="C001">
<name>John Doe</name>
<email>[email protected]</email>
<phone>+1-555-1234</phone>
<address>
<street>123 Elm Street</street>
<city>Springfield</city>
<state>IL</state>
<zip>62704</zip>
</address>
</customer>
<customer id="C002">
<name>Jane Smith</name>
<email>[email protected]</email>
<phone>+1-555-5678</phone>
<address>
<street>456 Oak Avenue</street>
<city>Lincoln</city>
<state>NE</state>
<zip>68508</zip>
</address>
</customer>
<!-- add more <customer> elements as needed -->
</customers>

EX 19

Index.html
<!DOCTYPE html>
<html>
<head>
<title>Sort Integers Descending</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4faff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}
input, button {
padding: 8px;
margin-top: 10px;
width: 100%;
box-sizing: border-box;
}
#result {
margin-top: 15px;
font-weight: bold;
color: green;
}
.error {
color: red;
}
</style>
</head>
<body>

<div class="container">
<h2>Sort Integers in Descending Order</h2>
<p>Enter numbers separated by commas (e.g.,
5,3,9,1):</p>
<input type="text" id="numbersInput"
placeholder="Enter integers here">
<button
onclick="sortDescending()">Sort</button>
<div id="result"></div>
</div>

<script>
function sortDescending() {
const input =
document.getElementById("numbersInput").value;
const resultDiv =
document.getElementById("result");

const numberArray = input


.split(",")
.map(num => num.trim())
.filter(num => num !== "")
.map(num => parseInt(num, 10));

if (numberArray.some(isNaN)) {
resultDiv.innerHTML = "<span
class='error'>Please enter valid integers
only.</span>";
return;
}

numberArray.sort((a, b) => b - a); //


Descending order

resultDiv.innerHTML = `Sorted Numbers:


${numberArray.join(", ")}`;
}
</script>
</body>
</html>

EX 20

Index.jsp
<!DOCTYPE html>
<html>
<head>
<title>Enter Username</title>
</head>
<body>
<h2>Enter your name</h2>
<form action="cookie.jsp" method="get">
<input type="text" name="username"
required>
<input type="submit" value="Submit">
</form>
</body>
</html>

Cookie.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8" import="jakarta.servlet.http.Cookie" %>

<%

// Set cookie if username is submitted

String username = request.getParameter("username");

if (username != null && !username.trim().isEmpty()) {

Cookie userCookie = new Cookie("username", username);

userCookie.setMaxAge(3600); // 1 hour

response.addCookie(userCookie);

// Retrieve cookie

String savedUsername = null;

Cookie[] cookies = request.getCookies();


if (cookies != null) {

for (Cookie c : cookies) {

if ("username".equals(c.getName())) {

savedUsername = c.getValue();

break;

%>

<!DOCTYPE html>

<html>

<head>

<title>Cookie Example</title>

</head>

<body>

<% if (savedUsername != null) { %>

<h3>Welcome back, <%= savedUsername %>!</h3>

<% } else { %>

<h3>No cookie found. Please <a href="login.jsp">enter your


name</a>.</h3>

<% } %>

</body>

</html>

*****************************************

You might also like