How to register a form in a HTML Template
STEP 1: First of all select a HTML template.
STEP 2: Then make a registration form using the coding of an index page of the template. Coding is as follows:
<html><head >
<script type="text/javascript">
function validate()
{
if(document.getElementById('name').value=="")
{
alert("enter name");
document.getElementById('name').focus();
return false;
}
if(document.getElementById('email').value=="")
{
alert("enter email");
document.getElementById('email').focus();
return false;
}
return true;
}
</script>
<title>Main Page</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.6.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Didact_Gothic_400.font.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="js/atooltip.jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.js" ></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<style type="text/css">
.bg{ behavior: url(js/PIE.htc); }
</style>
<![endif]-->
<!--[if lt IE 7]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0" alt="" /></a>
</div>
<![endif]-->
</head>
<body id="page1">
<div class="body1">
<div class="main">
<!-- header -->
<?php include("include/header.php");?>
<div class="wrapper">
<!-- content -->
<div class="body2">
<div class="main">
<section id="content">
<div class="wrapper">
<article class="col1">
<div class="pad2">
<table align="100%" align="center">
<tr>
<td colspan="3"><h2 align="center">Registration Form</h2>
<form name="Registration" action="" method="post" onsubmit="return validate()">
<table border="0" width="100%" align="center">
<tr>
<td> Name:</td><td><input type="text" name="name" id="name" size="20"></td>
</tr>
<tr height="22"> </tr>
<tr>
<td> Uname:</td><td><input type="text" name="uname" id="uname" size="20"></td>
</tr>
<tr height="22"> </tr>
<tr>
<td> Email:</td><td><input type="text" name="email" id="email" size="20"></td>
</tr>
<tr height="22"> </tr>
<tr>
<td> Password:</td><td><input type="password" name="password" id="password" size="20"></td>
</tr>
<tr height="22"> </tr>
<tr>
<td> City:</td>
<td>
<select name="city" >
<option value="PS">Please Select</option>
<option value="Rajpura">Rajpura</option>
<option value="Jaipur">Jaipur</option>
<option value="Haridwar">Haridwar</option>
<option value="Shimla">Shimla</option>
</select>
</td>
</tr>
<tr height="22"> </tr>
<tr>
<td> State:</td>
<td>
<select name="state" >
<option value="PS">Please Select</option>
<option value="Punjab">Punjab</option>
<option value="Jaipur">Rajasthan</option>
<option value="Uttranchal">Uttranchal</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
</select>
</td>
</tr>
<tr height="22"> </tr>
<tr>
<td> Status:</td>
<td><input type="radio" name="status" value="married" >Married
<br><input type="radio" name="status" value="unmarried" >Unmarried</td>
</tr>
<tr height="22"> </tr>
<tr>
<td> Education:</td>
<td><input type="checkbox" name='education' value="BCA" >BCA
<input type="checkbox" name='education' value="MCA" >MCA<br>
<input type="checkbox" name='education' value="B.TECH" >B.TECH
<input type="checkbox" name='education' value="M.TECH" >M.TECH
</td>
</tr>
<tr height="22"> </tr>
<tr>
<td> Address:</td>
<td><textarea name="address" rows="4" cols="23" ></textarea></td>
</tr>
<tr height="22"> </tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="submit" class="button"></td>
` </tr>
</table></form>
</td>
</div><br><br><br><br>
<!--<td align="right">
<form id="form_1" method="post">
<table width="100%" border="0" align="center" cellspacing="10" cellpadding="11" align="right">
<tr>
<td colspan="2" align="center"><img src="images/imagesn.jpeg" height="150" width="150" ></td>
</tr>
<tr>
<td colspan=2 align="center"><h2 class="pad_bot1">Login</h2></td>
</tr>
<tr>
<td> Username:</td>
<td><input type="text" name= "username" size="15"></td>
</tr>
<tr height="22"> </tr>
<tr>
<td> Password:</td>
<td><input type="password" name= "password" size="15"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="submit" value="Login" class="button"></td>
</tr>
</table>
Know exactly what you want? <br>
Try our <a href="#">Advanced Search</a>
</div>
</form>-->
</article>
</div>
</td>
</tr></td>
</table></table>
<div class="wrapper">
<article class="col1">
<div class="pad_left1">
<h2 class="pad_bot1">Buyers. Sellers. Proprietors. Agents.</h2>
<div class="wrapper">
<article class="cols">
<h4 class="img1">Selling</h4>
<p class="pad_bot1"><strong class="color1">Welcome one of <br>
<a href="http://blog.templatemonster.com/free-website-templates/" target="_blank">free website templates</a></strong></p>
<p class="pad_bot2">
created by TemplateMonster.com team, optimized for 1024X768 px.</p>
<a href="#" class="button">Read more</a>
</article>
<article class="cols pad_left1">
<h4 class="img2">Investing</h4>
<p class="pad_bot1"><strong class="color1"><a href="http://blog.templatemonster.com/2011/10/10/free-website-template-slideshow-real-estate/" target="_blank" rel="nofollow">Free website template</a> for<br>
Real Estate business</strong></p>
<p class="pad_bot2">
goes with PSD source files and without them.</p>
<a href="#" class="button">Read more</a>
</article>
<article class="cols pad_left1">
<h4 class="img3">Renting</h4>
<p class="pad_bot1"><strong class="color1">Template has several pages</strong></p>
<p class="pad_bot2">
<a href="index.html" class="color2">Main</a>, <a href="Buying.html" class="color2">Buying</a>, <a href="Selling.html" class="color2">Selling</a>, <a href="Renting.html" class="color2">Renting</a>, <a href="Finance.html" class="color2">Finance</a>, <a href="Contacts.html" class="color2">Contacts</a> (note that contact us form – doesn’t work).</p>
<a href="#" class="button">Read more</a>
</article>
</div>
</div>
</article>
<article class="col2">
<div class="pad1">
<h3>Special Offers</h3>
<ul class="list1">
<li><a href="#">Home Loan Offer</a></li>
<li><a href="#">Free Calculators</a></li>
<li><a href="#">Free Loan Tools</a></li>
<li><a href="#">Value Your Home</a></li>
<li><a href="#">Recently Sold Properties</a></li>
<li><a href="#">Suburb Statistics</a></li>
<li><a href="#">Compare Property Prices</a></li>
</ul>
</div>
</article>
</div>
</section>
</div>
</div>
<div class="body3">
<div class="main">
<section id="content2">
<div class="wrapper">
<article class="col1">
<div class="pad2">
<h2>Remodeling Rooms</h2>
<div class="wrapper pad_bot3">
<figure class="left marg_right1"><img src="images/page1_img4.jpg" alt=""></figure>
<p class="pad_bot1"><strong class="color2">2006, 3 baths, 6 beds, building size: 5000 sq. ft.<br>
Price: <span class="color1">$ 600 000</span></strong></p>
<p class="pad_bot2">
Massa dictum ementum velitumo od consequat ante oremsumas ame consectetueraipiscing eliteli ueedlorAliquam conguen nisauris accusalla vel deinol tincidunt ligula magna semper ipsum.</p>
<a href="#" class="button">Read more</a>
</div>
<div class="wrapper">
<figure class="left marg_right1"><img src="images/page1_img5.jpg" alt=""></figure>
<p class="pad_bot1"><strong class="color2">2006, 3 baths, 6 beds, building size: 5000 sq. ft.<br>
Price: <span class="color1">$ 600 000</span></strong></p>
<p class="pad_bot2">
Massa dictum ementum velitumo od consequat ante oremsumas ame consectetueraipiscing eliteli ueedlorAliquam conguen nisauris accusalla vel deinol tincidunt ligula magna semper ipsum.</p>
<a href="#" class="button">Read more</a>
</div>
</div>
</article>
<article class="col2">
<div class="pad1">
<h3>Recent News</h3>
<div class="wrapper">
<span class="date"><strong>28</strong><span>may</span></span>
<p><a href="#" class="color2">Donec consequat risus</a><br>
Hendrerit conghdim entum diam metus fringilla nisl, in porta sapien purus quis odiosem... <a href="#">more</a></p>
</div>
<div class="wrapper">
<span class="date"><strong>25</strong><span>may</span></span>
<p><a href="#" class="color2">Nullam dignissim</a><br>
Laoreet neque, quis sollicitudin orci tempus etiam viverra leo euismod pulvinar accumsan... <a href="#">more</a></p>
</div>
<div class="wrapper">
<span class="date"><strong>22</strong><span>may</span></span>
<p><a href="#" class="color2">Quisque nunc lorem</a><br>
Feugiat nec sodales quis, iaculis sed libero. Cras vel nisl justo, ac posuere est nulla facilisi... <a href="#">more</a></p>
</div>
</div>
</article>
</div>
</section>
</div>
</div>
<!-- / content -->
<div class="body4">
<div class="main">
<!-- / footer -->
<?php include("include/footer.php");?>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
The output of the registration form is:
