How to create a Website using HTML and CSS step by step Website Tutorial
Example of Bootstrap Menu and Fonts
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://website.gyaann.com/bootstrap.min.css"/>
<style>
</style>
</head>
<body style="background-image:url('https://website.gyaann.com/a1.png'); background-size:100% 100%;">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="top-nav-bar"><a href="#">First Menu</a></li>
<li class="top-nav-bar"><a href="#">Second Menu</a></li>
<li class="top-nav-bar"><a href="#">Third Menu</a></li>
<li class="top-nav-bar"><a href="#">Fourth Menu</a></li>
<li class="top-nav-bar"><a href="#">Fifth Menu</a></li>
<li class="top-nav-bar"><a href="#">Sixth Menu</a></li>
<li class="top-nav-bar"><a href="#">Seventh Menu</a></li>
<li class="dropdown">
<a class="dropdown-toggle navbar top-nav-bar" data-toggle="dropdown" href="#">Menu List <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="top-nav-bar" href="#">Sub Menu 1</a></li>
<li><a class="top-nav-bar" href="#">Sub Menu 2</a></li>
<li><a class="top-nav-bar" href="#">Sub Menu 3</a></li>
<li><a class="top-nav-bar" href="#">Sub Menu 4</a></li>
<li><a class="top-nav-bar" href="#">Sub Menu 5</a></li>
<li><a class="top-nav-bar" href="#">Sub Menu 6</a></li>
<li><a class="top-nav-bar" href="#">Sub Menu 7</a></li>
<li><a class="top-nav-bar" href="#">Sub Menu 8</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Right Menu 1</a></li>
<li><a href="#">Right Menu 2</a></li>
<li><a href="#">Right Menu 3</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://website.gyaann.com/jquery-1.12.0.js"></script>
<script src="https://website.gyaann.com/bootstrap.min.js"></script>
</body>
</html>
Show
How to create a Website using HTML and CSS step by step Website Tutorial
Example of Bootstrap Modal
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://website.gyaann.com/bootstrap.min.css"/>
</head>
<body style="background-color:skyblue">
<center><h1 style="width:300px; font-family:myfont; line-height:50px; border:4px solid #0033ff; color:#0033ff; border-radius:20px; background-color:#ffffff;"><b>Modal Show</b></h1></center>
<a href="#"><h3 style="margin-left:20px; width:200px; font-family:myfont; line-height:40px; background-color:#0033ff; color:#ffffff; border-radius:20px;" data-toggle="modal" data-target="#myModal1"><center><b>Click Text</b></center></h3></a>
<a href="#"><h3 style="margin-left:20px; width:200px; font-family:myfont; line-height:40px; background-color:#0033ff; color:#ffffff; border-radius:20px;" data-toggle="modal" data-target="#myModal2"><center><b>Click Image</b></center></h3></a>
<a href="#"><h3 style="margin-left:20px; width:200px; font-family:myfont; line-height:40px; background-color:#0033ff; color:#ffffff; border-radius:20px;" data-toggle="modal" data-target="#myModal3"><center><b>Click Frame</b></center></h3></a>
<center class="modal" id="myModal1"><h4 style="margin-top:200px; width:400px; font-family:myfont; line-height:32px; border:4px solid #ffffff; background-color:blue; color:#ffffff; border-radius:20px;"><b>You have clicked on the text modal</b></h4></center>
<center class="modal" id="myModal2"><img style="margin-top:200px; width:300px; height:300px; padding:4px; box-shadow:2px 2px 6px #ffffff; background-color:#ffffff;" src="https://website.gyaann.com/a2.jpg" alt="no image"/></center>
<center class="modal" id="myModal3"><iframe style="border:none; width:30%; height:100%;" src="https://website.gyaann.com/"></iframe></center>
<script src="https://website.gyaann.com/jquery-1.12.0.js"></script>
<script src="https://website.gyaann.com/bootstrap.min.js"></script>
</body>
</html>
Show
How to create a Website using HTML and CSS step by step Website Tutorial
Example of Carousel
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
background-color: #333333;
}
h1
{
color: #ffffff;
font-family:myfont;
}
* {box-sizing:border-box}
.slideshow-container
{
border: 2px solid #ffffff;
max-width: 80%;
position: relative;
margin-left: 10%;
}
.mySlides
{
display: none;
}
.prev, .next
{
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next
{
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover
{
background-color: rgba(0,0,0,0.8);
}
.text
{
border: 4px solid #ffffff;
margin-left: 36%;
background-color: #666666;
border-radius:12px;
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 28%;
text-align: center;
}
.numbertext
{
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade
{
-webkit-animation-name: fade;
-webkit-animation-duration: 2s;
animation-name: fade;
animation-duration: 4s;
}
@-webkit-keyframes fade
{
from {opacity: .5}
to {opacity: 1}
}
@keyframes fade
{
from {opacity: .1}
to {opacity: 1}
}
</style>
</head>
<body>
<center><h1>JavaScript Slider</h1></center>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"><b>1 / 6</b></div>
<img src="https://website.gyaann.com/a3.jpg" style="width:100%; height:80%;">
<div class="text"><b>First Picture</b></div>
</div>
<div class="mySlides fade">
<div class="numbertext"><b>2 / 6</b></div>
<img src="https://website.gyaann.com/a4.jpg" style="width:100%; height:80%;">
<div class="text"><b>Second Picture</b></div>
</div>
<div class="mySlides fade">
<div class="numbertext"><b>3 / 6</b></div>
<img src="https://website.gyaann.com/a5.jpg" style="width:100%; height:80%;">
<div class="text"><b>Third Picture</b></div>
</div>
<div class="mySlides fade">
<div class="numbertext"><b>4 / 6</b></div>
<img src="https://website.gyaann.com/a6.jpg" style="width:100%; height:80%;">
<div class="text"><b>Fourth Picture</b></div>
</div>
<div class="mySlides fade">
<div class="numbertext"><b>5 / 6</b></div>
<img src="https://website.gyaann.com/a7.jpg" style="width:100%; height:80%;">
<div class="text"><b>Fifth Picture</b></div>
</div>
<div class="mySlides fade">
<div class="numbertext"><b>6 / 6</b></div>
<img src="https://website.gyaann.com/a8.jpg" style="width:100%; height:80%;">
<div class="text"><b>Sixth Picture</b></div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n)
{
showSlides(slideIndex += n);
}
function currentSlide(n)
{
showSlides(slideIndex = n);
}
function showSlides(n)
{
var i;
var slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++)
{
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
</script>
<script>
var slideIndex = 0;
carousel();
function carousel()
{
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++)
{
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 6000);
}
</script>
</body>
</html>
Show
How to create a Website using HTML and CSS step by step Website Tutorial
Example of Owl Carousel
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://website.gyaann.com/owl.carousel.css"/>
<style>
body
{
background-color: #333333;
}
h1
{
color: #ffffff;
}
#owl-demo .item
{
margin: 4px;
}
#owl-demo .item img
{
display: block;
width: 100%;
height: 400px;
border: 2px solid #ffffff;
}
</style>
</head>
<body>
<center><h1>J-Query Slider</h1></center>
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><img src="https://website.gyaann.com/a9.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/a10.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/a11.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/a12.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/a13.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/a14.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/a15.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/a16.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/a9.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/a10.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/a11.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/a12.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/a13.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/a14.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/a15.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/a16.jpg" alt="Owl Image"></div>
</div>
<script src="https://website.gyaann.com/jquery-1.12.0.js"></script>
<script src="https://website.gyaann.com/owl.carousel.js"></script>
<script>
$(document).ready(function()
{
$("#owl-demo").owlCarousel
({
autoPlay:4000,
items:4,
});
});
</script>
</body>
</html>
Show
How to create a Website using HTML and CSS step by step Website Tutorial
Example of Vegas Slider
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://website.gyaann.com/vegas.min.css">
</head>
<body>
<center><h1 style="width:320px; background-color:#ffffff; line-height:40px; border-radius:20px; border:2px solid #000000;">J-Query Vegas Slider</h1></center>
<div id="div" style="width:300px; height:300px; margin:10px; border:2px solid #ffffff;"></div>
<script src="https://website.gyaann.com/jquery-1.7.2.min.js"></script>
<script src="https://website.gyaann.com/vegas.min.js"></script>
<script>
$("body").vegas
({
slides:
[
{ src: "https://website.gyaann.com/a17.jpg" },
{ src: "https://website.gyaann.com/a18.jpg" },
{ src: "https://website.gyaann.com/a19.jpg" },
{ src: "https://website.gyaann.com/a20.jpg" },
{ src: "https://website.gyaann.com/a21.jpg" },
{ src: "https://website.gyaann.com/a22.jpg" }
],
delay: 4000,
transition: ['swirlLeft2'],
transitionDuration: 2000
});
$("#div").vegas
({
slides:
[
{ src: "https://website.gyaann.com/a17.jpg" },
{ src: "https://website.gyaann.com/a18.jpg" },
{ src: "https://website.gyaann.com/a19.jpg" },
{ src: "https://website.gyaann.com/a20.jpg" },
{ src: "https://website.gyaann.com/a21.jpg" },
{ src: "https://website.gyaann.com/a22.jpg" }
],
delay: 4000,
/*Use this transition:- fade, fade2, slideLeft, slideLeft2, slideRight, slideRight2, slideUp, slideUp2, slideDown, slideDown2, zoomIn, zoomIn2, zoomOut, zoomOut2, swirlLeft, swirlLeft2, swirlRight, swirlRight2, burn, burn2, blur, blur2, flash, flash2*/
transition: ['swirlLeft2'],
transitionDuration: 2000
});
</script>
</body>
</html>
Show
How to create a Website using HTML and CSS step by step Website Tutorial
Example of WOW Effects
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://website.gyaann.com/bootstrap.min.css"/>
<link rel="stylesheet" href="https://website.gyaann.com/animate.css">
<style>
</style>
</head>
<body style="background-color:#CCE5E7; margin:0px;">
<center><h1 style="margin:0px; font-size:80px; color:#ffffff; background-color:#333333;">WOW Effect</h1></center>
<center>
<img style="margin-right:20px;" class="wow bounceInLeft" data-wow-duration="2s" src="https://website.gyaann.com/wow1.gif" alt="no image"/>
<img style="margin-left:20px;" class="wow bounceInRight" data-wow-duration="2s" src="https://website.gyaann.com/wow2.gif" alt="no image"/>
</center>
<br><br>
<center>
<img class="wow rollin" data-wow-duration="2s" data-wow-offset="10" src="https://website.gyaann.com/wow3.gif" alt="no image">
</center>
<br><br>
<div class="col-sm-offset-3 col-sm-6">
<h3 style="font-size:88px; font-family:myfont; text-shadow:1px 1px 2px #333333; color:red;" class="col-sm-1 wow bounce" data-wow-duration="2s" data-wow-delay="0.9s">B</h3>
<h3 style="font-size:88px; font-family:myfont; text-shadow:1px 1px 2px #333333; color:red;" class="col-sm-1 wow bounce" data-wow-duration="2s" data-wow-delay="1s">O</h3>
<h3 style="font-size:88px; font-family:myfont; text-shadow:1px 1px 2px #333333; color:red;" class="col-sm-1 wow bounce" data-wow-duration="2s" data-wow-delay="1.1s">X</h3>
<h3 style="font-size:88px; font-family:myfont; text-shadow:1px 1px 2px #333333; color:red;" class="col-sm-1 wow bounce" data-wow-duration="2s" data-wow-delay="1.2s">P</h3>
<h3 style="font-size:88px; font-family:myfont; text-shadow:1px 1px 2px #333333; color:red;" class="col-sm-1 wow bounce" data-wow-duration="2s" data-wow-delay="1.3s">N</h3>
<h3 style="font-size:88px; font-family:myfont; text-shadow:1px 1px 2px #333333; color:red;" class="col-sm-1 wow bounce" data-wow-duration="2s" data-wow-delay="1.4s">G</h3>
<h3 style="font-size:88px; font-family:myfont; text-shadow:1px 1px 2px #333333; color:red;" class="col-sm-offset-1 col-sm-1 wow bounce" data-wow-duration="2s" data-wow-delay="1.5s">P</h3>
<h3 style="font-size:88px; font-family:myfont; text-shadow:1px 1px 2px #333333; color:red;" class="col-sm-1 wow bounce" data-wow-duration="2s" data-wow-delay="1.6s">O</h3>
<h3 style="font-size:88px; font-family:myfont; text-shadow:1px 1px 2px #333333; color:red;" class="col-sm-1 wow bounce" data-wow-duration="2s" data-wow-delay="1.7s">A</h3>
<h3 style="font-size:88px; font-family:myfont; text-shadow:1px 1px 2px #333333; color:red;" class="col-sm-1 wow bounce" data-wow-duration="2s" data-wow-delay="1.8s">N</h3>
<h3 style="font-size:88px; font-family:myfont; text-shadow:1px 1px 2px #333333; color:red;" class="col-sm-1 wow bounce" data-wow-duration="2s" data-wow-delay="1.9s">D</h3>
</div>
<script src="https://website.gyaann.com/wow.js"></script>
<script>new WOW().init();</script>
</body>
</html>
Show
How to create a Website using HTML and CSS step by step Website Tutorial
Example of Nested Table
<html>
<head>
<title>Nested Table</title>
<style>
body
{
background-image:url('https://website.gyaann.com/cartoon1.jpg');
background-size:100% 100%;
}
table
{
box-shadow:1px 1px 1px green;
}
table, th, td
{
border:1px solid green;
}
td
{
width:160px;
height:160px;
text-align:center;
background-image:url('https://website.gyaann.com/cartoon1.jpg');
background-size:100% 100%;
}
th
{
width:60px;
height:60px;
text-align:center;
}
#t1
{
border:1px solid green;
background-color:#ccffcc;
border-collapse:collapse;
}
#t2
{
border:1px solid blue;
background-color:#99ffff;
border-collapse:collapse;
}
#th1
{
background-color:blueviolet;
color:white;
font-size:42px;
}
h1
{
font-style:oblique;
text-shadow:1px 1px 1px white;
color:red;
background-color:#ffcc66;
padding:2px;
border-radius:40px;
width:40px;
border:2px solid green;
}
</style>
</head>
<body>
<center>
<!--This is main table-->
<table style="margin-top:40px">
<tr><th id="th1" colspan="4">Nested Table</th></tr>
<tr>
<td><center><h1>A</h1></center></td>
<td><center><h1>B</h1></center></td>
<td><center><h1>C</h1></center></td>
<td>
<center>
<!--This is sub table inside the last column of main table-->
<table id="t1">
<tr><th>1</th><th>2</th></tr>
<tr><th>3</th><th>4</th></tr>
</table>
</center>
</td>
</tr>
<tr>
<td><center><h1>A</h1></center></td>
<td><center><h1>B</h1></center></td>
<td><center><h1>C</h1></center></td>
<td rowspan="2"><center><h1>D</h1></center></td>
</tr>
<tr>
<td><center><h1>A</h1></center></td>
<td><center><h1>B</h1></center></td>
<td><center><h1>C</h1></center></td>
</tr>
<tr>
<td>
<center>
<!--This is sub table inside the first column of main table-->
<table id="t2">
<tr><th>1</th><th>2</th></tr>
<tr><th>3</th><th>4</th></tr>
</table>
</center>
</td>
<td><center><h1>B</h1></center></td>
<td><center><h1>C</h1></center></td>
<td><center><h1>D</h1></center></td>
</tr>
</table>
</center>
</body>
</html>
Show
How to create a Website using HTML and CSS step by step Website Tutorial
Example of Form Validation
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
background-image:url('https://website.gyaann.com/bg.jpg');
background-size:100% 100%;
}
td
{
width:40%;
height:28px;
}
form
{
margin-top:20px;
width:40%;
}
label, input
{
line-height:18px;
font-family:myfont;
color:#006600;
}
input
{
padding-left:20px;
border:1px solid #006600;
border-radius:2px;
}
#button
{
padding-left:20px;
padding-right:20px;
line-height:24px;
text-align:center;
border-radius:20px;
background-color:#006600;
color:#ffffff;
}
fieldset
{
color:green;
}
#qualification
{
text-align:center;
font-size:20px;
color:#ccffcc;
background-color:#339900;
}
#show
{
text-align:center;
color:red;
font-size:14px;
font-family:myfont;
}
</style>
</head>
<body>
<center>
<!--This is a Form-->
<form action="#" onsubmit="return validation()" method="post"><!--action="Form2.html" means the Action will direct this application to Form2.html-->
<!--This Fieldset is required for boundary design-->
<fieldset>
<legend><b>Student Registration Form</b></legend><!--This Legend is required to give name of the Fieldset-->
<br>
<!--This Fieldset is required for boundary design-->
<fieldset>
<legend><b>Personal Detail</b></legend><!--This Legend is required to give name of the Fieldset-->
<!--This is a table structure form-->
<table>
<!--First Row-->
<tr>
<td><label>Upload Photo</label></td><!--First Column-->
<td><input type="file" required="required" name="photo"></td><!--Second Column-->
</tr>
<!--Second Row-->
<tr>
<td><label>First Name</label></td><!--First Column-->
<td><input id="firstname" type="text" placeholder="Enter First Name" required="required" name="firstname"></td><!--Second Column-->
</tr>
<!--Third Row-->
<tr>
<td><label>Middle Name</label></td><!--First Column-->
<td><input type="text" placeholder="Enter Middle Name" name="middlename"></td><!--Second Column-->
</tr>
<!--Fourth Row-->
<tr>
<td><label>Last Name</label></td><!--First Column-->
<td><input type="text" placeholder="Enter Last Name" required="required" name="lastname"></td><!--Second Column-->
</tr>
<!--Fifth Row-->
<tr>
<td><label>Date of Birth</label></td><!--First Column-->
<td><input type="date" required="required" name="dob"></td><!--Second Column-->
</tr>
</table>
</fieldset>
<br>
<!--This Fieldset is required for boundary design-->
<fieldset>
<legend><b>Related Detail</b></legend><!--This Legend is required to give name of the Fieldset-->
<!--This is a table structure form-->
<table>
<!--First Row-->
<tr>
<td><label>Gender</label></td><!--First Column-->
<td><label>Male<input id="gender1" type="radio" name="gender[]"></label></td><!--Second Column-->
</tr>
<!--Second Row-->
<tr>
<td></td><!--First Column is set as blank-->
<td><label>Female<input id="gender2" type="radio" name="gender[]"></label></td><!--Second Column-->
</tr>
<!--Third Row-->
<tr>
<td><label>Aadhaar Number</label></td><!--First Column-->
<td><input id="aadhaar" type="number" placeholder="Enter Aadhaar Number" required="required" name="aadhaar"></td><!--Second Column-->
</tr>
<!--Fourth Row-->
<tr>
<td><label>Contact Number</label></td><!--First Column-->
<td><input id="contact" type="number" placeholder="Enter Contact Number" required="required" name="contact"></td><!--Second Column-->
</tr>
<!--Fifth Row-->
<tr>
<td><label>Email-ID</label></td><!--First Column-->
<td><input type="email" placeholder="Enter Your Email" required="required" name="email"></td><!--Second Column-->
</tr>
<!--Sixth Row-->
<tr>
<td><label>City Location</label></td><!--First Column-->
<td><input type="text" placeholder="Enter City Location" required="required" name="location"></td><!--Second Column-->
</tr>
<!--Seventh Row-->
<tr>
<td><label>District</label></td><!--First Column-->
<td><!--Second Column-->
<select id="district" required="required" name="district">
<option selected disabled>-----District-----</option>
<option>Hooghly</option>
<option>Howrah</option>
<option>South 24PGS</option>
<option>North 24PGS</option>
</select>
</td>
</tr>
<!--Eighth Row-->
<tr>
<td><label>State</label></td><!--First Column-->
<td><input type="text" value="West Bengal" readonly required="required" name="state"></td><!--Second Column-->
</tr>
<!--Ninth Row-->
<tr>
<td id="qualification" colspan="2">Qualification Status</td><!--Single Column is expanded as two Column size-->
</tr>
<!--Tenth Row-->
<tr>
<td><label>10th Completed</label></td><!--First Column-->
<td><input type="checkbox" required="required" name="10th"></td><!--Second Column-->
</tr>
<!--Eleventh Row-->
<tr>
<td><label>12th Completed</label></td><!--First Column-->
<td><input type="checkbox" name="12th"></td><!--Second Column-->
</tr>
<!--Twelfth Row-->
<tr>
<td><label>Graduation Completed</label></td><!--First Column-->
<td><input type="checkbox" name="graduation"></td><!--Second Column-->
</tr>
<!--Thirteenth Row-->
<tr>
<td><label>Post Graduation Completed</label></td><!--First Column-->
<td><input type="checkbox" name="master"></td><!--Second Column-->
</tr>
</table>
</fieldset>
<br>
<!--This Fieldset is required for boundary design-->
<fieldset>
<legend><b>Other Detail</b></legend><!--This Legend is required to give name of the Fieldset-->
<!--This is a table structure form-->
<table>
<!--First Row-->
<tr>
<td><label>Create Username</label></td><!--First Column-->
<td><input id="user" type="text" placeholder="Enter Your Username" required="required" name="username"></td><!--Second Column-->
</tr>
<!--Second Row-->
<tr>
<td><label>Create Password</label></td><!--First Column-->
<td><input id="pass1" type="password" placeholder="Enter Your Password" required="required" name="password"></td><!--Second Column-->
</tr>
<!--Third Row-->
<tr>
<td><label>Confirm Password</label></td><!--First Column-->
<td><input id="pass2" type="password" placeholder="Confirm Your Password" required="required" name="confirm"></td><!--Second Column-->
</tr>
<!--Fourth Row-->
<tr>
<td colspan="2" id="show"></td><!--First Column-->
</tr>
</table>
<input id="button" type="submit" value="Register"><!--This will use as Submit Button-->
</fieldset>
</fieldset>
</form>
</center>
<script>
function validation()
{
var firstname = document.getElementById("firstname").value;
var contact = document.getElementById("contact").value;
var aadhaar = document.getElementById("aadhaar").value;
var district = document.getElementById("district").value;
var gender1 = document.getElementById("gender1").checked;
var gender2 = document.getElementById("gender2").checked;
var user = document.getElementById("user").value;
var pass1 = document.getElementById("pass1").value;
var pass2 = document.getElementById("pass2").value;
var cont = contact.length;
var aadh = aadhaar.length;
var pass = pass1.length;
if(pass1 != pass2)
{
document.getElementById("show").innerHTML = "Password and Confirm password must match";
return false;
}
else if(pass < 8)
{
document.getElementById("show").innerHTML = "Password must be minimum 8 characters long";
return false;
}
else if(pass1 == user)
{
document.getElementById("show").innerHTML = "Username and Password cannot be same";
return false;
}
else if(pass1 == firstname)
{
document.getElementById("show").innerHTML = "Firstname and Password cannot be same";
return false;
}
else if(cont != 10)
{
document.getElementById("show").innerHTML = "10 Digits Mobile Number is Required";
return false;
}
else if(aadh != 12)
{
document.getElementById("show").innerHTML = "This is not valid Aadhaar Number";
return false;
}
else if(gender1 == gender2)
{
document.getElementById("show").innerHTML = "Select Your Gender";
return false;
}
else if(district == "-----District-----")
{
document.getElementById("show").innerHTML = "Select Your District";
return false;
}
else
{
alert("Thank You " + firstname);
}
}
</script>
</body>
</html>
Show
How to create a Website using HTML and CSS step by step Website Tutorial
Responsive Web Slider
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://website.gyaann.com/owl.carousel.css"/>
<style>
body
{
margin:0px;
}
#menu1
{
background-color:#333333;
height:5%;
}
#menu2
{
padding:0px;
margin:0px;
background-color:#666666;
height:10%;
}
#menu3
{
margin-top:100px;
display:none;
padding:0px;
width:200px;
height:350px;
}
#inner-menu1
{
height:100%;
width:12%;
float:right;
}
#inner-menu1 h4:hover
{
color:#ffff33;
}
input
{
height:100%;
border:none;
margin-left:10px;
text-align:center;
color:#0033ff;
font-family:myfont;
background-color:#ffcc99;
}
h4
{
margin-top:0px;
color:#ffffff;
line-height:32px;
margin-left:20px;
float:left;
}
.h4
{
margin:0px;
line-height:64px;
}
.h4:hover
{
color:#ffcc66;
}
.h
{
margin:1px;
text-align:center;
width:100%;
line-height:32px;
background-color:#333333;
border-radius:4px;
}
.h:hover
{
color:#333333;
background-color:#ffcc66;
border-radius:0px;
}
.sep
{
margin-top:8px;
margin-left:20px;
margin-right:20px;
height:48px;
width:1px;
background-color:#ffffff;
float:left;
}
#owl-demo .item img
{
display:block;
width:100%;
height:85%;
}
@media screen and (max-width:1220px)
{
body
{
background-image:url('https://website.gyaann.com/bg-full.jpg');
background-size:100% 100%;
}
#menu1
{
height:32px;
}
#menu2
{
height:64px;
}
#inner-menu1
{
width:18%;
}
.h4
{
font-size:12px;
}
.sep
{
margin-left:10px;
margin-right:10px;
}
#owl-demo .item img
{
display:none;
}
}
@media screen and (max-width:820px)
{
body
{
background-image:url('https://website.gyaann.com/eg-bg.gif');
background-size:auto;
}
#menu3
{
display:block;
}
#menu2
{
display:none;
}
#inner-menu1
{
width:20%;
}
}
@media screen and (max-width:720px)
{
body
{
background-image:none;
background-color:#ffffcc;
}
#inner-menu1
{
width:30%;
float:right;
}
}
@media screen and (max-width:480px)
{
input
{
width:30%;
}
h4
{
margin-left:4px;
font-size:12px;
}
}
</style>
</head>
<body>
<div id="menu1">
<h4>My Store Online</h4>
<input type="text" placeholder="Search Panel">
<div id="inner-menu1">
<a href="#"><h4>Login</h4></a>
<a href="#"><h4>Sing Up</h4></a>
</div>
</div>
<ul id="menu2">
<a href="#"><h4 class="h4">Glossary</h4></a>
<div class="sep"></div>
<a href="#"><h4 class="h4">Stationary</h4></a>
<div class="sep"></div>
<a href="#"><h4 class="h4">Furniture</h4></a>
<div class="sep"></div>
<a href="#"><h4 class="h4">Property</h4></a>
<div class="sep"></div>
<a href="#"><h4 class="h4">Garment</h4></a>
<div class="sep"></div>
<a href="#"><h4 class="h4">Education</h4></a>
<div class="sep"></div>
<a href="#"><h4 class="h4">Training</h4></a>
<div class="sep"></div>
<a href="#"><h4 class="h4">Electronics</h4></a>
<div class="sep"></div>
<a href="#"><h4 class="h4">Traveling</h4></a>
<div class="sep"></div>
<a href="#"><h4 class="h4">Service</h4></a>
</ul>
<center>
<ul id="menu3">
<a href="#"><h4 class="h">Glossary</h4></a>
<a href="#"><h4 class="h">Stationary</h4></a>
<a href="#"><h4 class="h">Furniture</h4></a>
<a href="#"><h4 class="h">Property</h4></a>
<a href="#"><h4 class="h">Garment</h4></a>
<a href="#"><h4 class="h">Education</h4></a>
<a href="#"><h4 class="h">Training</h4></a>
<a href="#"><h4 class="h">Electronics</h4></a>
<a href="#"><h4 class="h">Traveling</h4></a>
<a href="#"><h4 class="h">Service</h4></a>
</ul>
</center>
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><img src="https://website.gyaann.com/electronic.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/furniture.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/garment.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/glossary.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/property.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/tationery.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/electronic.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/furniture.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/garment.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/glossary.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/property.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/tationery.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/electronic.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/furniture.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/garment.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/glossary.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/property.jpg" alt="Owl Image"></div>
<div class="item"><img src="https://website.gyaann.com/tationery.jpg" alt="Owl Image"></div>
</div>
<script src="https://website.gyaann.com/jquery-1.12.0.js"></script>
<script src="https://website.gyaann.com/owl.carousel.js"></script>
<script>
$(document).ready(function()
{
$("#owl-demo").owlCarousel
({
autoPlay:4000,
items:1,
});
});
</script>
</body>
</html>
Show
How to create a Website using HTML and CSS step by step Website Tutorial
Simple E-Commerce Site
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://website.gyaann.com/bootstrap.min.css"/>
<style>
body
{
margin:0px;
background-image:url('https://website.gyaann.com/bg-note.jpg');
}
#leftdiv
{
position:fixed;
height:100%;
width:15%;
}
#rightdiv
{
margin-left:85%;
position:fixed;
height:100%;
width:15%;
}
#maindiv
{
margin-left:15%;
width:70%;
}
#headimg
{
width:100%;
}
#topmenu
{
list-style:none;
margin:0px;
line-height:60px;
background-color:#9999ff;
color:#ffffff;
font-family:myfont;
font-size:24px;
}
#logo
{
margin-top:6px;
float:left;
width:44px;
border-radius:50%;
border:2px solid #ffffff;
margin-right:30px;
}
.prodiv
{
float:left;
width:25%;
}
.proimg
{
width:100%;
padding:4px;
background-color:#ffffcc;
}
.proimg:hover
{
padding:0px;
opacity:.8;
}
.proname
{
font-size:16px;
line-height:32px;
margin:0px;
font-family:myfont;
text-align:center;
background-color:#ffcc99;
color:blue;
}
.proprice
{
font-size:16px;
line-height:32px;
margin:0px;
font-family:myfont;
text-align:center;
background-color:#ccffcc;
color:green;
}
span
{
color:#cc0000;
}
table
{
width:100%;
background-image:url('https://website.gyaann.com/table-bg.jpg');
background-size:100% 100%;
}
td table
{
background-image:none;
}
td
{
color:#ffffff;
width:50%;
font-size:16px;
line-height:32px;
}
.td
{
width:20%;
}
h1
{
width:80px;
height:80px;
background-size:100% 100%;
border-radius:50%;
border:4px solid #9999ff;
}
h1:hover
{
border:4px solid transparent;
box-shadow:2px 2px 2px #9999ff;
}
#m
{
background-image:url('https://website.gyaann.com/m.jpg');
}
#m:hover
{
background-image:url('https://website.gyaann.com/m2.jpg');
}
#a
{
background-image:url('https://website.gyaann.com/a.jpg');
}
#a:hover
{
background-image:url('https://website.gyaann.com/a2.jpg');
}
#r
{
background-image:url('https://website.gyaann.com/r.jpg');
}
#r:hover
{
background-image:url('https://website.gyaann.com/r2.jpg');
}
#k
{
background-image:url('https://website.gyaann.com/k.jpg');
}
#k:hover
{
background-image:url('https://website.gyaann.com/k2.jpg');
}
#e
{
background-image:url('https://website.gyaann.com/e.jpg');
}
#e:hover
{
background-image:url('https://website.gyaann.com/e2.jpg');
}
#t
{
background-image:url('https://website.gyaann.com/t.jpg');
}
#t:hover
{
background-image:url('https://website.gyaann.com/t2.jpg');
}
#m2
{
background-image:url('https://website.gyaann.com/m2.jpg');
}
#m2:hover
{
background-image:url('https://website.gyaann.com/m.jpg');
}
#a2
{
background-image:url('https://website.gyaann.com/a2.jpg');
}
#a2:hover
{
background-image:url('https://website.gyaann.com/a.jpg');
}
#r2
{
background-image:url('https://website.gyaann.com/r2.jpg');
}
#r2:hover
{
background-image:url('https://website.gyaann.com/r.jpg');
}
#k2
{
background-image:url('https://website.gyaann.com/k2.jpg');
}
#k2:hover
{
background-image:url('https://website.gyaann.com/k.jpg');
}
#e2
{
background-image:url('https://website.gyaann.com/e2.jpg');
}
#e2:hover
{
background-image:url('https://website.gyaann.com/e.jpg');
}
#t2
{
background-image:url('https://website.gyaann.com/t2.jpg');
}
#t2:hover
{
background-image:url('https://website.gyaann.com/t.jpg');
}
</style>
</head>
<body>
<div id="leftdiv">
<center><h1 id="m"></h1></center>
<center><h1 id="a"></h1></center>
<center><h1 id="r"></h1></center>
<center><h1 id="k"></h1></center>
<center><h1 id="e"></h1></center>
<center><h1 id="t"></h1></center>
</div>
<div id="rightdiv">
<center><h1 id="m2"></h1></center>
<center><h1 id="a2"></h1></center>
<center><h1 id="r2"></h1></center>
<center><h1 id="k2"></h1></center>
<center><h1 id="e2"></h1></center>
<center><h1 id="t2"></h1></center>
</div>
<div id="maindiv">
<img id="headimg" src="https://website.gyaann.com/head.jpg" alt="Not Found">
<ul id="topmenu">
<img id="logo" src="https://website.gyaann.com/logo.jpg" alt="Not Found">
<li><b>My Local Store</b></li>
</ul>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod1.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees <span>20/-</span> Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod2.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 45/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod3.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 90/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod4.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 70/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod5.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 75/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod6.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 25/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod7.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 30/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod8.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 50/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod9.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 65/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod10.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 40/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod11.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 55/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod12.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 70/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod1.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees <span>20/-</span> Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod2.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 45/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod3.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 90/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod4.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 70/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod5.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 75/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod6.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 25/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod7.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 30/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod8.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 50/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod9.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 65/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod10.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 40/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod11.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 55/- Only</b></h4>
</div>
<div class="prodiv">
<h4 class="proname"><b>Name of Product</b></h4>
<img class="proimg" src="https://website.gyaann.com/prod12.jpg" alt="Not found">
<h4 class="proprice"><b>Rupees 70/- Only</b></h4>
</div>
<table>
<tr><td></td><td><table><tr><td class="td"><b>Name</b></td><td><b>Bishagit Mukherjee</b></td></tr></table></td></tr>
<tr><td></td><td><table><tr><td class="td"><b>District</b></td><td><b>Hooghly</b></td></tr></table></td></tr>
<tr><td></td><td><table><tr><td class="td"><b>State</b></td><td><b>West Bengal</b></td></tr></table></td></tr>
<tr><td></td><td><table><tr><td class="td"><b>Mobile No</b></td><td><b>9432590048</b></td></tr></table></td></tr>
<tr><td></td><td><table><tr><td class="td"><b>Email-ID</b></td><td><b>princetheaffroze@gmail.com</b></td></tr></table></td></tr>
</table>
</div>
</body>
</html>
Show
How to create a Website using HTML and CSS step by step Website Tutorial
Example of SignUp Validation
<html>
<head>
<title>Basic Learner for Programming</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
margin:0px;
background-color:#333333;
}
#menu1
{
height:5%;
}
#inner-menu1
{
height:100%;
width:12%;
float:right;
}
h4
{
margin-top:0px;
color:#ffffff;
line-height:32px;
margin-left:20px;
float:left;
}
#home
{
color:#ffffcc;
}
#home:hover
{
color:#ffffff;
}
#inner-menu1 h4:hover
{
color:#ffff33;
}
fieldset
{
border-radius:10px;
margin:20px;
border:1px solid #333333;
}
legend
{
font-size:24px;
}
table
{
border-collapse:collapse;
width:100%;
height:85%;
}
td
{
line-height:24px;
width:50%;
}
#t1
{
width:70%;
background-image:url('https://website.gyaann.com/bg1.jpg');
background-size:100% 100%;
}
#t2
{
width:available;
background-color:#ffffcc;
}
input
{
width:160px;
border-radius:2px;
border:1px solid #333333;
text-align:center;
font-family:myfont;
}
select
{
border-radius:2px;
border:1px solid #333333;
font-family:myfont;
}
#signup-b
{
width:80px;
background-color:#333333;
color:#ffffff;
border-radius:10px;
}
#show
{
color:red;
}
@media screen and (max-width:1220px)
{
#inner-menu1
{
width:18%;
}
.h4
{
font-size:12px;
}
#t1
{
width:64%;
background-image:url('https://website.gyaann.com/bg2.jpg');
}
input
{
width:140px;
}
label
{
font-size:12px;
}
}
@media screen and (max-width:820px)
{
#inner-menu1
{
width:20%;
}
#t1
{
width:50%;
background-image:url('https://website.gyaann.com/eg-bg.gif');
background-size:auto;
}
}
@media screen and (max-width:720px)
{
#inner-menu1
{
width:30%;
float:right;
}
#t1
{
width:20%;
background-image:none;
background-color:#ffffcc;
}
}
@media screen and (max-width:480px)
{
h4
{
margin-left:4px;
font-size:12px;
}
#t1
{
padding:0px;
width:0.2%;
}
}
</style>
</head>
<body>
<div id="menu1">
<h4>My Store Online</h4>
<a href="home.php"><h4 id="home">Home</h4></a>
<div id="inner-menu1">
<a href="login.php"><h4>Login</h4></a>
<a href="signup.php"><h4>Sing Up</h4></a>
</div>
</div>
<table>
<tr>
<td id="t1"></td>
<td id="t2">
<form action="view.php" method="post" enctype="multipart/form-data" onsubmit="return validate()">
<center>
<fieldset>
<legend>Sign Up</legend><br>
<table>
<tr>
<td colspan="2"><label style="float:right; font-size:12px; color:red">Upload only jpg or jpeg picture</label></td>
</tr>
<tr>
<td><label>Photo</label></td>
<td><input type="file" required name="photo"></td>
</tr>
<tr>
<td><label>Full Name</label></td>
<td><input id="name" type="text" placeholder="Enter Your Name" maxlength="30" required name="name"></td>
</tr>
<tr>
<td><label>Contact Number</label></td>
<td><input id="cont" type="text" placeholder="Enter Contact Number" maxlength="10" required name="contact" onkeyup="this.value=this.value.replace(/[^\d]/,'')"></td>
</tr>
<tr>
<td><label>Email ID</label></td>
<td><input type="email" placeholder="Enter Email ID" maxlength="40" required name="email"></td>
</tr>
<tr>
<td><label>District</label></td>
<td>
<select id="dist" name="district">
<option selected disabled>-----District-----</option>
<option>24 PGS North</option>
<option>24 PGS South</option>
<option>Howrah</option>
<option>Hooghly</option>
</select>
</td>
</tr>
<tr>
<td><label>State</label></td>
<td><input type="text" readonly value="West Bengal" name="state"></td>
</tr>
<tr>
<td><label>Category</label></td>
<td>
<select name="category">
<option>Food</option>
<option>Glossary</option>
<option>Stationary</option>
<option>Furniture</option>
<option>Property</option>
<option>Garment</option>
<option>Education</option>
<option>Training</option>
<option>Electronics</option>
<option>Traveling</option>
<option>Service</option>
</select>
</td>
</tr>
<tr>
<td><label>Username</label></td>
<td><input id="userid" type="text" placeholder="Enter Your Username" maxlength="10" required name="user"></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input id="pass1" type="password" placeholder="Enter Your Password" maxlength="20" required name="pass"></td>
</tr>
<tr>
<td><label>Confirm Password</label></td>
<td><input id="pass2" type="password" placeholder="Confirm Your Password" maxlength="20" required></td>
</tr>
<tr>
<td colspan="2"><center><h6 id="show"></h6></center></td>
</tr>
<tr>
<td colspan="2"><center><input id="signup-b" type="submit" value="Preview"></center></td>
</tr>
</table>
</fieldset>
</center>
</form>
</td>
</tr>
</table>
<script>
function validate()
{
var dist = document.getElementById("dist").value;
var pass1 = document.getElementById("pass1").value;
var pass2 = document.getElementById("pass2").value;
var passlen = pass1.length;
var cont = (document.getElementById("cont").value).length;
var name = document.getElementById("name").value;
var user = document.getElementById("userid").value;
var i, j, k, l, m;
var pval1 = 0;
var pval2 = 0;
for (m = 0; m < name.length; m++)
{
if ((name.charCodeAt(m) > 32 && name.charCodeAt(m) < 48) || (name.charCodeAt(m) > 57 && name.charCodeAt(m) < 65) || (name.charCodeAt(m) > 90 && name.charCodeAt(m) < 97) || (name.charCodeAt(m) > 122 && name.charCodeAt(m) < 127) || (name.charCodeAt(m) > 47 && name.charCodeAt(m) < 58))
{
document.getElementById("show").innerHTML = "Name must contain only alphabets";
return false;
}
}
if (name.charCodeAt(0) == 32)
{
document.getElementById("show").innerHTML = "Space before the name is not allowed";
return false;
}
else if (name.charCodeAt(name.length - 1) == 32)
{
document.getElementById("show").innerHTML = "Space after the name is not allowed";
return false;
}
for (i = 0; i < user.length; i++)
{
if (user.charCodeAt(i) < 97 | user.charCodeAt(i) > 122)
{
document.getElementById("show").innerHTML = "Username must contain only small alphabets";
return false;
}
}
for (j = 0; j < pass1.length; j++)
{
if (pass1.charCodeAt(j) > 96 && pass1.charCodeAt(j) < 123)
{
pval1 = pval1 + 1;
}
}
for (k = 0; k < pass1.length; k++)
{
if (pass1.charCodeAt(k) > 47 && pass1.charCodeAt(k) < 58)
{
pval2 = pval2 + 1;
}
}
if((pval1 < 1) || (pval2 < 1))
{
document.getElementById("show").innerHTML = "Password must be alphanumeric";
return false;
}
for (l = 0; l < pass1.length; l++)
{
if ((pass1.charCodeAt(l) > 32 && pass1.charCodeAt(l) < 48) || (pass1.charCodeAt(l) > 57 && pass1.charCodeAt(l) < 65) || (pass1.charCodeAt(l) > 90 && pass1.charCodeAt(l) < 97) || (pass1.charCodeAt(l) > 122 && pass1.charCodeAt(l) < 127))
{
document.getElementById("show").innerHTML = "Password must not contains special character";
return false;
}
else if (pass1.charCodeAt(l) == 32)
{
document.getElementById("show").innerHTML = "Remove space from password";
return false;
}
}
if(passlen < 8)
{
document.getElementById("show").innerHTML = "Password must be minimum of 8 characters";
return false;
}
else if(pass1 != pass2)
{
document.getElementById("show").innerHTML = "Password and Confirm Password unmatch";
return false;
}
else if(cont != 10)
{
document.getElementById("show").innerHTML = "Mobile number must be of 10 digits";
return false;
}
else if(dist == "-----District-----")
{
document.getElementById("show").innerHTML = "Select Your District";
return false;
}
}
</script>
</body>
</html>
Show