HTML Codes Set

piggy
<!DOCTYPE html>
<html>
<head>
<style>
body{background-color:#F0E68C;}
table{border-style: solid;
float:right;}
h1{color:#800080;
font-family:cursive;
text-align:center;}
</style>
</head>
<body>
<form>
<h1> PIGGY BANK SAVINGS CALCULATOR</h1>
Customer Name <input type="text" name="customerName" required="required"
pattern="[a-zA-Z ]+"><br>
Customer Type <input type="radio" name="customerType" id="customerType1"
value="0" required> Normal Citizen
<input type="radio" name="customerType" id="customerType2"
value="1" required> Senior Citizen<br>
Address & ID Proof <input type="checkbox" name="addressProof"
value="aadhar">Aadhar Card
<input type="checkbox" name="addressProof"
value="pan">Pan Card
value="dl">Driving License
value="passport">Passport
value="voterid">Voter ID
Mobile Number <input type="text" name="customerMobileNumber"
maxlength="10" pattern="[7-9]{1}[0-9]{9}" title="Enter your mobile number"
required="required"><br>
Type of Savings <input type="text" name="savingType" id="savingType"
list="savings" required="required">
<datalist id="savings" autocomplete="on">
<option value="FD"></option>
<option value="RD"></option>
</datalist><br>
Amount <input type="number" name="amount" id="amount"
placeholder="Enter the Amount" min="500" required/><br>
Tenure <input type="range" name="tenure" id="tenureval" min="1"
max="5" value="1" id="tenure" oninput="tenureId.value=tenureval.value"
required>1<br>
<input type="submit" name="submit" id="submit" value="Calculate Savings"
onclick="savings();return false;">
<input type="reset" id="reset" value="Reset"><br>
<div id="result"></div>
<table id="ratetable">
<caption>Interest Rate Chart</caption>
<tr>
<th>Deposit Type</th>
<th>Tenure</th>
<th>Interest Rate</th>
</tr>
<tr>
<td rowspan="3">FD</td>
<td>1 to 2 years</td>
<td>7</td>
</tr>
<tr>
<td>Above 2 years to 4 years</td>
<td>7.5</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td rowspan="3">RD</td>
<td>1 to 2 years</td>
<td>6.5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>5.5</td>
</tr>
</table>
</form>
<script>
function savings(){
var amt=document.getElementById('amount').value;
var tenure=document.getElementById('tenureval').value;
var citizen=document.getElementById('customerType');
var citVal;
if(document.getElementById('customerType1').checked){
citVal=document.getElementById('customerType1').value;}
else if(document.getElementById('customerType2').checked){
citVal=document.getElementById('customerType2').value;}
var fd;
var type=document.getElementById('savingType').value;
if(citVal==0){
if(type=="FD"){
if(tenure==1||tenure==2){fd=((amt*tenure*7)/100);}
else if(tenure==3||tenure==4){fd=((amt*tenure*7.5)/100);}
else if(tenure==5){fd=((amt*tenure*8)/100);}
}
else if(type=="RD"){
if(tenure==1||tenure==2){fd=((amt*tenure*6.5)/100);}
else if(tenure==3||tenure==4){fd=((amt*tenure*6)/100);}
else if(tenure==5){fd=((amt*tenure*5.5)/100);}
}
}
else if(citVal==1){
if(type=="FD"){
if(tenure==1||tenure==2){fd=((amt*tenure*7.5)/100);}
else if(tenure==3||tenure==4){fd=((amt*tenure*8)/100);}
else if(tenure==5){fd=((amt*tenure*8.5)/100);}
}
else if(type=="RD"){
if(tenure==1||tenure==2){fd=((amt*tenure*7)/100);}
else if(tenure==3||tenure==4){fd=((amt*tenure*6.5)/100);}
else if(tenure==5){fd=((amt*tenure*6)/100);}
}
}
else {return false;}
var sum=parseInt(fd)+parseInt(amt);
document.getElementById('result').innerHTML='Total Savings done '+sum;
}
</script>
</body>
</html>
regform
<html>
<body>
<h4><b>Online Registration Form</b></h4>
<form action="success.html">
<table>
<tr>
<td>User Name*</td>
<td><input type="text" id="username" name="username"
placeholder="Enter User Name" pattern="[A-Za-z][A-Za-z ]+" required></td>
</tr>
<tr>
<td>Password*</td>
<td> <input type="password" name="password" id="password"
pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{7,}$"
required></td>
</tr>
<tr>
<td>Address</td>
<td> <textarea id="address" name="address" required>
</textarea> </td>
</tr>
<tr>
<td>Country</td>
<td>
<input id="country" name="country" list="countries"
autocomplete="on" required>
<datalist id="countries">
<option value="India">
<option value="America">
<option value="China">
<option value="Ireland">
</datalist>
</td>
</tr>
<tr>
<td>Gender*</td>
<td>
<input type="radio" name="gender" value="Male"
required>Male
<br>
<input type="radio" name="gender" value="Female">Female
</td>
</tr>
<tr>
<td>Languages known*</td>
<td>
<input type="checkbox" name="lang" value="Hindi"/>Hindi
<br>
<input type="checkbox" name="lang" value="English"/>English
<br>
<input type="checkbox" name="lang" value="Tamil"/>Tamil
</td>
</tr>
<tr>
<td> <input type="image" scr="submit.png" name="submit"> </td>
<td> <input type="reset" value="Reset" name="reset"> </td>
</tr>
</table>
</form>
</body>
</html>
success
<html>
<body>
<h4><b>The form is submitted successfully</b></h4>
</body>
</html>
webpage
<html>
<head>
<style>
#home{
height:550px;
width:900px;
background-color:#D9D9D9;
margin-top:15px;
margin-bottom:10px;
margin-left:15%;
margin-right:10%;
border-style:solid;
}
header{
text-align:center;
color:#990000;
font-size:25px;
}
p{
text-indent:8%;
word-spacing:40px;
color:#FFFFFF;
background-color:#990000;
margin-left:90px;
margin-right:90px;
}
#intro{
border-style:solid;
margin-top:10px;
margin-bottom:10px;
margin-left:15%;
margin-right:15%;
background-color:#525252;
height:400px;
width:600px;
}
h2{
text-align:center;
color:#FFFFFF;
font-size:xx-large;
}
h3{
margin-top:10%;
text-align:center;
font-size:xx-large;
font-family:Arimo;
color:#FFFFFF;
}
table,td
margin-top: 10px;
margin-left: 10px;
color:#FFFFFF;
font-family:Arimo;
table{
margin-top:10px;
margin-left:10px;
}
footer{
text-align:center;
color:#990000;
}
</style>
</head>
<body>
<section id="home">
<header>Web Programming Learning</header>
<p>HOME MATERIALS COMPETITION PASTYEARS ABOUT</p>
<section id="intro">
<h2>CAPGEMINI</h2>
<h3>Cascading Style Sheet</h3>
<table>
<tr>
<td>Comprehensive curriculum</td>
<td>Insightful Guest Lectures</td>
<td>interaction with sponsors</td>
<td>$30,000+in Total Prizes</td>
</tr>
</table>
</section>
<footer>Copyright © 2017 teknoturf</footer>
</section>
</body>
</html>
imgeffect
<!doctype html>
<html>
<head>
<style>
.step1
{
margin:100px;
background:url("apple.jpg")no-repeat;
width:250px;
height:300px;
}
.step1:hover{
.step1
{
margin:100px;
background:url("mango.jpg");
width:350px;
height:300px;
}
</style>
</head>
<body>
<div class="step1"></div>
</body>
</html>
bubble
<!DOCTYPE html>
<html>
<head>
<title>bubbble_sort.html</title>
</head>
<body>
Enter data to sort:
<input type="text" name="mydata" id="data"><br>
<input type="button" name="databtn" onclick="bubble_sort()" value="Sort
Data">
<script type="text/javascript">
function bubble_sort()
{
var i=0;
var j=0;
var in_data=document.getElementById('data');
var indata=in_data.value;
var res=indata.split(',');
var len=res.length;
var arr=[];
for(i=0;i<len;i++)
{
arr[i]=parseInt(res[i]);
}
for(i=0;i<len-1;i++)
for(j=i+1;j<len;j++)
if(arr[i]>arr[j])
{
var temp=arr[i];
arr[i]=arr[j];
arr[j]=temp;
}
for(i=0;i<len;i++)
res[i]=arr[i];
window.alert(res);
}
</script>
</body>
</html>
booksales
<!DOCTYPE html>
<html>
<head>
<title>
SSK E-BOOK SALES
</title>
<style>
h1
{
color:#0000FF;
font-family:cursive;
text-align:center;
}
body
{
background-color:#C0C0C0;
}
#result
{
color:#0000FF;
font-weight:bold;
}
</style>
</head>
<body>
<script>
function calc()
{
var instituteName = document.getElementById("instituteName").value;
var bookCount =
parseInt(document.getElementById("bookCount").value);
var result;
document.getElementById("result").innerHTML = "Thank you " +

instituteName + ". Order for " + bookCount + " books is accepted";
return false;
}
</script>
<center>
<h1>SSK E-BOOK SALES</h1>
<form onsubmit="return calc()">
<table>
<tr>
<td>Institute Name</td>
<td><input type="text" id="instituteName"
name="instituteName" required="required"></td>
</tr>
<tr>
<td>Address</td>
<td><textarea id="instituteAddress"
name="instituteAddress" rows="5" cols="20" required="required"></textarea></td>
</tr>
<tr>
<td>Date of registration</td>
<td><input type="date" id="dor" name="dor"
required="required"></td>
</tr>
<tr>
<td>Mobile Number</td>
<td><input type="text" id="instituteMobileNumber"
name="instituteMobileNumber" pattern="[987]{1}[0-9]{9}" required="required"></td>
</tr>
<tr>
<td>Email ID</td>
<td><input type="email" id="instituteEmail"
name="instituteEmail" placeHolder="Enter the Mail ID" required="required"></td>
</tr>
<tr>
<td>Book Category</td>
<td>
<input type="radio" id="bookCategory"
name="bookCategory" value="General" required="required">General
<input type="radio" id="bookCategory"
name="bookCategory" value="Competetive Exam" required="required">Competetive Exam
</td>
</tr>
<tr>
<td>Subscription Type</td>
<td>
<input id="subscriptionType" name="subscriptionType"
list="subscription" autocomplete="on" required="required">
<datalist id="subscription">
<option value="Weekly">
<option value="Monthly">
<option value="Fornightly">
</datalist>
</td>
</tr>
<tr>
<td>Book Count</td>
<td><input type="number" id="bookCount" name="bookCount"
max="100" min="10" required="required"></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Order
Now"></td>
<td><input type="reset" name="reset" value="Reset"></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
booknow
<!doctype html>
<html>
<head>
<style type="text/css">
body
{
background-color: #FFAACC;
}
h1
{
color:#770080;
font-family: Courier New;
font-style :italic;
text-align:center;
}
form
{
margin :0 auto;
width:300px;
}
#result
{
color:#770080;
font-weight:bold;
}
</style>
<title>DREAM Theme Park</title>

</head>
<body >
<script>
function calculateCharges()
{
var customerName=document.getElementById("customerName").value;
var bookingType=document.getElementById("bookingType").value;
var adult=parseInt(document.getElementById("adults").value);
var
children=parseInt(document.getElementById("children").value);;
var ticketCost=0;
var discount=0;
var result = 0;
ticketCost=(adult*1500)+(children*1200);
if(bookingType=="Normal")
discount=0;
if(bookingType=="School")
discount=(ticketCost)*0.5;
if(bookingType=="Corporate")
discount=(ticketCost)*0.25;
result=ticketCost-discount;
document.getElementById("result").innerHTML = "Thank you
"+customerName+". Total cost to be paid is "+result;
return false;
}
</script>
<h1>Book Your Tickets</h1>

<form onsubmit="return calculateCharges()" >
<table>
<tr>
<td>Customer Name</td>
<td><input type="text" name="customerName"
id="customerName" required="required" pattern="[A-Za-z\s]+" placeholder="Enter your
name" /> </td>
</tr>
<tr>
<td>Address</td>
<td><textarea name="address" id="address"
required="required" rows="5" cols="20"></textarea>
</td>
</tr>
<tr>
<td>Email ID</td>
<td><input type="email" name="customerEmail"
id="customerEmail" required="required"> </td>
</tr>
<tr>
<td>Mobile Number</td>
<td><input type="text"
name="customerMobileNumber" id="customerMobileNumber" pattern="[9/8/7]{1}[0-9]{9}"
required="required"></td>
</tr>
<tr>
<td>Park Location</td>
<td><input type="radio" name="location"
id="location" value="Delhi" required>
<input type="radio" name="location"
id="location" value="Mumbai" required="required">
</td>
</tr>
<tr>
<td>Date of Visit</td>
<td><input type="date"
name="dateofvisit" id="dateofvisit" required="required"> </td>
</tr>
<tr>
<td>Booking Type</td>
<td><input name="bookingType"
id="bookingType" list="bookType" autocomplete="on" required>
<datalist id="bookType">
<option
value="Normal">
<option
value="School">
<option
value="Corporate">
</datalist></td>
</tr>
<tr>
<td>Adult</td>
<td><input type="number"
name="adults" id="adults" min="0" max="500" required="required"> </td>
</tr>
<tr>
<td>Children</td>
<td><input type="number"
name="children" id="children" required="required"> </td>
</tr>
<tr>
<td><input type="submit"
value="Book Now" name="submit"> </td>
<td><input type="reset"
value="Clear" name="reset" > </td>
</tr>
<tr>
<td colspan="2">
<div id="result"></div></td>
</tr>
</table>
</form>
</body>
</html>
discountprice
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #99FFFF;
}
h1{
text-align: center;
color: #b03060;
font-style: italic;
font-weight: bold;
}
table{
margin-left: 35%;
border-style: solid 5px;

border-width: 5px;
width: 30%;
border-collapse: collapse;
}
table tr,table td
{
padding: 10px;
border-style: solid;
}
#submit{
margin-left: 45%;
}
#discount{
text-align: center;
font-weight: bold;
font-size: 25px;
}
#result{
text-align: center;
font-weight: bold;
font-style: italic;
color: #FF0000;
font-size: 40px;
}
</style>
<script>
function calDiscount(){
var seas = document.getElementById("season").value;
var price = parseInt(document.getElementById("price").value);
var res = 0, pp = 0;
var discount = 0;
if(seas.match("newyear"))
discount = 5;
else if(seas.match("summer"))
discount = 10;
else if(seas.match("clearance"))
discount = 15;
pp = price * (discount/100);
res = price - pp;
document.getElementById("discount").innerHTML = "The discount is "
+ discount + "%";
document.getElementById("result").innerHTML = "The discounted price
: Rs " + res;
return false;
}
</script>
</head>
<body>
<h1><label for = "Discount Price">DISCOUNT PRICE</label></h1>
<form name = "Discount Price" onsubmit = "return false">
<table>
<tr>
<td>Product Name</td>
<td>
<input type = "text" name = "name" pattern = "[a-zA-Z ]+"
required>
</td>
</tr>
<tr>
<td>Product Price</td>
<td>
<input type = "text" name = "price" id = "price" min =
"15001" pattern = "[0-9]{1,8}" required>
</td>
</tr>
<tr>
<td>Season</td>
<td>
<select name = "season" id = "season">
<option value = "summer">SUMMER SALE
<option value = "newyear">NEW YEAR SALE
<option value = "clearance">CLEARANCE SALE
</select>
</td>
</tr>
</table>
<br>
<input type = "submit" id = "submit" name = "submit" value = "GET
DISCOUNT PRICE" onclick = "calDiscount()">
</form>
<br><div id = "discount"></div>
<div id = "result"></div>
</body>
</html>
login
<html>
<head>
<style type="text/css">
body{
background-color:#00FFFF;
}h1{
color:#DD77FF;
text-align:center;
}
</style></head>
<body>
<h1>ZEN BANK - LOGIN</h1><form>
<table ALIGN="CENTER">
<tr>
<td>User Name</td>
<td><input type="text" name="userName" placeholder="Enter your
user name" required></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="Password" id="Password"
pattern="[A-Za-z0-9_]{8,15}+"></td>
</tr>
<tr>
<td><input type="checkbox" name="rememberMe"/>Remember Me</td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Sign in"

id="submit"></td>
<td><input type="reset" name="reset" value="clear"></td>
</tr>
</table>
</form>
</body>
</html>
ticket
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:#00CED1;
}
#result
{
text-align:center;
color:#0000FF;
font-weight:bold;
}
table
{
color:#8E831F;
font-family:monospace;
font-weight: bold;
}
h1
{
color:#0000FF;
font-family:monospace;
text-align:center;
}
form
{
margin:0 auto;
width:300px;
}
</style>
</head>
<body>
<h1>BOOK A SHOW - TICKET BOOKING</h1>
<form onsubmit="return calculate()">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name" placeholder="Enter
the Name" pattern="[A-Za-z ]+" required/></td>
</tr>
<tr>
<td>Movie Name</td>
<td><input list="movies" name="moviename" id="moviename"
placeholder="Movie Name" autocomplete="on" required/>
<datalist id="movies" autocomplete="on">
<option value="Irada"></option>
<option value="Rangoon"></option>
<option value="Logan"></option>
<option value="Fist Fight"></option>
</datalist>
</td>
</tr>
<tr>
<td>Circle</td>
<td><input list="circles" name="circle" id="circle"
autocomplete="on" required/>
<datalist id="circles">
<option value="Silver">
<option value="Gold">
<option value="Platinum">
</datalist>
</td>
</tr>
<tr>
<td>Phone no</td>
<td><input type="text" name="phone" placeholder="Enter Mobile
Number" min="10" max="10" pattern="[7-9]{1}[0-9]{9}" required/></td>
</tr>
<tr>
<td>Show date and time</td>
<td><input type="date" name="showdate" id="showdate"
required/></td>
</tr>
<tr>
<td>No of Adults</td>
<td><input type="number" name="tickets" id="ticket" min="1"
max="10" required/></td>
</tr>
<tr>
<td>No of childrens</td>
<td><input type="number" name="childrens" id="children" min="1"
max="5" required/></td>
</tr>
<tr>
<td><input type="submit" id="submit" name="Book My Show"
value="Book My Show"/></td>
<td><input type="reset" id="reset" name="reset"
value="Reset"/></td>
</tr>
</table>
</form>
<script>
function calculate(){
var adults=document.getElementById("ticket").value;
var childrens=document.getElementById("children").value;
var showDate=document.getElementById("showdate").value;
showDate=new Date(Date.parse(showDate.replace(/-/g,' ')));
var amount=0;
var todayDate=new Date();

todayDate.setHours(0,0,0,0)
if(childrens>=adults)
{
alert("No of adults should be greater than the no of
children");
return false;
}
else if(showDate<todayDate)
{
alert("Show date and time should be either current date or
future date");
return false;
}
amount=(adults*200)+(childrens*100)
document.getElementById("result").innerHTML="Your approximate
ticket amount is "+amount+" INR";
return false;
}
</script>
</body>
</html>
jqcheck
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input type="checkbox">Red
<input type="checkbox">Green
<input type="checkbox">Blue
<input type="checkbox">Black
<script>
var count=function(){
var n=$("input:checked").length;
$("div").text(n + "are" + "checked.");
};
count();
$("input[type=checkbox]").on("click",count);
</script>
</body>
</html>
drag
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function(){
$("#draggable").draggable();
});
</script></head>
<body>
<div id="draggable">
<p><img src="fish.jpg">Drag me around</p>
</div></body>
</html>

HTML Codes Set

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML Codes Set

Încărcat de

Drepturi de autor:

Formate disponibile

piggy

<h4><b>The form is submitted successfully</b></h4>

document.getElementById("result").innerHTML = "Thank you " +

<title>DREAM Theme Park</title>

<h1>Book Your Tickets</h1>

border-style: solid 5px;

<td><input type="checkbox" name="rememberMe"/>Remember Me</td>

<td><input type="submit" name="submit" value="Sign in"

var todayDate=new Date();

S-ar putea să vă placă și