577, RVS POLYTECHNIC COLLEGE
COIMBATORE
R2023
1052233540 - WEB DESIGNING
PRACTICUM
PRACTICAL MANUAL
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
[Link]: 01 Write a HTML code to display welcome text using different text
formatting tags. (Use h1-h6, bold, italic, underline, strikethrough,
div, p, pre tags) (HTML Basic tags)
Aim:
To Write a HTML code to display welcome text using different text
formatting tags.
Software Required:
1. Notepad / Notepad++ / Dreamweaver
2. Any Browser.
Procedure:
STEP 1: Open the Notepad window.
STEP 2: Type HTML in the window
STEP 3: Save the code with the extension of .html
STEP 4: Open any browser window.
STEP 5: Execute the HTML document.
Program:
<html>
<head>
<title> Welcome </title>
</head>
<body>
<h1> Welcome <h1>
<h2> Welcome </h2>
<h3> Welcome </h3>
<h4> Welcome</h4>
<h5> Welcome </h5>
<h6> Welcome</h6>
<b> Welcome</b>
<i> Welcome </i>
<u> Welcome </u>
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
<p> Welcome </P>
<pre> Welcome
Welcome
Welcome
</pre>
<div> Welcome </div>
</body>
</html>
Result:
Thus, the above program to display Welcome Text using different text
formatting tags executed and output verified successfully.
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
[Link]: 02 Design a HTML page to list the computer languages where each
language is a link. Prepare separate HTML documents for each
language and call them in the appropriate link. (Lists and Links)
Aim:
To Design a HTML page to list the computer languages where each
language is a link. Prepare separate HTML documents for each language and
call them in the appropriate link.
Software Required:
1. Notepad / Notepad++ / Dreamweaver
2. Any Browser.
Procedure:
STEP 1: Open the Notepad window.
STEP 2: Type HTML in the window
STEP 3: Save the code with the extension of .html
STEP 4: Open any browser window.
STEP 5: Execute the HTML document.
Program:
<!-- File Name: [Link] -->
<html>
<head>
<title>Language List</title>
</head>
<body>
<ol>
<li><a href="[Link]"></li>
<li><a href="[Link]"></li>
<li><a href="[Link]"></li>
<li><a href="[Link]"></li>
</ol>
</body>
</html>
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
<!-- File Name: [Link] -->
<html>
<head>
<title>Python Language</title>
</head>
<body>
<p> This is Python Programming language page </p>
</body>
</html>
<!-- File Name: [Link] -->
<html>
<head>
<title>C Language</title>
</head>
<body>
<p> This is C Programming language page </p>
</body>
</html>
<!-- File Name: [Link] -->
<html>
<head>
<title>Java Language</title>
</head>
<body>
<p> This is Java Programming language page </p>
</body>
</html>
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
<!-- File Name: [Link] -->
<html>
<head>
<title>Ruby Language</title>
</head>
<body>
<p> This is Ruby language page </p>
</body>
</html>
Result:
Thus, the above program to design a html page using lists and links
executed and output verified successfully.
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
[Link]: 03 Write a HTML program to display the image of a computer as a link
to the web page describing the components of computers. (Images
and link tags)
Aim:
To Write a HTML program to display the image of a computer as a link
to the web page describing the components of computers
Software Required:
1. Notepad / Notepad++ / Dreamweaver
2. Any Browser.
Procedure:
STEP 1: Open the Notepad window.
STEP 2: Type HTML in the window
STEP 3: Save the code with the extension of .html
STEP 4: Open any browser window.
STEP 5: Execute the HTML document.
Program:
<html lang="en">
<head>
<title>Computer Components</title>
</head>
<body>
<h1>Components of the computer</h1>
<p>Click on the Computer, CPU, Mouse, Keyboard to go to a new page
and read more about the topic</p>
<img src="/computer (1).jpg"
alt="Workplace" usemap="#workmap" width="600" height="500">
<map name="workmap">
<area shape="rect" coords="149,69,410,320" alt="Display"
href="/[Link]">
<area shape="rect" coords="466,39,594,401" alt="Cpu"
href="/[Link]">
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
<area shape="rect" coords="10,380,356,433" alt="Keyboard"
href="/[Link]">
<area shape="circle" coords="434,432,35" alt="Mouse"
href="/[Link]">
</map>
</body>
</html>
<!-- File name: [Link] -->
<html lang="en">
<head>
<title>CPU</title>
</head>
<body>
<h2>CPU</h2>
<h4>Specifications</h4>
<ul>
<li>Up to Intel® Pentium® N3710 Processor</li>
<li>Integrated Intel® HD Graphics</li>
<li>Up to 4 GB DDR3</li>
<li>24WHr; Up to 3 Hours Video Playback</li>
</ul>
</body>
</html>
<!-- File name: [Link] -->
<html lang="en">
<head>
<title>CPU</title>
</head>
<body>
<h2>Monitor</h2>
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
<p>A monitor is an electronic output device used to display information
being entered and processed on a computer. The primary use of a monitor is
to display images, text, video, and graphics information generated by the
computer via a computer's video card.</p>
</body>
</html>
<!-- File name: [Link] -->
<html lang="en">
<head>
<title>CPU</title>
</head>
<body>
<h2>Keyboard</h2>
<p>A computer keyboard is an input device used to enter characters and
functions into the computer system by pressing buttons, or keys.</p>
</body>
</html>
<!-- File name: [Link] -->
<html lang="en">
<head>
<title>CPU</title>
</head>
<body>
<h2>Mouse</h2>
<p>A computer mouse is a hand-held pointing device that detects two-
dimensional motion relative to a surface.</p>
</body>
</html>
Result:
Thus, the above program to Write a HTML program to display the image
of a computer as a link to the web page describing the components of
computers executed and output verified successfully.
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
[Link]: 04 Develop a web page using CSS to create a timetable for the class
using different border style. (Table tags and internal style sheets)
Aim:
To Develop a web page using CSS to create a timetable for the class
using different border style.
Software Required:
1. Notepad / Notepad++ / Dreamweaver
2. Any Browser.
Procedure:
STEP 1: Open the Notepad window.
STEP 2: Type HTML and CSS code in the window
STEP 3: Save the code with the extension of .html
STEP 4: Open any browser window.
STEP 5: Execute the HTML document.
Program:
<html lang="en">
<head>
<title>Time table</title>
</head>
<body>
<h1>Class Timetable</h1>
<table>
<tr>
<th>Day</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
<th>7</th>
<th>8</th>
</tr>
<tr>
<td class="days">MON</td>
<td>WEB</td>
<td>PP</td>
<td>RDBMS</td>
<td>ASE</td>
<td>DLD</td>
<td>OS</td>
<td>WEB</td>
<td>DLD</td>
</tr>
<tr>
<td class="days">TUE</td>
<td>OS</td>
<td>RDBMS</td>
<td>RDBMS</td>
<td>OS</td>
<td>ITE</td>
<td>WEB</td>
<td>PP</td>
<td>DLD</td>
</tr>
<tr>
<td class="days">WED</td>
<td>WEB</td>
<td>CP</td>
<td>OS</td>
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
<td>DLD</td>
<td>DLD</td>
<td>CP</td>
<td>H&W</td>
<td>H&W</td>
</tr>
<tr>
<td class="days">THUR</td>
<td>CP</td>
<td>OS</td>
<td>ASE</td>
<td>RDBMS</td>
<td>DLD</td>
<td>ITE</td>
<td>WEB</td>
<td>PP</td>
</tr>
<tr>
<td class="days">FRI</td>
<td>WEB</td>
<td>CP</td>
<td>CP</td>
<td>ASE</td>
<td>OS</td>
<td>DLD</td>
<td>OS</td>
<td>DLD</td>
</tr>
</table>
<style>
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
h1{
text-align: center;
padding: 30px;
}
table, td, th {
border: 2px solid black;
text-align: center;
padding: 2px;
}
th{
font-weight: bold;
background-color: bisque;
}
td{
width: 200px;
}
.days{
font-weight: bolder;
background-color: bisque;
}
table {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 500px;
border-collapse: collapse;
font-size: large;
}
</style>
</body>
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
</html>
Result:
Thus, the above program to develop a web page using CSS to create a
timetable for the class using different border style was executed and output
verified successfully.
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
[Link]: 05 Design a webpage of your college with attractive background color,
text-color, font-face, an image by using external CSS formatting.
(External Style sheets)
Aim:
To Design a webpage of your college with attractive background color,
text-color, font-face, an image by using external CSS formatting.
Software Required:
1. Notepad / Notepad++ / Dreamweaver
2. Any Browser.
Procedure:
STEP 1: Open the Notepad window.
STEP 2: Type HTML code in the window
STEP 3: Save the code with the extension of .html
STEP 4: Type CSS code in the window
STEP 5: Save the code with the extension of .css
STEP 6: Open any browser window.
STEP 7: Execute the HTML document.
Program:
<html lang="en">
<head>
<title>RVS PTC</title>
<link rel="stylesheet" href="/[Link]">
<link rel="icon" href="College_img.jpg">
</head>
<body>
<section>
<ul class="header">
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
<li>Pay Fee</li>
</ul>
</section>
<div class="container">
<img src="[Link]
[Link]"alt="RVSPTC">
<div class="collegetext"><h1>Welcome to RVS Polytechnic College</h1>
</div>
</div>
<div>
<p>Give a man a fish and you feed him for a day; teach a man to fish
and you feed him for a lifetime.</p>
</div>
</body>
</html>
<!-- File name: [Link] -->
*{
margin: 0;
padding: 0;
}
ul{
background-color: #87986a;
overflow: hidden;
text-align: center;
}
li{
list-style-type: none;
float: left;
text-align: center;
color: aliceblue;
margin: 10px;
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
padding: 10px;
font-size: larger;
}
.container{
position: relative;
}
img{
width: 100%;
height: 500px;
opacity: 0.8;
}
.collegetext{
position: absolute;
top: 50%;
bottom: 50%;
left: 20%;
right: 20%;
color: white;
text-align: center;
font-family:Georgia, 'Times New Roman', Times, serif;
}
p{
color: #004d74;
font-family:fantasy;
text-align: center;
margin: 10px;
padding: 10px;
font-size: 30px;
}
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
Result:
Thus, the above program Design a webpage of your college with
attractive background color, text-color, font-face, an image by using external
CSS formatting was executed and output verified successfully.
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
[Link]: 06 Write a JavaScript program to create a clock in 24 hours format
using Date Object. (Do not include AM/PM) (JavaScript Objects and
Functions)
Aim:
To Write a JavaScript program to create a clock in 24 hours format
using Date Object.
Software Required:
1. Notepad / Notepad++ / Dreamweaver
2. Any Browser.
Procedure:
STEP 1: Open the Notepad window.
STEP 2: Type HTML, CSS, and JS code in the window
STEP 3: Save the code with the extension of .html
STEP 4: Open any browser window.
STEP 5: Execute the HTML document.
Program:
<html lang="en">
<head>
<title>24 Hours Clock</title>
</head>
<body>
<h1>Live 24 Hours Clock</h1>
<div id="clock"></div>
</body>
<style>
h1{
margin-top: 20px;
text-align: center;
}
#clock {
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
margin: 20px auto;
padding: 10px;
background: #ccecf5;
width: 50%;
text-align: center;
height: 50px;
color: #030303;
font-size: 34px;
font-family: calibri;
}
</style>
<script>
function changeTimeFormat() {
let date = new Date();
let hours = [Link]();
let minutes = [Link]();
let seconds = [Link]();
[Link]("clock").innerHTML = hours + ':' + minutes + ':'
+ seconds;
}
setInterval(changeTimeFormat, 1000);
</script>
</html>
Result:
Thus, the above program to Write a JavaScript program to create a clock
in 24 hours format using Date Object was executed and output verified
successfully.
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
[Link]: 07 Write a JavaScript program to control (play, pause, stop) the
audio/video in a web page. (JavaScript User defined Objects and
Media Tags)
Aim:
To Write a JavaScript program to control (play, pause, stop) the
audio/video in a web page.
Software Required:
1. Notepad / Notepad++ / Dreamweaver
2. Any Browser.
Procedure:
STEP 1: Open the Notepad window.
STEP 2: Type HTML, CSS, and JS code in the window
STEP 3: Save the code with the extension of .html
STEP 4: Open any browser window.
STEP 5: Execute the HTML document.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Audio Player</title>
</head>
<body>
<div class="event">
<button class="play" onclick="playAudio()" type="button">Play
Audio</button>
<button class="pause" onclick="pauseAudio()" type="button">Pause
Audio</button>
<button class="stop" onclick="stopAudio()" type="button">Stop
Audio</button>
</div>
<audio id="myAudio">
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
<source
src="[Link]
demos/DDR_assets/Kangaroo_MusiQue_-
_The_Neverwritten_Role_Playing_Game.mp3">
</audio>
<script>
let audio = [Link]("myAudio");
function playAudio() {
[Link]();
}
function pauseAudio() {
[Link]();
}
function stopAudio() {
[Link]();
[Link] = 0;
}
</script>
<style>
button {
padding: 10px;
width: 100%;
font-size: 30px;
}
.play {
background-color: lightgreen;
}
.pause {
background-color: lightpink;
}
.stop {
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
background-color: red;
}
</style>
</body>
</html>
Result:
Thus, the above program to Write a JavaScript program to control (play,
pause, stop) the audio/video in a web page was executed and output verified
successfully.
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
[Link]: 08 Write a JavaScript program to change the color of a web page to the
color typed by the user in the text box. (DOM)
Aim:
To Write a JavaScript program to change the color of a web page to the
color typed by the user in the text box.
Software Required:
1. Notepad / Notepad++ / Dreamweaver
2. Any Browser.
Procedure:
STEP 1: Open the Notepad window.
STEP 2: Type HTML, CSS, and JS code in the window
STEP 3: Save the code with the extension of .html
STEP 4: Open any browser window.
STEP 5: Execute the HTML document.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Change Background Color</title>
</head>
<body>
<div class="color">
<input type="text" id="colorInput" placeholder="Enter color name">
<button onclick="changeBackgroundColor()">Change Color</button>
</div>
<script>
function changeBackgroundColor() {
const color = [Link]("colorInput").value;
[Link] = color;
}
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
</script>
<style>
#colorInput {
width: 50%;
height: 50px;
padding-left: 50px;
font-size: 20px;
}
button{
height: 55px;
font-size: 20px;
}
</style>
</body>
</html>
Result:
Thus, the above program to Write a JavaScript program to change the
color of a web page to the color typed by the user in the text box was executed
and output verified successfully.
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
[Link]: 09 Write a JavaScript program to develop a simple calculator (with basic
arithmetic operations like add, subtract, multiply, divide, equal to)
by getting two numbers in two text boxes, buttons for operations and
display the result in the third text box. (Event Handling)
Aim:
To Write a JavaScript program to develop a simple calculator (with basic
arithmetic operations like add, subtract, multiply, divide, equal to) by getting
two numbers in two text boxes, buttons for operations and display the result
in the third text box.
Software Required:
1. Notepad / Notepad++ / Dreamweaver
2. Any Browser.
Procedure:
STEP 1: Open the Notepad window.
STEP 2: Type HTML, CSS, and JS code in the window
STEP 3: Save the code with the extension of .html
STEP 4: Open any browser window.
STEP 5: Execute the HTML document.
Program:
<!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;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
background-color: #f0f0f0;
}
.calculator {
padding: 20px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"] {
width: 100px;
margin: 5px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="num1" placeholder="Enter 1st number">
<input type="text" id="num2" placeholder="Enter 2nd number">
<br>
<button onclick="calculate('+')">+</button>
<button onclick="calculate('-')">-</button>
<button onclick="calculate('')"></button>
<button onclick="calculate('/')">/</button>
<br>
<input type="text" id="result" placeholder="Result" readonly>
</div>
<script>
function calculate(operation) {
const num1 = parseFloat([Link]('num1').value);
const num2 = parseFloat([Link]('num2').value);
let result;
if (isNaN(num1) || isNaN(num2)) {
result = "Please enter valid numbers";
} else {
switch (operation) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
default:
result = "Invalid Operation";
}
}
[Link]('result').value = result;
}
</script>
</body>
</html>
Result:
Thus, the above program to Write a JavaScript program to develop a
simple calculator was executed and output verified successfully.
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
[Link]: 10 Create a form with text fields such as username, mail id, password,
retype password, gender (radio), languages known (check box),
Describe yourself (textarea), submit button and perform form
validation such as username must not be less than 8 characters,
mail id should contain @ symbol, password and retype password
must be the same. (Forms & Form validation)
Aim:
To Create a form with text fields such as username, mail id, password,
retype password, gender (radio), languages known (check box), Describe
yourself (textarea), submit button and perform form validation such as
username must not be less than 8 characters, mail id should contain @
symbol, password and retype password must be the same.
Software Required:
1. Notepad / Notepad++ / Dreamweaver
2. Any Browser.
Procedure:
STEP 1: Open the Notepad window.
STEP 2: Type HTML code in the window
STEP 3: Save the code with the extension of .html
STEP 1: Again, open the Notepad window.
STEP 2: Type CSS code in the window
STEP 3: Save the code with the extension of .css
STEP 1: Again, open the Notepad window.
STEP 2: Type JS code in the window
STEP 3: Save the code with the extension of .js
STEP 4: Open any browser window.
STEP 5: Execute the HTML document.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Form Validation</title>
<link rel="stylesheet" href="/[Link]">
</head>
<body>
<h1>REGISTRATION FORM</h1>
<form name="RegForm" onsubmit="return validateForm()">
<p>
<label for="name">Username:</label>
<input type="text" id="name" name="Name" placeholder="Enter your
Username" />
<span id="name-error" class="error-message"></span>
</p>
<p>
<label for="email">E-mail Address:</label>
<input type="text" id="email" name="EMail" placeholder="Enter your
email" />
<span id="email-error" class="error-message"></span>
</p>
<p>
<label for="password">Password:</label>
<input type="password" id="password" name="Password" />
<span id="password-error" class="error-message"></span>
</p>
<p>
<label for="retypepassword">Retype-Password:</label>
<input type="password" id="retypepassword"
name="retypepassword" />
<span id="retypepassword-error" class="error-message"></span>
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
</p>
<p for="gender" id="gender">
<input type="radio" id="gender" name="gender" required/>
<label for="gender">Male</label>
<input type="radio" id="gender" name="gender" required/>
<label for="gender">Female</label>
<input type="radio" id="gender" name="gender" required/>
<label for="gender">Other</label>
<span id="gender-error" class="error-message"></span>
</p>
<p>
<label for="comment">Describe yourself:</label>
<textarea id="comment" name="Comment"></textarea>
</p>
<p>
<input type="submit" value="Send" name="Submit" />
<input type="reset" value="Reset" name="Reset" />
</p>
</form>
<script src="/[Link]"></script>
</body>
</html>
/* File Name: [Link] */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
text-align: center;
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
color: #333;
}
form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"],
input[type="password"],
select,
textarea {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
}
select {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
background-color: #fff;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
textarea {
resize: vertical;
}
input[type="submit"],
input[type="reset"],
input[type="checkbox"] {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="checkbox"]:hover {
background-color: #0056b3;
}
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
.error-message {
color: red;
font-size: 14px;
margin-top: 5px;
}
// File name: [Link]
function validateForm() {
const name = [Link]("name").value;
const email = [Link]("email").value;
const password = [Link]("password").value;
const retypepassword =
[Link]("retypepassword").value;
const nameError = [Link]("name-error");
const emailError = [Link](
"email-error"
);
const passwordError = [Link](
"password-error"
);
const retypepasswordError = [Link](
"retypepassword-error"
);
[Link] = "";
[Link] = "";
[Link] = "";
[Link] = "";
let isValid = true;
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
if (name === "" || /\d/.test(name)) {
[Link] =
"Please enter your username properly.";
isValid = false;
}
if (email === "" || ![Link]("@")) {
[Link] =
"Please enter a valid email address.";
isValid = false;
}
if (password === "" || [Link] < 8) {
[Link] =
"Please enter a password with at least 8 characters.";
isValid = false;
}
if (password === "" || password !== retypepassword) {
[Link] =
"Password does not match";
isValid = false;
}
return isValid;
}
Result:
Thus, the above program to create a form and perform form validation
was executed and output verified successfully.
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
Outputs for All 10 programs
Program 1:
Program 2:
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
Program3:
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
Program 4:
Program 5:
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
Program 6:
Program 7:
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
Program 8:
Program 9:
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER
Program 10:
PREPARED BY, DEEPAN S / LECTURER, SURYA V / LECTURER