1) Write a program to implement HTML form.
<html><head>
<title>Form Demo</title>
</head>
<body>
<h1>Registration Form</h1>
<form>
Nameinput type="text" name="name"/<br/>
Father's Name <input type="text" name="fathername" /<br/>
Ageinput type="text" name="age"/<br/>
Genderinput type="radio" name="gender" value="male"checked/>MALE
<inputtype="radio"name="gender"value="female"/>FEMALE <br/>
Salaryinput type="password" name="salary" size="6"/<br/>
Submitinput type="submit" value="submit"/>
</form>
</body>
</html>
Output
2) Write a program to implement HTML Table.
<html><head>
<title>Table Demo</title>
</head>
<body>
<tableborder="2"cellspacing="2"cellpadding="10">
<tr>
<thcolspan="3"Delhi Technical Campus</th>
</tr>
<tr>
<th>S/N</th>
<th>Name</th>
<th>Course</th>
</tr>
<tr>
<td>01</td>
<td>Rahul</td>
<td>BTech</td>
</tr>
<tr>
<td>02</td>
<td>Amber</td>
<td>MBA</td>
</tr>
<tr>
<td>03</td>
<td>Sahil</td>
<td>BArch</td>
</tr>
</table>
</body>
</html>
Output
3) Write a program to implement Internal CSS using List Properties.
<html><head>
<title>CSS Demo</title>
<style>
ul.a { list-style-type : circle; }
ul.b { list-style-type : square; }
ol.c { list-style-type : upper-roman; }
ol.d { list-style-type : lower-alpha; }
</style>
</head>
<body>
<p>Example of Unordered List</p>
<ulclass="a">
<li>Coffee</li>
<li>Tea</li>
<li>CocaCola</li>
</ul>
<ulclass="b">
<li>Coffee</li>
<li>Tea</li>
<li>CocaCola</li>
</ul>
<p>Example of Ordered List</p>
<olclass="c">
<li>Coffee</li>
<li>Tea</li>
<li>CocaCola</li>
</ol>
<olclass="d">
<li>Coffee</li>
<li>Tea</li>
<li>CocaCola</li>
</ol>
</body>
</html>
4) Write the complete HTML code and use javascript to implement a function.
<html><head>
<scripttype="text/javascript">
function displaymessage() {
alert("Hello World!");
}
</script>
</head>
<body>
<form>
<inputtype="button"value="Click me!"onclick="displaymessage()"/>
</form>
<p>By pressing the button above, a function will be called.</p>
</body>
</html>
Output
5) Write the complete HTML tags and use javascript codes to display specific message based on the day of week using switch statement.
<html><body>
<scripttype="text/javascript">
var d =newDate();
theDay=d.getDay();
switch(theDay) {
case1: document.write("<b>Working Monday</b>");break;
case2: document.write("<b>Powerful Tuesday</b>");break;
case3: document.write("<b>Today is Wednesday </b>");break;
case4: document.write("<b>Now its Thursday</b>");break;
case5: document.write("<b>Finally Friday</b>");break;
case6: document.write("<b>Super Saturday</b>");break;
case0: document.write("<b>Sleepy Sunday</b>");break;
default: document.write("<b>I'm like weekend!</b>");
}
</script>
<p>JavaScript generated a different greeting based on what day it is.</p>
</body>
</html>
Output
6) Write HTML code using javascript to validate inputs to a Registration
Form.
<html><head>
<title>JavaScript Field Label Form Validation using a registration form</title>
<linkrel='stylesheet'href='form-style.css'type='text/css'/>
<scriptsrc="form-validation.js"</script>
</head>
<bodyonload="firstfocus();">
<h1>JavaScript Field Label Form Validation using a registration form</h1>
<h2>Use tab key or mouse to go next field</h2>
<formname='registration'>
<ul>
<li>
<labelfor="userid">
User id [5 to 12 characters] :
</label>
</li>
<li>
<inputtype="text"name="userid"size="12"onblur="userid_validation(5,12)"/>
</li>
<li>
<labelfor="passid">
Password[7 to 12 characters] :
</label>
</li>
<li>
<inputtype="password"name="passid"size="12"onblur="passid_validation(7,12)"/>
</li>
<li>
<labelfor="username">
Name[Alphabates characters] :
</label>
</li>
<li>
<inputtype="text"name="username"size="50"onblur="allLetter()"/>
</li>
<li>
<labelfor="country">
Country[Mustselect a country] :
</label>
</li>
<li>
<selectname="country"onblur="countryselect()">
<optionselected=""value="Default"(Please select a country)</option>
<optionvalue="AF"Australia</option>
<optionvalue="AL"Canada</option>
<optionvalue="DZ"India</option>
<optionvalue="AS"Russia</option>
<optionvalue="AD"USA</option>
</select>
</li>
<li>
<labelfor="zip">
ZIP Code[Numeric characters only] :
</label>
</li>
<li>
<inputtype="text"name="zip"onblur="allnumeric()"/>
</li>
<li>
<labelfor="email">
Email[Valid email] :
</label>
</li>
<li>
<inputtype="text"name="email"size="50"onblur="ValidateEmail()"/>
</li>
<li>
<labelid="gender">
Sex[SelectMaleorFemale] :
</label>
</li>
<li>
<inputtype="radio"name="sex"value="Male"checked/>
</li>
<li>
<span>Male</span>
</li>
<li>
<inputtype="radio"name="sex"value="Female"/>
</li>
<li>
<span>Female<span>
</li>
<li>
<label>
Language[Optional] :
</label>
</li>
<li>
<inputtype="checkbox"name="en"value="en"checked/>
</li>
<li>
<span>English</span>
</li>
<li>
<inputtype="checkbox"name="nonen"value="noen"/>
</li>
<li>
<span>Non English</span>
</li>
<li>
<labelfor="desc">
About[Optional] :
</label>
</li>
<li>
<textareaname="desc"id="desc"</textarea>
</li>
<li>
<inputtype="submit"name="submit"value="Submit"onclick="alert('Form submitted successfully')"/>
</li>
</ul>
</form>
</body>
</html>
index.html
li {list-style-type: none;
font-size:16pt;
}
.mail {
margin:auto;
padding-top:10px;
padding-bottom:10px;
width:400px;
background :#D8F1F8;
border:1px soild silver;
}
.mail h2 {
margin-left:38px;
}
input {
font-size:20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size:12pt;
}
.rq {
color:#FF0000;
font-size:10pt;
}
Form-styles.css
function firstfocus() {// After form loads focus will go to User id field.
var uid = document.registration.userid.focus();
returntrue;
}
function userid_validation(mx,my) {
// This function will validate User id.
var uid = document.registration.userid;
var uid_len = uid.value.length;
if(uid_len ==0|| uid_len >=my|| uid_len mx) {
alert("User Id should not be empty / length be between "+ mx +" to "+my);
uid.focus();
returnfalse;
}
document.registration.passid.focus();// Focus goes to next field i.e. Password
returntrue;
}
function passid_validation(mx,my) {
// This function will validate Password.
var passid = document.registration.passid;
var passid_len = passid.value.length;
if(passid_len ==0|| passid_len >=my|| passid_len mx) {
alert("Password should not be empty / length be between "+ mx +" to "+my);
passid.focus();
returnfalse;
}
document.registration.username.focus();
returntrue;
}
// Focus goes to next field i.e. Namefunction allLetter()
{
// This function will validate Name.
var uname = document.registration.username;
var letters =/^[A-Za-z]+$/;
if(uname.value.match(letters)) {
document.registration.country.focus();
// Focus goes to next field Country.
returntrue;
}else {
alert('Username must have alphabet characters only');
uname.focus();
returnfalse;
}
}
function countryselect() {
// This function will select country name.
var ucountry = document.registration.country;
if(ucountry.value =="Default") {
alert('Select your country from the list');
ucountry.focus();
returnfalse;
}else {
document.registration.zip.focus();
// Focus goes to next field ZIP Code.
returntrue;
}
}
function allnumeric() {
// This function will validate ZIP Code.
var uzip = document.registration.zip;
var numbers =/^[0-9]+$/;
if(uzip.value.match(numbers)) {
document.registration.email.focus();
// Focus goes to next field email.
returntrue;
}else {
alert('ZIP code must have numeric characters only');
uzip.focus();
returnfalse;
}
}
functionValidateEmail() {
// This function will validate Email.
var uemail = document.registration.email;
var mailformat =/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mailformat)) {
document.registration.desc.focus();
returntrue;
}else {
alert("You have entered an invalid email address!");
uemail.focus();
returnfalse;
}
}
form-validation.js
Output
7) Write HTML code using javascript to determine factorial of a function.
<html><scripttype="text/javascript">
function factorial(n) {
if(n ==0)
return1;
else
return n * factorial(n -1);
}
var count =0;
for(count; count 11; count++)
document.write("The factorial of "+ count +" is "+ factorial(count));
</script>
</html
Output
8) Write a code to create an XML document to implement the concept of root element and child element declaration using an internal DTD.
<?xml version="1.0"?><!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<messages>
<noteid="501">
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
<noteid="502">
<to>Jani</to>
<from>Tove</from>
<heading>Re: Reminder</heading>
<body>I will not</body>
</note>
</messages>
message.xml
Output
9) Write a code to create an XML document to implement the concept of root element and child element declaration using an external DTD.
<!ELEMENT note (to,from,heading,body)><!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
note.dtd
<?xml version="1.0"?><!DOCTYPE note SYSTEM "note.dtd">
<messages>
<noteid="501">
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
<noteid="502">
<to>Jani</to>
<from>Tove</from>
<heading>Re: Reminder</heading>
<body>I will not</body>
</note>
</messages>
Output
1