Name : Shah Vatsal Mukeshbhai
Roll no : 128
Sem : 4th
Subject : Web Development
Subject code : 405
- Reverse a number.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h2 style="color:green;">
Que 1: Reverse a number.</h2>
<script language="javascript">
function reverse(){
var num=document.getElementById("num").value;
var reverse=0;
while(num !=0)
{
reverse= (reverse*10)+(num % 10);
num= parseInt(num/10);
}
document.getElementById("div1").innerHTML="<br>"+ reverse + " is a reverse
number";
}
</script>
<form>
<input type="text" id="num" placeholder="Enter Number"><br><br>
<input type="button" value="check if reverse number" onclick="reverse()">
<div id="div1"></div>
</form>
</body>
</html> - Write a program to convert temperatures to and from Celsius, Fahrenheit.
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h2 style="color:green;">Que 2: Write a program to convert temperatures to and from
Celsius, Fahrenheit.</h2>
<script language="javascript">
function temp_convert(degree){
var temprature;
if(degree=="C")
{
temprature=document.getElementById("c").value * 9/5+32;
document.getElementById("f").value=Math.round(temprature);
}
else
{
temprature=(document.getElementById("f").value -32)*5/9;
document.getElementById("c").value=Math.round(temprature);
}
}
</script>
<form>
<p><input id="c" onkeyup="temp_convert('C')">degrees in celcius</p><br><br>
<p><input id="f" onkeyup="temp_convert('F')">degrees in farenhit</p><br><br>
<div id="div1"></div>
</form>
</body>
</html>
- Check if input number is prime or not.
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h2 style="color:green;">Que 3:Check if input number is prime or not.</h2>
<script language="javascript">
function is_prime(){
var n=document.getElementById("n").value;
for(var i=2;i<n;i++)
{
if(n%i0)
{
var flag=1;
break;
}
}
if(flag1)
{
document.getElementById("div1").innerHTML=n+" is not a prime number";
}
else
{
document.getElementById("div1").innerHTML=n+" is a prime number";
}
}
</script>
<form>
<input type="text" id="n" placeholder="Enter Number"><br><br>
<input type="button" value="check if prime or not" onclick="is_prime()"><br><br>
<div id="div1"></div>
</form>
</body>
</html> - Write a program to calculate the factorial of a number.
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h2 style="color:green;">Que 4: Write a program to calculate the factorial of a number
using recursion.</h2>
<script language="javascript">
function factorial(){
var n=document.getElementById("n").value;
var fact=1;
for(var i=1;i<=n;i++)
{
fact=fact*i;
}
document.getElementById("div1").innerHTML= "Factorial of "+n+" is "+fact;
}
</script>
<form>
<input type="text" id="n" placeholder="Enter Number"><br><br>
<input type="button" value="click here" onclick="factorial()"><br><br>
<div id="div1"></div>
</form>
</body>
</html> - Check if string is palindrome or not.
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h2 style="color:green;">Que 5: Check if string is palindrome or not.</h2>
<script language="javascript">
function palindrome() {
var str =document.getElementById("str").value;
var len = str.length;
for (var i = 0; i < len / 2; i++) {
if (str[i] !== str[len - 1 - i]) {
return document.getElementById("div1").innerHTML="is not a palindrome";
}
}
return document.getElementById("div1").innerHTML="is a palindrome";
}
document.getElementById("string is "+str+"<br>");
</script>
<form>
<input type="text" id="str" placeholder="Enter String"><br><br>
<input type="button" value="is string palindrome or not"
onclick="palindrome()"><br><br>
<div id="div1"></div>
</form>
</body>
</html> - Write a function that accepts a string as a parameter and converts the first letter of
each word of the string in upper case.
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h2 style="color:green;">Que 6:Write a function that accepts a string as a parameter and
converts
the first letter of each word of the string in upper case.</h2>
<script language="javascript">
function convertstring() {
var str = document.getElementById("str").value;
var a = str.split(" ");
for (var i=0;i<a.length;i++) {
a[i] =a[i].charAt(0).toUpperCase() + a[i].slice(1);
}
const str2 = a.join(" ");
document.getElementById("div1").innerHTML= str2;
// alert(str2);
}
</script>
<form>
<input type="text" id="str" placeholder="Enter String"><br><br>
<input type="button" value="click here" onclick="convertstring()"><br><br>
<div id="div1"></div>
</form>
</body>
</html> - Write a program to get the extension of a filename.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Extension</title>
<script>
function exten()
{
var a = document.getElementById("e1").value.split(".")
document.getElementById("ext").innerHTML = "Extension is :" + a[a.length-1];
}
</script>
</head>
<body>
<form>
Enter Url : <input type="text" id="e1"><br>
<input type="button" id="b1" value="Click" onclick="exten()">
</form>
<div id="ext">
</div>
</body>
</html> - Write a function that accepts a string as a parameter and find the longest word within
the string.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Longest Word</title>
<script>
function show()
{
var a = document.getElementById("l1").value.split(" ")
var l = a[0]
for(var i=0;i<a.length-1;i++)
{
if(a[i].length>l.length)
{
l=a[i]
}
}
document.getElementById("long").innerHTML = "Longest Word is : " + l
}
</script>
</head>
<body>
<form>
Enter String : <input type="text" id="l1"><br>
<input type="button" id="b1" value="Click" onclick="show()">
</form>
<div id="long">
</div>
</body>
</html>
- Write a JavaScript function to add specified minutes to a Date object.
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h2 style="color:green;">Que 9:Write a JavaScript function to add specified minutes to a
Date object</h2>
<script>
function addtime(){
var date = new Date();
document.write(date);
var mins = document.getElementById("mins");
mins=parseInt(mins)+date.getminutes();
date.setminutes();
document.getElementById("div1").innerHTML="after adding the minutes to date, time
is "+date;
}
</script>
<form>
<input type="text" id="txtbox" placeholder="Enter minutes">
<input type="button" id="btn" onclick="addtime()" value="Add mins">
<div id="div1"></div>
</form>
</body>
</html> - Write a program to determine whether a current year is a leap year or not.
<html>
<head>
<h2 style="color:green;">Que 10:Write a program to determine whether a current year is a
leap year or not.</h2>
</head>
<body>
<script>
function leapyear() {
var date = new Date();
var year = date.getFullYear();
if ((0 == year[0] % 4) && (0 != year[0] % 100) || (0 == year[0] % 400)) {
document.getElementById("div1").innerHTML = year + " is leap year.";
} else {
document.getElementById("div1").innerHTML = year + " is not leap year.";
}
}
</script>
<form>
<input type="button" onclick="leapyear()" value=" current year is leap or
not"><br><br>
<div id="div1"></div>
</form>
</body>
</html> - Write a JavaScript function to get difference between two dates in days.
<html>
<head>
<h2 style="color:green;">Que 11: Write a JavaScript function to get difference between
two dates in days.</h2>
</head>
<body>
<script>
function date_difference() {
var d1 = document.getElementById("datebox1").value;
var date1 = new Date(d1);
var d2 = document.getElementById("datebox2").value;
var date2 = new Date(d2);
var difference = (date2.getTime() - date1.getTime())/(10006060*24);
document.getElementById("div1").innerHTML = "difference between date is " +
difference + " days.";
}
</script>
<form>
<input type="date" id="datebox1"><br>
<input type="date" id="datebox2"><br>
<input type="button" onclick="date_difference()" value="difference"><br><br>
<div id="div1"></div>
</form>
</body>
</html> - Write a JavaScript program to calculate age from birth date.
<html>
<head>
<h2 style="color:green;">Que 12: Write a JavaScript program to calculate age from birth
date.</h2>
</head>
<body>
<script>
function age()
{
var d=new Date(date.value);
var m = Date.now() - d.getTime();
var dt = new Date(m);
var y = dt.getUTCFullYear();
var a = Math.abs(y - 1970);
document.getElementById("txtR").value = a + " years";
}
</script>
<form name="f1">
Date :<input type="text" placeholder="MM/DD/YYYY" id="date"><br><br>
<input type="button" value="Age" onclick="age()"><br><br>
Age :<input type="text" id="txtR">
</form>
</body>
</html> - Write a program to find the largest of five numbers. Display an alert box to show the
result.
<html>
<head>
<h2 style="color:green;">Que 13: Write a program to find the largest of five numbers.
Display an alert box to show the result.</h2>
</head>
<body>
<script>
function array_max(temp)
{
var arr = temp.split(',');
var largest = arr[0];
for(var i=0;i<arr.length;i++)
{
if(largest<arr[i])
{
largest = arr[i];
}
}
alert("largest of five numbers is:"+ largest);
}
</script>
<form>
Enter Array :<input type="text" placeholder="Enter array elements"
id="text"><br><br>
<input type="button" onclick="array_max(text.value)" class="btn"
value="Result">
<div id="Result"></div>
</form>
</body>
</html> - Write a program to compute the sum of an array of integers.
<html>
<head>
<h2 style="color:green;">Que 14: Write a program to compute the sum of an array of
integers.</h2>
</head>
<body>
<script>
function sum(temp)
{
let arr = temp.split(',');
let sum = arr.reduce(function(a,b)
{return parseInt(a)+parseInt(b)},0);
alert("sum of array element is:"+ sum);
}
</script>
<form>
Enter Array :<input type="text" placeholder="Enter array elements"
id="text"><br><br>
<input type="button" onclick="sum(text.value)" class="btn" value="Add">
<div id="Result"></div>
</form>
</body>
</html> - Write a program for binary search.
<html>
<head>
<h2 style="color:green;">Que 15: Write a program for binary search.</h2>
</head>
<body>
<script>
var i = 0;
var array = Array();
function add()
{
array[i] = document.getElementById("text1").value;
i++;
document.getElementById("text1").value = "";
}
function display()
{
var e = "<hr/>";
for (var i=0;i<array.length;i++)
{
e += "Element " + i + " = " + array[i] + "<br/>";
}
document.getElementById("Result").innerHTML = e;
}
function search()
{
var x=prompt("Enter the Number: ");
var e = "<hr/>";
var f = 0;
var l = array.length-1;
var m = Math.floor((f+l)/2);
if(array[m]!=x && f<l)
{
if(x<array[m])
{
l=m-1;
}
else if(x>array[m])
{
f=m+1;
}
m = Math.floor((f+l)/2);
}
let res = (array[m]!=x) ? -1 : m;
e +=Index of your element : ${res}.;
document.getElementById("Result").innerHTML = e;
}
</script>
<form>
Enter Number: <input type="text" placeholder="Enter Number" id="text1"><br>
<input type="button" class="btn" value="Add" onclick="add()"><br>
<input type="button" class="btn" value="Display" onclick="display()"><br>
<input type="button" class="btn" value="click here" onclick="search()">
<div id="Result"></div>
</form>
</body>
</html> - Write a merge sort program.
<html>
<head>
<h2 style="color:green;">Que 16: Write a merge sort program.</h2>
</head>
<body>
<script>
var i = 0;
var arr = Array();
function add()
{
arr[i] = document.getElementById("text1").value;
i++;
document.getElementById("text1").value = "";
}
function display()
{
var e = "<hr/>";
for (var i=0;i<arr.length;i++)
{
e += "Element " + i + " = " + arr[i] + "<br/>";
}
document.getElementById("Result").innerHTML = e;
}
function mSort(array)
{
if(array.length===1)
{
return array
}
const m = Math.floor(array.length/2)
const l = array.slice(0,m)
const r = array.slice(m)
return merge(mSort(l),mSort(r))
}
function merge(l, r)
{
var res = [];
var l1 = 0;
var r1 = 0;
while(l1<l.length && r1<r.length)
{
if(l[l1]<r[r1])
{
res.push(l[l1]);
l1++;
}
else
{
res.push(r[r1]);
r1++;
} }
return res.concat(l.slice(l1).concat(r.slice(r1)));
}
function mergeSort()
{
var a = Array();
var ans = mSort(arr);
document.getElementById("Result").innerHTML = "<hr/>
SORTED LIST: " + ans;
}
</script>
<form>
Enter Number: <input type="text" placeholder="Enter Number" id="text1">
<input type="button" class="btn" value="Add" onclick="add()">
<input type="button" class="btn" value="Display" onclick="display()">
<input type="button" class="btn" value="click here" onclick="mergeSort()">
<div id="Result"></div>
</form>
</body>
</html> - Write a program to join all elements of the given array into a string using given delimeter.
Input array : myArr = ["str1", " str2", " str3"]; Output : "str1, str2, str3" OR " str1+ str2+str3"
<html>
<head>
<h2 style="color:green;">Que 17:Write a program to join all elements of the
given array into a string using given delimeter.<br>
Input array : myArr = ["str1", " str2", " str3"]; <br>Output : "str1, str2, str3"
<br>OR<br> " str1+ str2+str3"</h2>
</head>
<body>
<script>
var i = 0;
var array = Array();
function add()
{
array[i] = document.getElementById("text1").value;
i++;
document.getElementById("text1").value = "";
}
function display()
{
var e = "<hr/>";
for (var i=0;i<array.length;i++)
{
e += "Element " + i + " = " + array[i] + "<br/>";
}
document.getElementById("Result").innerHTML = e;
}
function res()
{
var e = "<hr/>";
var del = prompt("Enter delimeter: ");
document.getElementById("Result").innerHTML = e +
array.join(del);
}
</script>
<form>
Enter String: <input type="text" placeholder="Enter String" id="text1"><br>
<input type="button" class="btn" value="Add" onclick="add()"><br>
<input type="button" class="btn" value="Display" onclick="display()"><br>
<input type="button" class="btn" value="String" onclick="res()"><br>
<div id="Result"></div>
</form>
</body>
</html> - Write a program to convert string to array. (Reverse of above program)
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h2 style="color:green;"> Que 9: Decompose parts of input URL.e.g.<br>
Input: http://www.google.com/page1.html<br>
Output: <br>
Protocol: http<br>
Domain: www.google.com<br>
Page: page1<br>
Extension: html<br></h2>
<script language="javascript">
var url = prompt("enter url - ", "http://www.google.com/page1.html");
Protocol = url.split(":");
document.write("Protocol - " + Protocol[0]);
Domain = Protocol[1].split("/");
document.write("<br>Domain - " + Domain[2]);
Page = Domain[3].split(".");
document.write("<br>Page - " + Page[0]);
Extension = Page[1];
document.write("<br>Extension - " + Extension);
</script>
</body>
</html> - Decompose parts of input URL.
e.g.
Input: http://www.google.com/page1.html
Output:
Protocol: http
Domain: www.google.com
Page: page1
Extension: html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script>
function url()
{
var url = document.getElementById("u1").value.split(":")
var str = "Protocol : " + url[0] + "<br/>"
var b = url[1].split("/")
str += "Domain : " + b[2] + "<br/>"
var c = b[3].split(".")
str += "Page : " + c[0]+ "<br/>"
str += "Extension : " + c[1]
document.getElementById("url").innerHTML = str
}
</script>
</head>
<body>
<form>
Enter URL : <input type="text" id="u1"><br>
<input type="button" value="Click" onclick="url()">
</form>
<div id="url">
</div>
</body>
</html>
- Write a JavaScript function to get the value of the all the attributes( href, hreflang, rel,
target, and type attributes) of the specified hyperlink and image.
<html>
<head>
<h2 style="color:green;">Write a JavaScript function to get the value of the all the
attributes( href, hreflang, rel, target, and type attributes)
of the specified hyperlink and image.</h2>
</head>
<body>
<script>
function att() {
var link = document.getElementById("link");
if(link.hasAttributes())
{
var a = link.attributes;
var r = "";
for(var i=a.length-1;i>=0;i--) {
r+=a[i].name + " = " + a[i].value + "<br>";
}
document.getElementById("div1").innerHTML = r;
}
else
{
document.getElementById("div1").innerHTML = "No attributes";
} }
</script>
<a id="link" href="http://google.com" target="_blank" rel="noopener noreferrer"
hreflang="english" type="media_type"></a>
<form action="">
<p>
<input type="button" value="click here" onclick="att()">
</p>
</form>
<div id=div1></div>
</body>
</html> - Write a JavaScript function to add rows to a table.
<html>
<head>
<h2 style="color:green;">Que 21: Write a JavaScript function to add rows to a table.</h2>
</head>
<body>
<script>
function add()
{
var t = document.getElementById("table1");
var r = t.insertRow(3);
var c1 = r.insertCell(0);
var c2 = r.insertCell(1);
c1.innerHTML = " ";
c2.innerHTML = " ";
}
</script>
<table id="table1" border="1">
<tr>
<th>Team Name</th>
<th>Captain</th>
</tr>
<tr>
<td>chennnai super kings</td>
<td>M.S. Dhoni</td>
</tr>
<tr>
<td>Mumbai indians</td>
<td>Rohit sharma</td>
</tr>
</table>
<input type="button" onclick="add()" value="Add">
</body>
</html> - Write a program to count and display all H1 elements on the document.
<html>
<head>
<h2 style="color:green;">Que 22: Write a program to count and display all H1 elements
on the document.</h2>
</head>
<body>
<script>
function H1() {
var result = document.getElementsByTagName("h1");
document.getElementById("div1").innerHTML = "no of h1 tags : " + result.length +
"<br>";
for (var i = 0; i < result.length; i++) {
document.getElementById("div1").innerHTML +=
result[i].childNodes[0].nodeValue + "<br><br>";
}
}
</script>
<h1>H1 - (hello Good morning Everybody!!!)</h1>
<h3>H3 - (I am your tribal chief.)</h3>
<h1>H1 - (Roman Reigns)</h1>
<input type="button" onclick="H1()" value="Count & Display <h1> tags"><br><br>
<div id="div1"></div>
</body>
</html>
- Write a program to change color of all paragraphs as per input given in text box.
<html>
<head>
<h2 style="color:green;">
Que 23: Write a program to change color of all paragraphs as per input given in text
box.</h2>
</head>
<body>
<script>
function change_colour(){
var text=document.getElementsByTagName("P");
var color=document.getElementById("color").value;
for(var i=0;i<text.length;i++)
{
text[i].style.color=color;
}
}
</script>
<h1>Good morning!!</h1>
<p>this is text.</p>
<p>this is lesson.</p>
<h3>How are you?</h3>
<p>this is text</p>
<h3>Good night!!</h3>
<form>
<input type="color" placeholder="Enter color" id="color"
oninput="change_colour()">
</form>
</body>
</html> - Write a program to change dimensions (height and width) of the image as per input
given in text boxes
<html>
<head>
<h2 style="color:green;">
Que 24: Write a program to change dimensions (height and width) of the image as per
input given in text boxes.
</h2>
</head>
<body>
<script>
function image() {
document.getElementById("img").style.height =
document.getElementById("textbox1").value;
document.getElementById("img").style.width =
document.getElementById("textbox2").value;
}
</script>
<form>
<input type="textbox" id="textbox1" placeholder="Height of image"
oninput="image()">
<input type="textbox" id="textbox2" placeholder="Width of image"
oninput="image()">
<img src="roman.jpg" id="img">
<div id="div1"></div>
</form>
</body>
</html>
- Write a program to display all the elements(textbox, radio etc.) of a form along with
their values.
<html>
<head>
<h2 style="color:green;">
Que 25:Write a program to display all the elements(textbox, radio etc.) of a form along
with their values.</h2>
</head>
<body>
<script>
function f1(){
var form=document.forms[0];
for(var i=0;i<form.elements.length;i++)
{
document.getElementById("div1").innerHTML += "child node is "+
form.elements[i].nodeName;
switch(i+1)
{
case 1:
document.getElementById("div1").innerHTML += "text";
break;
case 2:
document.getElementById("div1").innerHTML += "checkbox";
break;
case 3:
document.getElementById("div1").innerHTML += "checkbox";
break;
case 4:
document.getElementById("div1").innerHTML += "button";
break;
}
document.getElementById("div1").innerHTML += "node and value is
"+form.elements[i].value+"<br>";
}
}
</script>
<form>
<input type="text" id="name" placeholder="Enter Name"><br>
select activity :<br>
<input type="checkbox" id="check1" value="cricket">cricket<br>
<input type="checkbox" id="check2" value="chess">chess<br>
<input type="button" value="click here" onclick="f1()">
</form>
<div id="div1"></div>
</body>
</html> - Write a program to count and display the items of a dropdown list, in an alert window.
<html>
<head>
<h2 style="color:green;">
Que 26: Write a program to count and display the items of a dropdown list, in an alert
window.</h2>
</head>
<body>
<script>
function output()
{
var x = document.getElementById("Select");
var txt = "count: ";
var l = document.getElementById("Select").length;
txt += l;
for(i=0;i<l;i++)
{
txt += "\n" + x.options[i].text;
}
alert(txt);
}
</script>
<form id="myForm">
<table>
<tr>
<td>
<select id="Select">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="button" onclick="output()" value="Count"></td>
</tr>
</table>
</form>
</body>
</html> - Write a program to populate a combo using given array elements.
<html>
<head>
<h2 style="color:green;">
Que 27: Write a program to populate a combo using given array elements.</h2>
</head>
<body>
<script type="text/javascript">
var a = new Array("india", "australia");
function Combo() {
var str = document.getElementById("text").value;
var arr = str.split(",");
country.options[0] = new Option("");
for(var i=0;i<a.length;i++) {
country.options[i + 1] = new Option(a[i], a[i]);
}
for(var j=0;j<arr.length;j++) {
country.options[i + 1] = new Option(arr[j], arr[j]);
i++;
} }
</script>
<form id="myForm">
<table>
<tr>
<td>Countries : </td>
<td>
<input type="text" placeholder="Enter country" id="text" size="50px">.
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" onclick="Combo()" value="Click here">
</td>
</tr>
</table>
<div>
<br><br>
<hr>
Select country :
<select id="country" onchange="alert(this.value)" name="country">
</select>
</div>
</form>
</body>
</html>
- Write a JavaScript program to get the width and height of the window (any time the
window is resized).
<html>
<head>
<h2 style="color:green;">
Que 28: Write a JavaScript program to get the width and height of the window (any
time the window is resized).</h2>
</head>
<body>
<script>
window.addEventListener("load",function(){
document.getElementById("div1").innerHTML = "window size" +" "+ window.innerWidth
+" "+window.innerHeight;
})
window.addEventListener("resize", function(){
document.getElementById("div1").innerHTML = "window resize" +" "+
window.innerWidth +" "+window.innerHeight;}
</script>
<div id="div1"></div>
</body>
</html> - Validate a form using JavaScript. Display error message in red color. If no errors, show
success message in green color. Form should contain following fields.
Name (should not be blank), age (15 to 20), gender (required field).
<html>
<head>
<h2 style="color:green;">
Que 29:Validate a form using JavaScript. Display error message in red color.
If no errors, show success message in green color. Form should contain following
fields.
</h2>
</head>
<body bgcolor="#AEEEDB">
<script>
function vf()
{
var name = document.forms["f1"]["name"];
var age = document.forms["f1"]["age"];
var gender = document.forms["f1"]["gender"];
if(name.value"")
{
document.getElementById("error").innerHTML = "Pls Enter Name!";
name.focus();
return false;
}
if(age.value"")
{
document.getElementById("error").innerHTML = "Pls Enter Age!";
age.focus();
return false;
}
if(gender.value=="")
{
document.getElementById("error").innerHTML = "Pls Select Gender!";
return false;
}
document.getElementById("error").style.color = "green";
document.getElementById("error").innerHTML = "Form Submitted Successfully!!";
document.getElementById("showData").innerHTML = "Name : " + name.value + "<br>" +
"Age : " + age.value + "<br>" + "Gender : " + gender.value + "<br>";
return false;
}
</script>
<h1>REGISTRATION FORM</h1>
<div id="error" style="color: rgb(255, 140, 8);"></div>
<form name="f1" onsubmit="return vf()" method="post">
<table>
<tr>
<td >Name : </td>
<td><input type="text" name="name" size=35></td>
</tr>
<tr>
<td >Age : </td>
<td><input type="number" min="15" max="20"
step="1" name="age" id="n1" pattern="\d+"></td>
</tr>
<tr>
<td >Gender : </td>
<td>
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit" name="Submit">
<input type="reset" value="Reset" name="Reset">
</td>
</tr>
</table>
</form>
<hr>
<div id="showData" style="color: rgb(0, 0, 0);"></div>
</body>
</html>