HTML_lAb

HTML LAB PROGRAMS
1. Crate a form by using various attributes of

the input tags (Text box, Multiline textbox,
Option button, Check box)
<!DOCTYPE html>
<html>
<head>
<title> Form Using Input Tags </title>
</head>
<body bgcolor="aqua" text="purple">
<center><h1> Student Details
</h1></center>
<br><br>
<h2>
<form>
<label> Student Name:</label>
<input type="text"
name="Name" size="25"/><br><br>
Address:<br>
<textarea cols="50" rows="5"
value="address"></textarea><br><br>
<label> Gender:</label><br>
<input type="radio"
name="gender"/> Male <br>
<input type="radio"
name="gender"/> Female <br>
<input type="radio"
name="gender"/> Other <br><br>
<label> Hobies:</label><br>
<input type="Checkbox"
name="programming"> Programming <br>
name="sports"> Sports <br>
name="art"> Drawing & Painting <br>
name="music"> Singing <br>
<br><br>
</form>
</h2>
</body>
</html>
OUTPUT:
2. Create a simple HTML page by using some of
the basic tags(hyperlink, marquee, image)
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Tags</title>
</head>
<body bgcolor="skyblue" text="white">
<marquee behaviour="alternate"
scrollamount="12">
<h1>WELCOME TO VIJAYA COLLEGE,
JAYANAGAR</h1>
</marquee>
<center><img src="vcj.jfif"></center>
<a href="courses.html">Click here to
check the course details</a>
</body>
</html>
courses.html
<html>
<head>
<title>Courses</title>
</head>
<body bgcolor="yellow">
<b>
<ol>Course details
<li>BA</li>
<li>BBA</li>
<li>BCA</li>
<li>BCOM</li>
<ol type="a">
<li>Regular</li>
<li>Accounting and Finance</li>
<li>Business Data Analytics</li>
</b>
<li>BSC</li>
<ol type="i">
<li>Life Science</li>
<li>Physical Science</li>
</ol>
</ol>
</body>
</html>
OUTPUT:
3. Java script program to create dialogue boxes
using alert, confirm and prompt methods
<!DOCTYPE html>
<html>
<head>
<title>Dialog Box</title>
<script type="text/javascript">
age=parseInt(prompt("Enter your age:"));
if (age>=18)
alert("you are eligible to vote!!");
else
alert("you are not eligible to vote");
if (confirm("Do you want re-enter your
age?"))
location.reload();
else
Window.close();
</script>
</head>
</html>
OUTPUT:
4. Java script program to perform arithmetic
operations Addition, Subtraction,
Multiplication and Division on two numbers.
<!DOCTYPE html>
<html>
<head>
<title>ARITHMATIC OPERATIONS</title>
<style>
form {
width:50%;
}
legend {
width:100px;
display:block;
padding-left:10px;
padding-right:10px;
border:3px solid green;
background-color:tomato;
color:white;
}
font {
font-family:"Lucida console","courier
New",monospace;
font-size:22px;
}
</style>
function multiply()
{
a=Number(document.my_cal.first.value);
b=Number(document.my_cal.second.value);
c=a*b;
document.my_cal.total.value=C;
function addition()
{
c=a+b;
function subtraction()
{
c=a-b;
function division()
{
c=a/b;
function modules()
{
c=a%b;
function cleardata()
{
document.my_cal.first.value=" ";
document.my_cal.second.value=" ";
document.my_cal.total.value=" ";
}
</script>
</head>
<body>
<center>
<form name="my_cal">
<fieldset>
<legend>Enter value of 2
numbers</legend>
<h1>Arithmatic Operations</h1><br>
<font>
Number1:<input type="text"
name="First">
Number2:<input type="text"
name="Second"><br><br><br>
<input type="button" value="ADD"

onclick="addition()">
<input type="button" value="SUB"
onclick="subtraction()">
<input type="button" value="MUL"
onclick="multiply()">
<input type="button" value="DIV"
onclick="division()">
<input type="button" value="MOD"
onclick="modules()">
<br><br><br>
Result:<input type="text" name="total">
<br><br>

</font>
</form>
</fieldset>
</center>
</body>
</html>
OUTPUT:
5. Create a form for student information, write

java script code to the total, average, result
and grade.
<!DOCTYPE html>
<html>
<head>
<title>STUDENT DETAILS</title>
<script language="java script">
function resdisp()
{
var
stdname=document.getElementById("txtname").
value;
var
cls=document.getElementById("txtcls").value;
var
sub1=document.getElementById("txtsub1").valu
e;
var
e;
var
e;
var
e;
var
e;
var
e;
var
total=sub1+sub2+sub3+sub4+sub5+sub6;
var avg=total/6;
if (sub1<35||sub2<35||sub3<35||
sub4<35||sub5<35||sub6<35)
{
res="fail";grade="D";
}
else
{
if (avg<35)
{
res="fail";grade="D";
}
else if (avg<50)
{
res="pass";grade="C";
}
else if (avg<75)
{
res="first class";grade="B";
}
else if (avg<85)
{
res="distinction";grade="A";
}
else if (avg<100)
{
res="exemplary";grade="A+";
}
}
document.write("<body
bgcolor=powderblue>");
document.write("<center><h1>Student
Details</h1></center>");
document.write("<table align=center
border=2><tr><th>Student Name</th><td>");
document.write(stdname+"</td></tr>");
document.write("<tr><th>class</th><td>");
document.write(cls+"</td></tr>");
document.write("<th>colspan=2>marks
of"+stdname"</th>");
document.write("<tr><th>English</th><td>");
document.write(sub1+"</td><tr>");
document.write("<tr><th>Language<th><td>");
document.write(sub2+"</td></tr>");
document.write("<tr><th>ADA</th><td>");
document.write("<tr><th>IT</th><td>");
document.write("<tr><th>SE</th><td>");
document.write("<tr><th>IC</th><td>");
document.write("<tr><th>Total
Marks</th><td>"+total+"</td></tr>");
document.write("<tr><th>Result</th><td>"+res+
"</td></tr>);
document.write("<tr><th>Grade</th><td>"+grad
e+"</td></tr>);
document.write("</table>");
}
</script>
</head>
<body bgcolor="plum">
<form name="stdfrm">
<h1>
<center><font color="blue">Student
Details</font></center>
</h1>
<table align="center" border="2">
<tr>
<th>Class</th>
<td><input type="text"
id="txtcls"/></td>
</tr>
<tr>
<th>Language</th>
id="txtsub1"/></td>
</tr>
<tr>
<th>Language2</th>
id="txtsub2"/></td>
</tr>
<tr>
<th>ADA</th>
id="txtsub3"/></td>
</tr>
<tr>
<th>IT</th>
id="txtsub4"/></td>
</tr>
<tr>
<th>SE</th>
id="txtsub5"/></td>
</tr>
<tr>
<th>IC</th>
id="txtsub6"/></td>
</tr>
</table>
<br/><br/>
<center><input type="submit"
value="SUBMIT" name="bsub"
onclick="resdisp();"/>
</center>
</form>
</body>
</html>
OUTPUT:
6. Java script code block using arrays and

generate the current date in words, this
should include the days, month and year.
<html>
<head>
<title>Display the current date in
words</title>
<script language="JavaScript">
var
days=["01","02","03","04","05","06","07","08","09"
,"10","11","12","13","14","15","16","17","18","19","
20","21","22","23","24","25","26","27","28","29","3
0","31"];
var
months=["January","February","March","April","
May","June","July","August","September","Octob
er","November","December"];
var dateobj=newDate;
var month=dateobj.getMonth();
var dt=dateobj.getDate();
var Yr=dateobj.getFullyYear();
alert("Today's date is:"+days[dt-1]+"
"+months[month]+" "+yr);
</script>
</head>
</html>
OUTPUT:
7. Java script code to validate login details.

<html>
<head>
<title>LOGIN FORM</title>
function verify()
{
uname=document.getElementById("usrnme").val
ue;
pswrd=document.getElementById("pswrd").valu
e;
if (uname==pswrd)
{
alert("valid login Details");
}
else
{
alert("Invalid Login
Details");
}
}
</script>
</head>
<body bgcolor="green" text="white">
<center><br><br><br><br>
<form>
<h1>LOGIN FORM</h1>
<input type="text"
placeholder="USERNAME" id="usrnme">
<br><br>
<input type="password"
placeholder="PASSWORD" id="pswrd">
<br><br>
<input type="submit" value="SUBMIT"
onclick="varify();">
<input type="reset" value="RESET">
</form>
</center>
</body>
</html>
OUTPUT:

HTML_lAb

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML_lAb

Uploaded by

Copyright:

Available Formats

HTML LAB PROGRAMS

1. Crate a form by using various attributes of

<input type="button" value="ADD"

5. Create a form for student information, write

6. Java script code block using arrays and

7. Java script code to validate login details.

You might also like