Create HTML forms to capture user information

1)Create a webpage to display your name with every letter having a different heading size.
ANS: <html>
<body>
<h1>R</h1>
<h2>A</h2>
<h3>V</h3>
<h4>I</h4>
<h5>T</h5>
<h6>E</h6>
<h7>J</h7>
<h8>A</h8>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
2)Create a webpage that displays two lists with any information you want. One list should be an
ordered list and the other list should be an unordered list.
ANS: <html>
<body>
<b>WEB BROWSERS</b>
<ol type="I">
<li>google chrome</li>
<li>firefox</li>
<li>opera mini</li>
<li>edge browser</li>
</ol>
<b>Web languages</b>
<ul type="square">
<li>HTML</li>
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
</ul>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------
3) We need to have a HTML containing three lists.
List 1 will contain the following :

1) One
a. Uno
b. Hanna
2) Two
a. Dos
b. Dool
3) Three
a. Tres
b. Set
List 2 will contain :
• Chevy
o Cavilier
o Malibu
• Ford
o Escort
o F100
• Mazda
o 626
List 3 should be of two types : Fruits and Vegetables
A. Fruits
i. Apples,Oranges,Pears,Banana
B. Vegetables
i. Corn
a)On the cob
b)Cream
ii. Carrots
iii. Green Beans
ANS: <html>
<body>
<h1> THE 3 LIST STARTS HERE</h1>
<h2>LIST 1 CONTAINS THE FOLLOWING..</h2>
<ol type = '1'>

<li>One</li>
<ol type ='a'>
<li>Uno</li>
<li>Hanna</li>
</ol>
<li>Two</li>
<ol type ='a'>
<li>Dos</li>
<li>Dool</li>
</ol>
<li>Three</li>
<ol type ='a'>
<li>Tres</li>
<li>Set</li>
</ol>
</ol>
<h2>LIST 2 CONTAINS..</h2>
<ul>
<li>Chevy</li>
<ul>
<li>Cavilier</li>
<li>Malibu</li>
</ul>
<li>Ford</li>
<ul>
<li>Escort</li>
<li>F100</li>
</ul>
<li>Mazda</li>
<ul>
<li>626</li>
</ul>
</ul>
<h2>LIST 3 SHOULD OF TWO TYPES: FRUITS AND VEGETABLES..</h2>

<ol type = 'A'>
<li>FRUITS</li>
<ol type='i'>
<li>Apples,Oranges,Pears,Banana</li>
</ol>
<li>VEGETABLES</li>
<ol type='i'>
<li>Corn</li>
<ol type='a'>
<li>On the cob</li>
<li>Cream</li>
</ol>
<li>Carrots</li>
<li>Green Beans</li>
</ol>
</ol>
</body>
</html>
---------------------------------------------------------------------------------------------------------------
4)Create a page that will display an image that has a border of size 2, a width of 200, and a
height of 200.
ANS: <html>
<body>
<img src="D:\MPHASIS TRAINING\HTML\HANDS_ON _OF _HTML" width="200" height="200"
alt="samadhi-photo-500x625" border="2" />
</body>
</html>
---------------------------------------------------------------------------------------------------------------------
5)Create a page which contains two links- one at the top and one at the bottom. On clicking the
top link, the page has to scroll down to the bottom of the page where bottom link is present. On
clicking the bottom link, the page has to scroll up to the top of the page.
ANS: <html>
<h1>Question 5</h1>
<body>
<a href="#top">Top</a>
<a href="#bottom">Bottom</a>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------
--------------
6)Write a HTML program to display the table having the columns(highlighted) as

Decimal ,English, Spanish, Korean, Binary .
Following are the data to be in each rows respective of their columns :
Decimals : {1,2,3,4,5}
English : {one,two,three,four,five}
Spanish:{uno,dos,tres,quarto,cinco}
Korean:{hanna,dool,set,net,daset}
Binary:{0001,0010,0011,0100,0101}
Each element is the data which will be our rows for the corresponding columns
ANS: <!DOCTYPE html>

<html>
<body>
<table border="2">
<tr>
<td>Decimals</td>
<td>English</td>
<td>Spanish</td>
<td>Korean</td>
<td>Binary</td>
</tr>
<tr class="">
<td>1</td>
<td>one</td>
<td>uno</td>
<td>hanna</td>
<td>0001</td>
</tr>
<tr class="">
<td>2</td>
<td>two</td>
<td>dos</td>
<td>dool</td>
<td>0010</td>
</tr>
<tr class="">
<td>3</td>
<td>three</td>
<td>tres</td>
<td>set</td>
<td>0011</td>
</tr>
<tr class="">
<td>4</td>
<td>four</td>
<td>quarto</td>
<td>net</td>
<td>0100</td>
</tr>
<tr class="">
<td>5</td>
<td>five</td>
<td>cinco</td>
<td>daset</td>
<td>0101</td>
</tr>
</table>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------
----------------------------------------
7)Write a HTML program to create visitor information capture. The page should have the
heading “Visitors information” and should ask the following information from the user :
• Email address using a textbox ,
• User’s interest web for research or purchase as check box.
• Occupation as drop down box and preselected value should be given as (select one).
• Check “want us to send you junk emails?” and the options given are “absolutely” and “no way
man” using the radio button.
• A horizontal line divides the heading and the body content. Once all the inputs are given, the
user should be able to submit or reset.
• This whole form should be tabulated using table tag.
ANS: <html>
<head>
<h1>Visitors information</h1>
</head>
<hr></hr>
<body>
<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
You interest web for:<br>

<input type="checkbox" id="research" name="research" value="research"/>
<label for="research">Research</label> <br>
<input type="checkbox" id="Purchase" name="Purchase" value="Purchase"/>
<label for="Purchase">Purchase</label> </br>
<label>Occupation</label>
<select name='Occupation'>
<option value=Select one>Select one</option>
<option value=Business>Businessman</option>
<option value=Street Vendor>Street Vender</option>
<option value=Farmer>Farmer</option>
<option value=Soldier>soldier</option>
<option value=Politician>Politician</option>
</select>
<br>
<label for="want us to send you junk emails?">want us to send you junk emails: </label>
<input type="radio" id="want us to send you junk emails?" name="want us to send you
junk emails?" value="absolutely"/>absolutely
<input type="radio" id="want us to send you junk emails?" name="want us to send you
junk emails?" value="no way mane"/>no way man </br>
<input type="submit" value="submit">

<input type="reset" value="reset">
</form>
</html>
-------------------------------------------------------------------------------------------------------------------------------
----------------
8)Write a HTML program to create an online registration form which captures the following data:
Username, Password, Confirm password, Name using text boxes.
Gender by radio buttons.
Address should be taken by multiple line inputs from the user.
Finally the Profession should be provided by selecting from the drop down box.
Make sure the contents of the page is aligned in the middle.
ANS: <html>
<body>
<form align = "center">
<fieldset>
<legend> <h2>REGISTRATION FORM </h2></legend>
<label>ENTER YOUR USERNAME:</label><br>
<input type="text" name="name"><br>
<label>ENTER YOUR PASSWORD</label><br>
<input type="password" name="pass"><br>
<label>CONFIRM YOUR PASSWORD</label><br>

<input type="password" name="pass"><br>
<label>ENTER YOUR FULLNAME</label><br>
<input type="text" name="name"><br>
<br><label>ENTER YOUR GENDER</label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male <br>
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
<input type="radio" id="gender" name="gender" value="others"/>Others <br/>
<label>Profession</label>
<select name='Profession'>
<option value=Associate Software Engineer>Associate Software Engineer</option>
<option value=Software Engineer>Software Engineer</option>
<option value=Team Lead>Team Lead</option>
<option value=Senior Team Lead>Senior Team Lead</option>
</select>
<br>Enter your Address:<br>
<textarea></textarea><br>
</form>
</html>
-------------------------------------------------------------------------------------------------------------------------------
---------------
9) Write a HTML program to display the HTML page as described below:
• Create a page which is divided in 3 parts. 30% horizontally on top and the rest 70 % bellow is
split vertically in 2 parts again 30 % and 70% each
• The Top header frame should display an image
• Left side below frame should have a menu of “Font” and “Alignment”.
• If we click on “Font” link a different page which contains 5 different fonts with font’s names
should be shown on the RHS
• If we click on “Alignment” link a different page which contains a different alignment type should
be shown on the RHS frame.
• For this create 2 webpages named Font and Alignment.
• Font page should have 5 names of different fonts displayed like this
Agency FB
Cambria
Elephant
• Alignment page should have sample text aligned to different alignments
ANS: ab.html
-------------------------------
<html>
<frameset rows="30%,70%">
<frame src="headd.html"/>
<frameset cols="30%,70%">
<frame src="LHS.html">
<frame src="Right.html" name="RightFrame">
</frameset>
</framset>
</html>
headd.html
---------------------
<html>
<body>
<img src="http://dashboard.valueminds.com/images/valuemindslogo.jpg">
</body>
</html>
LHS.html
----------------------------
<html>
<h1>Menu<h1>
<a href="RHS.html" target="RightFrame"> Font</a><br><br>
<a href="RHSS.html" target="RightFrame"> Alignment</a>
</html>
RHS.html
-----------------------
<ul type"dot">
<li>Agency FB</li>
<li>Cambria</li>
<li>Elephant</li>
RHSS.html
-------------------
<ul type"dot">
<li>Top</li>
<li>Left</li>
<li>Right</li>
<li>Center</li>
Right.html
--------------------------
<html>
<body>
<h1>Welcome</h1>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------
10)Create a webpage which displays different images on screen as you resize the browser
Take 4 images like img1.jpg , img2.jpg, img3.jpg , img4.jpg which should be displayed on the
web page and only one should be visible at any time as you keep resizing the screen it should
start changing to img2 and then to img3 and so on.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */

.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">

<div class="numbertext">1 / 3</div>
<img src="E:\SQL TRAINING\html\man-walking-dog.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>

<img src="E:\SQL TRAINING\html\shutterstock_1458128810.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>

<img src="E:\SQL TRAINING\html\24701-nature-natural-beauty.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------
------------
11)Create a small table with 2 columns Name and contact no, Populate the table with 5 of your
friends names and their contact nos. When the mouse is taken over the table it should highlight
the row where the mouse is placed.(hint : use table hover)
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {background-color: blue;}

</style>
</head>
<body>
<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>
<table>
<tr>
<th>Name</th>
<th>Contact Number</th>
</tr>
<tr>
<td>Kohli</td>
<td>8888888888</td>
</tr>
<tr>
<td>Dhoni</td>
<td>9999999999</td>
</tr>
<tr>
<td>KL Rahul</td>
<td>8987898785</td>
</tr>
<tr>
<td>Shikhar</td>
<td>8478523698</td>
</tr>
<tr>
<td>Rohit</td>
<td>9632587412</td>
</tr>
</table>
</body>
-------------------------------------------------------------------------------------------------------------------------------
--------------------------------
12)Create a table of food contents with its calorie value.

Display the rows of food contents with calories
<=300 in light green background,
301 to 700 in light blue,
700 - 1200 in light orange
>1200 in light red. (Hint: use table table-striped )
ANS: <html>
<head>
</head>
<body>
<table border="border">
<tr>
<th>Food contents</th>
<th>Calories</th>
</tr>
<tr style="background-color:lightgreen">
<td>Spinach</td>
<td>290</td>
</tr>
<tr style="background-color:lightblue">
<td>Lettuce</td>
<td>350</td>
</tr>
<tr style="background-color:F5A391">
<td>greens</td>
<td>759</td>
</tr>
<tr style="background-color:F85F5F">
<td>Fish</td>
<td>1400</td>
</tr>
</table>
</html>
-------------------------------------------------------------------------------------------------------------------------------
--------
13)Create a webpage to display Tulips.jpg from sample pictures of your machine. Ensure the
image has soft round edges and as you resize the screen, the image should also resize itself
and fit its display to full page size.
ANS: <html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image:
url("http://1.bp.blogspot.com/-pQOjVrSerSc/UIDSllEbbyI/AAAAAAAADRQ/ruPuYf6FauM/
s1600/tulip+flower.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */

background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------
-------
14)Create a webpage called OnlineRead with give look and fee Page should display Book
Types as buttons with given background effect:
For All – white
Kids – bark blue
Teens – Green
Scientific – Light Blue
Crime – OrangeHorror – red
Feedback – shown
In next line display the comfort font size with buttons of varying sizes ranging from big to small
(in 4 steps)
ANS: 
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Book</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-content">
<div class="w3-container">
<body style="background-color:snow;">
<p>Feedback</p>
</body>

<html>
<body>
<body style="background-color:white;">
</body>
<p>For All</p>
</body>
</html>

<html>
<body>
<body style="background-color:DarkBlue ;">
</body>
<p>Kids</p>
</body>
</html>

<html>
<body>
<body style="background-color:lightblue;">
</body>
<p>Scientific</p>
</body>
</html>

<html>
<body>
<body style="background-color:Green;">
</body>
<p>Teens</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Online read with give look and feel</title>
<meta charset="UTF-8">
<meta name="button" content="width=device-width, initial-scale=1">
<link rel="button" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-content">
<div class="w3-container">
<h1>Online read with give look and feel</h1>
<h3>Table of Contents</h3>
<p>
<a href="For all.html">1. For all</a>
</p>
<p>
<a href="Kids.html">2. Kids</a>
</p>
<p>
<a href="Teens.html">3. Teens</a>
</p>
<p>
<a href="Scientific.html">4. Scientific</a>
</p>
<p>
<a href="Crime.html">5. Crime</a>
</p>
<p>
<a href="Feedback.html">6. Feedback</a>
</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {background-color: #008CBA;} /* Blue */

.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
</style>
</head>
<body>
<h2>Button Colors</h2>
<p>Change the background color of a button with the background-color property:</p>
<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>

<html>
<body>
<body style="background-color:OrangeRed;">
</body>
<p>Crime</p>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------
----
CSS HANDS-ON:
--------------
1)Create a web page that displays an image of size approximately 200 x 200 px, which gets
itself repeated fully on the page. : (Use CSS)
ANS: <html>
<head>
<title>DISPLAY IMAGE</title>
<style>
#example {
width: 200px;
height: 200px;
background-image: url(C:\Users\TARAK\Desktop\image.jpg);
background-repeat: repeat;
background-size: auto ;
</style>
</head>
<body>
<img src="C:\Users\SUSHA\Desktop\image.jpg" id="example" ></img>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------
-
2)Using CSS, create a web page that displays text “Welcome to CSS World” with an image as
its border,
a. Image repeats itself to fit the contents
b. Image should stretch to fit the contents
ANS: <html>
<head>
<title></title>
<style>
#borderimg1 {
border: 15px solid transparent;
padding: 15px;
border-image-source: url(border.png);
border-image-repeat: stretch;
border-image-slice: 30;
}
#borderimg2 {
border: 15px solid transparent;
padding: 15px;
border-image-source: url(border.png);
border-image-repeat: repeat;
border-image-slice: 30;
}
</style>
</head>
<body>
<p id="borderimg1">Welcome to CSS World</p>

<p id="borderimg2">Welcome to CSS World</p>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
3)Create a webpage that displays the hyperlink with the following color attributes.
• Set the color as %FF0000 for unvisited link
• Set the color as %FFFF00 for visited link
• Set the color as %FF00FF for mouse over link
• Set the color as %0000FF for selected link

<html>
<head>
<style>
a:unvisited {
color: green;
background-color: transparent;
}
a:visited {
color: yellow;
}
a:hover {
color: magenta;
text-decoration: underline;
}
a:selected {
color: blue;
}
</style>
</head>
<body>
<h1>Link_Colors</h1>
<p>You can change the default colors of links</p>
<a href="https://www.google.co.in">google</a>
</body>
</html>
-----------------------------------------------------------------------------------------------------------
4)Create a webpage that displays the hyperlink with the following properties.
• Set the color as red for unvisited link
• Set the text decoration as underline for unvisited link

<html>
<head>
<style>
a:unvisited {
color: red;
}
</style>
</head>
<body>
<a href="https://www.gmail.co.in">gmail</a>
</body>
</html>
-----------------------------------------------------------------------------------------------------------
5)Create a webpage that displays the hyperlink with the following background color properties.
• Set the background color as %FF0000 for unvisited link
• Set the background color as %FFFF00 for visited link
• Set the background color as %FF00FF for mouse over link
• Set the background color as %0000FF for selected link

<html>
<head>
<style>
a:unvisited {
color: green;
}
a:visited {
color: yellow;
}
a:hover {
color: magenta;
}
a:selected {
color: blue;
}
</style>
</head>
<body>
<h1>Link_Colors</h1>
<p>You can change the default colors of links</p>
<a href="https://www.google.co.in">google</a>
</body>
</html>
------------------------------------------------------------------------------
------------------------------------------------------------------------------
JAVASCRIPT HANDSON:
-------------------
JavaScript
1) Write a JavaScript program which will print ‘HelloWorld’ in the body of the HTML document
<html>
<body>
<script>
document.write("HelloWorld!");
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
2) Write a JavaScript function that reverses a number.
I/O: 32243
Expected O/P : 34223
<!doctype html>
<html>
<head>
<script>
function palin()
{
var a,no,b,temp=0;
no=Number(document.getElementById("no_input").value);
b=no;
while(no>0)
{
a=no%10;
no=parseInt(no/10);
temp=temp*10+a;
}
alert(temp);
}
</script>
</head>
<body>
Enter any Number: <input id="no_input">
<button onclick="palin()">Check</button></br></br>
</body>
</html>
---------------------------------------------------------------------------------------------------------
3)Write a JavaScript function that checks whether a passed string is palindrome or not?
<html>
<head> <title> JavaScript Palindrome </title>
</head>
<body>

<script>
function validatePalin(str) {
// get the total length of the words

const len = string.length;
// Use for loop to divide the words into 2 half

for (let i = 0; i < len / 2; i++) {
// validate the first and last characters are same

if (string[i] !== string[len - 1 - i]) {
alert( 'It is not a palindrome');
}
}
alert( 'It is a palindrome');
}
// accept the string or number from the prompt

const string = prompt('Enter a string or number: ');
const value = validatePalin(string);
console.log(value);
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------
------
4) Write a JavaScript function that accepts a string as a parameter and converts the first letter of
each word of the string in upper case.
<!DOCTYPE html>
<html>
<body>
</h1>
<input id = "input" type="text" name="input"/>

<button onclick="capitalizeFLetter()">
Click to capitalize
</button>
<h3 id = "div" style="color: green">
</h3>
<script>
function capitalizeFLetter() {
var input = document.getElementById("input");
var x = document.getElementById("div");
var string = input.value;
x.innerHTML = string[0].toUpperCase() +
string.slice(1);
}
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
5)Write a JavaScript program that displays the position of the first occurrence of "World" in the
variable txt.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var txt = "Hello World";
document.getElementById("demo").innerHTML = txt.indexOf("World");
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------
6) Write a JavaScript program that converts the text to upper case.
<script>
function func() {
var str = 'my name is Jeevan TT';
var string = str.toUpperCase();
document.write(string);
}
func();
</script>
---------------------------------------------------------------------------------------------------------
7) Write a JavaScript function to remove specified number of characters from a string.
ans:
truncate_string = function (str1, length) {
if ((str1.constructor === String) && (length>0)) {

return str1.slice(0, length);
}
};
console.log(truncate_string("Jeevan",4));
------------------------------------------------------------------------------------------------------------------
8) Create an HTML page with two textboxes and a Calculate button:
When user enters the numbers and clicks the Calculate button, it has to alert the sum.
ans: <head>
<script>
function add()
{
var a=parseInt(document.f1.t1.value)
var b=parseInt(document.f1.t2.value)
var u=a+b;
document.f1.value=u;
alert(u);
}
</script>
</head>
<body>
<form name="f1">
<table>
<tr>
<td><lable></b>first number</b></lable></td>
<td><input type="text" name="t1"></td>
</tr>
<tr>
<td><lable></b>second number</b></lable></td>
<td><input type="text" name="t2"></td>
</tr>
<tr>
<td colspan="2"><center><button onclick="add()">Calculate</button></center></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
----------------------------------------------------------------------------------------------------------
9) Write a JavaScript program which will have one textbox to get input as string and after giving
input when you leave the input textbox, a function is triggered which transforms the input text to
uppercase.
ans:<!DOCTYPE html>
<html>
<body>
Enter your name: <input type="text" id="fname" onblur="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the input text to
upper case.</p>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------
10)Create a HTML page with 4 hyperlinks named white, red, blue and pink.
The background colour of the HTML page will change based on the link which is clicked.
Write a javascript function to implement it.
<!DOCTYPE HTML>
<html>
<body style = "text-align:center;">
<p id = "GFG_UP" style =

"font-size: 16px; font-weight: bold;">
</p>
<button onclick = "white()">

white
</button>
<button onclick = "red()">
red
</button>
<button onclick = "blue()">
blue
</button><button onclick = "pink()">
pink
</button>
<p id = "GFG_DOWN" style =

"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var str = "Click on button to change the background color";
el_up.innerHTML = str;
function changeColor(color) {
document.body.style.background = color;
}
function white() {
changeColor('white');
el_down.innerHTML = "Background Color changed";
}
function red() {
changeColor('red');
}
function blue() {
changeColor('blue');
}
function pink() {
changeColor('pink');
}
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
11) Write a JavaScript program which will
a. give an alert message of today’s date.
b. prompt the user to give their name and gives an alert message ‘Hello’ and username.
c. prompt the user to give 2 numbers and alerts the sum of those 2 numbers.
<script type='text/javascript'>
alert(new Date());
</script>
<script type="text/javascript">
function msg(){
var v= prompt("Your Name");
alert("Hello "+v);
}
document.write(msg());
</script>
var a = prompt("Enter first number");

var b = prompt("Enter second number");
var x=parseInt(a);
var y=parseInt(b);
alert(x+y);
</script>
------------------------------------------------------------------------------------------------------------------------
12)Write a JavaScript program that prompts the user to enter a number and display whether the
number given is odd or even.
var a = prompt("Enter number");

var x=parseInt(a);
if(x%2==0)
{
alert("even");
}
else
{
alert("odd");
}
</script>
----------------------------------------------------------------------------------------------------------------------------
13)Create program to display current time in a textbox (HH:MM:SS) such that the value in the
time textbox is dynamic (Time should get updated every second) and not static.
[Hint: Use setTimeOut function]
Current Time: <span id="txt"></span>
<script>
window.onload=function(){getTime();}
function getTime()
{
var today=new Date();
var h=today.getHours()%12;
var m=today.getMinutes();
var s=today.getSeconds();
m=checkTime(m);
s=checkTime(s);
var u=document.getElementById('txt').innerHTML=h+":"+m+":"+s;
setTimeout(function(){getTime()},1000);
document.my.uu.value=u;
}
("getTime()",1000);
function checkTime(i)
{
if (i<10)
{
i="0" + i;
return i;
}
</script>
<form name="my">
<input type="text" name="uu" >
</form>
-----------------------------------------------------------------------------------------------------------------------------
14)Write validation functions and modify the onSubmit event Handler in the form code to
validate the following form fields:
1. Member number
• Must be entered
• Must be a number
2. Password
• Must be entered
• Must be longer than 4 characters

If an error occurs, use an alert box to display an error message for the first field in error and
place the cursor in the first field in error.
<html>
<body>
<script>
function validateform(){
var name=document.myform.number.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("number can't be blank");
return false;
}else if(password.length<4){
alert("Password must be at least 4 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post"
action="http://www.javatpoint.com/javascriptpages/valid.jsp" onsubmit="return validateform()" >
number: <input type="number" name="number"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------
15)Write validation functions and modify the onSubmit event Handler in the form code to
validate the following form fields:
1. Phone Number
• Must be entered
• Must be in below format
XXX-XXX-XXXX
XXX.XXX.XXXX
XXX XXX XXXX

<!DOCTYPE html>
<html lang="en">
<head>
<script>
function phoneNumberCheck(phoneNumber)
{
var regEx = ^\+{0,2}([\-\. ])?(\(?\d{0,3}\))?([\-\. ])?\(?\d{0,3}\)?([\-\. ])?\d{3}([\-\. ])?\d{4};
if(phoneNumber.value.match(regEx))
{
return true;
}
else
{
alert("Please enter a valid phone number.");
return false;
}
}
</script>
</head>
<body>
<div class="mail">
<h2>JavaScript Phone Number Validation</h2>
<form name="form1" action="#">
Phone Number: <input type='text' name='phone'/></br></br>
<input type="submit" name="submit" value="Submit"
onclick="phoneNumberCheck(document.form1.phone)"/>
</form>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------
1)Write a program to check if a given integer number is Positive, Negative, or Zero.

<html>
<body>
<script>
const num = parseInt(prompt("Enter a number: "));
if(num==0)
{
document.write("zero");
}
else if (num>0)
{
document.write("positive");
}
else
{
document.write("negative");
}
</script>
</body>
</html>
---------------------------------------------------------------------------------
2) Write a program to check if a given integer number is odd or even.
<html>
<body>
<script>
const num = parseInt(prompt("Enter a number: "));
if(num%2==0)
{
document.write("EVEN");
}
else
{
document.write("odd");
}
</script>
</body>
</html>
-----------------------------------------------------------------------------------------
3)Write a program to receive a color code from the user (an Alphabhet).
The program should then print the color name, based on the color code given.
The following are the color codes and their corresponding color names.
R->Red, B->Blue, G->Green, O->Orange, Y->Yellow, W->White.
If color code provided by the user is not valid then print "Invalid Code".
<script>
var n=prompt("Enter a color code");
switch(n)
{
case 'R':
document.write("Red");
break;
case 'B':
document.write("Blue");
break;
case 'G':
document.write("Green");
break;
case 'O':
document.write("Orange");
break;
case 'Y':
document.write("Yellow");
break;
case 'W':
document.write("White");
break;
default:
document.write("Invalid code");
}
</script>
-------------------------------------------------------------------------------------
4) Write a program to receive a number and print the corresponding month name.
Example1) 12
O/P Expected : December
Example3) 15
O/P Expected : Invalid month
<script>
var n=prompt("Enter the month number");
switch(n)
{
case '1':document.write("January");
break;
case '2':
document.write("febrauary");
break;
case '3':
document.write("March");
break;
case '4':
document.write("april");
break;
case '5':
document.write("May");
break;
case '6':
document.write("june");
break;
case '7':
document.write("july");
break;
case '8':
document.write("august");
break;
case '9':
document.write("September");
break;
case '10':
document.write("October");
break;
case '11':
document.write("November");
break;
case '12':
document.write("December");
break;
default:
document.write("Invalid month");
}
</script>
-----------------------------------------------------------------------------------------
5) Write a program to print numbers from 1 to 10 in a single row with one tab space.
<script>
function printNos(n)
{
if(n > 0)
{
printNos(n - 1);
document.write(n + " ");
}
return;
}
printNos(10);
</script>
--------------------------------------------------------------------------------------------------
6)Write a program to print even numbers between 23 and 57.
<script>
var sp;
for(sp=22;sp<57;sp+2)
{
document.write(sp);
}
</script>
------------------------------------------------------------------------------------------------
7)Write a program to check if a given number is prime or not.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function p() {
var n, i, flag = true;
n = document.myform.n.value;
n = parseInt(n)
for(i = 2; i <= n - 1; i++)
if (n % i == 0) {
flag = false;
break;
}
if (flag == true)
alert(n + " is prime");
else
alert(n + " is not prime");
}
</script>
</head>
<body>
<center>
<form name="myform">
Enter the number:
<input type="text" name=n value="">
<br><br>
<input type="button" value="Check" onClick="p()">
<br>
</form>
</center>
</body>
</html>
------------------------------------------------------------------------------
8)Write a program to print prime numbers between 10 and 99.
<script>
var n;
var i;
for(n=10;n<=99;n++)
{
var backup=1;
for(i=2;i<=n-1;i++)
{
if(n%i==0)
{
backup=0;
break;
}
}
if(backup==1)
{
document.write(n+" "+"is a prime num.."+"\n");
}
}
</script>

Create HTML forms to capture user information

Uploaded by

Document Information

Original Title

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

Create HTML forms to capture user information

Uploaded by

Copyright:

Available Formats

1)Create a webpage to display your name with every letter having a different heading size.

3) We need to have a HTML containing three lists.

List 1 will contain the following :

List 2 will contain :

List 3 should be of two types : Fruits and Vegetables

a)On the cob

iii. Green Beans

<h1> THE 3 LIST STARTS HERE</h1>

<h2>LIST 1 CONTAINS THE FOLLOWING..</h2>

<ol type = '1'>

<h2>LIST 3 SHOULD OF TWO TYPES: FRUITS AND VEGETABLES..</h2>

6)Write a HTML program to display the table having the columns(highlighted) as

Following are the data to be in each rows respective of their columns :

ANS: <!DOCTYPE html>

• User’s interest web for research or purchase as check box.

• This whole form should be tabulated using table tag.

You interest web for:<br>

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

Username, Password, Confirm password, Name using text boxes.

Gender by radio buttons.

Address should be taken by multiple line inputs from the user.

Make sure the contents of the page is aligned in the middle.

<form align = "center">

<legend> <h2>REGISTRATION FORM </h2></legend>

<label>ENTER YOUR USERNAME:</label><br>

<input type="text" name="name"><br>

<label>ENTER YOUR PASSWORD</label><br>

<input type="password" name="pass"><br>

<label>CONFIRM YOUR PASSWORD</label><br>

<label>ENTER YOUR FULLNAME</label><br>

<input type="text" name="name"><br>

<br><label>ENTER YOUR GENDER</label><br>

<input type="radio" id="gender" name="gender" value="male"/>Male <br>

<input type="radio" id="gender" name="gender" value="female"/>Female <br/>

<input type="radio" id="gender" name="gender" value="others"/>Others <br/>

<option value=Associate Software Engineer>Associate Software Engineer</option>

<option value=Software Engineer>Software Engineer</option>

<option value=Team Lead>Team Lead</option>

<option value=Senior Team Lead>Senior Team Lead</option>

<br>Enter your Address:<br>

9) Write a HTML program to display the HTML page as described below:

• The Top header frame should display an image

• For this create 2 webpages named Font and Alignment.

• Alignment page should have sample text aligned to different alignments

ANS: <!DOCTYPE html>

/* Number text (1/3 etc) */

/* On smaller screens, decrease text size */

<div class="mySlides fade">

<div class="mySlides fade">

<div class="mySlides fade">

tr:hover {background-color: blue;}

12)Create a table of food contents with its calorie value.

/* Center and scale the image nicely */

.button2 {background-color: #008CBA;} /* Blue */

<p>Change the background color of a button with the background-color property:</p>

a. Image repeats itself to fit the contents

b. Image should stretch to fit the contents

<p id="borderimg1">Welcome to CSS World</p>

• Set the color as %FF0000 for unvisited link

• Set the color as %FFFF00 for visited link

• Set the color as %FF00FF for mouse over link

• Set the color as %0000FF for selected link

ANS: <!DOCTYPE html>