Code For Registration Page

CODE FOR REGISTRATION PAGE:
<html>
<head>
<meta charset="utf-8">
<title>Best Login Page design in html and css</title>
<style type="text/css">
body {
background-color: #f4f4f4;
color: #5a5656;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5em;
}
a { text-decoration: none; }
h1 { font-size: 1em; }
h1, p {
margin-bottom: 0px;
}
strong {
font-weight: bold;
}
.uppercase { text-transform: uppercase; }
/* ---------- LOGIN ---------- */

#login {
margin: 50px auto;
width: 300px;
}
form fieldset input[type="text"], input[type="password"] {

background-color: #e5e5e5;
border: none;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #5a5656;
font-size: 14px;
height: 50px;
outline: none;
padding: 0px 0px;
width: 280px;
-webkit-appearance:none;
}
</style>
<SCRIPT type="text/javascript">
function validatePhNum(thisform)
{
var ph=thisform.phnum.value;
if(ph==null||ph=="")
{
alert("enter phone number")
thisform.phnum.focus();
return false;
}
if(ph.length<10)
{
alert("phone number must have atleast 10 digits");
return false;
}
if(isNaN(ph))
{
alert("invalid phone number");
return false;
}
return true;
function validateEmail(thisform)
{
var txtEmail=thisform.email.value;
var illegalChars=/[\<\>\,\;\:\\\/\"\[\]]/;
var n1=txtEmail.indexof("@");
var n2=txtEmail.lastIndexof(".");
if(txtEmail=="")
{
alert("enter email address");
thisform.email.focus();
return false;
}
if(txtEmail.match(illegalChars))
{
alert("invalid email address");
return false;
}
if(n1<1 || n2-n1<2)
{
alert("invalid email address");
return false;
}
return true;
}
function validateUrPw(thisform)
{
var userName=thisform.uname.value;
var pass1=thisform.pw1.value;
var pass2=thisform.pw2.value;
if(userName=="")
{
alert("Please enter user name");
thisform.uname.focus();
return false;
}
if(userName.length<6)
{
alert("username must be atleast six characters");
thisform.uname.focus();
return false;
}
if(pass1=="")
{
alert("please enter the password");
thisform.pw1.focus();
return false;
}
if(pass1.length<8)
{
alert("password must contain atleast 8 digit");
return false;
}
if(pass2=="")
{
alert("please enter the password");
return false;
}
if(pass2.length<8)
{
alert("password must contain atleast 8 digit");
return false;
}
if(pass1.length>=8 && pass2.length>=8)

{
if(pass1!=pass2)
{
alert("password mismatched! enter correct password");
return false;
}
}
return true;
}
function MathThing()
{
firstnumber = prompt("Enter Quantity.", "");
secondnumber = prompt("Enter Price.", "");
total = firstnumber * secondnumber;
alert(firstnumber + " * " + secondnumber + " = " + total);
}
</SCRIPT>
</head>
<body>
<div id="login"><img src="paay.jpg" style="width:100px;height:100px;">
<h1><strong>Welcome.</strong></h1>
<h1>REGISTRATION FORM</h1>
<div id="login">
<form action="login.html">
<fieldset><legend>DETAILS</legend>
<p class="one">First Name:<input type="text" placeholder="eg:Kartik" name="firstname"></p><br>
Last Name:<input type="text" name="lastname" placeholder="eg=Jadhav"><br>
Address:<textarea rows="10" cols="30" placeholder="Enter your Address"></textarea><br>
Contact:<input type="text" name="phnum" placeholder="enter 10 digit number"/><br/>

Email-id:<input type="email" name="email" placeholder="@ symbol is necessary"><br/></fieldset>
<fieldset> <legend> LOGIN DETAILS </legend>
Username:<input type="text" name="uname" placeholder="Username atleast 6 digit"/><br/>
Password:<input type="password" name="pw1" placeholder="Password at least 8 digit"/><br/>
Confirm Password:<input type="password" name="pw2"/><br/>
<INPUT type="submit" value="submit"/>
</fieldset>
<br>
</div> 

</FORM>
</body>
</html>
CODE FOR LOGIN PAGE

<html>
<head>
<meta charset="utf-8">
<title> Login Page </title>
<style type="text/css">
body {
background-color: #f4f4f4;
color: #5a5656;
font-size: 16px;
line-height: 1.5em;
}
a { text-decoration: none; }
h1 { font-size: 1em; }
h1, p {
margin-bottom: 10px;
}
strong {
font-weight: bold;
}
.uppercase { text-transform: uppercase; }
/* ---------- LOGIN ---------- */
#login {
margin: 50px auto;
width: 300px;
}
form fieldset input[type="text"], input[type="password"] {
background-color: #e5e5e5;
border: none;
border-radius: 3px;
color: #5a5656;
font-size: 14px;
height: 50px;
outline: none;
padding: 0px 10px;
width: 280px;
}
form fieldset input[type="submit"] {
background-color: #008dde;
border: none;
border-radius: 3px;
color: #f4f4f4;
cursor: pointer;
height: 50px;
text-transform: uppercase;
width: 300px;
}
form fieldset a {
color: #5a5656;
font-size: 10px;
}
form fieldset a:hover { text-decoration: underline; }
.btn-round {
background-color: #5a5656;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
color: #f4f4f4;
display: block;
font-size: 12px;
height: 50px;
line-height: 50px;
margin: 30px 125px;
text-align: center;
width: 50px;
}
.facebook-before {
background-color: #0064ab;
border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
color: #f4f4f4;
display: block;
float: left;
height: 50px;
line-height: 50px;
text-align: center;
width: 50px;
}
.facebook {
background-color: #0079ce;
border: none;
color: #f4f4f4;
cursor: pointer;
height: 50px;
width: 250px;
}
.twitter-before {
background-color: #189bcb;
color: #f4f4f4;
display: block;
float: left;
height: 50px;
line-height: 50px;
text-align: center;
width: 50px;
}
.twitter {
background-color: #1bb2e9;
border: none;
color: #f4f4f4;
cursor: pointer;
height: 50px;
width: 250px;
}
</style>
</head>
<body>
<div id="login"><img src="paay.jpg" style="width:100px;height:100px;">
<form action="paymentpage.html">
<h1><strong>Welcome.</strong> Please login.</h1>

<form action="javascript:void(0);" method="get">
<fieldset>
<p><input type="text" required value="Username" onBlur="if(this.value=='')this.value='Username'"
onFocus="if(this.value=='Username')this.value='' "></p>
<p><input type="password" required value="Password" onBlur="if(this.value=='')this.value='Password'"
onFocus="if(this.value=='Password')this.value='' "></p>
<p><a href="#">Forgot Password?</a></p>
<p><input type="submit" value="Login"></p>
</fieldset>
</form>
<p><span class="btn-round">or</span></p>
<p>
<a class="facebook-before"></a>
<button class="facebook">Login Using Facbook</button>
</p>
<p>
<a class="twitter-before"></a>
<button class="twitter">Login Using Twitter</button>
</p>
<FORM action=" " onsubmit="return validateUrPw(this)" method="Post">

<FORM action=" " onsubmit="return validateEmail(this)" method="Post">
<FORM action=" " onsubmit="return validatePhNum(this)" method="Post">
<div id="login">
</div> 

</body>
</html>
PAYMENT PAGE :
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Simple Payment Form </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>

<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-
awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">


<div class="panel panel-default credit-card-box">
<div class="panel-heading display-table" >
<div class="row display-tr" ><img src="paay.jpg" style="width:100px;height:100px;">
<h3 class="panel-title display-td" >Payment Details</h3>
<div class="display-td" >
<img class="img-responsive pull-right" src="http://i76.imgup.net/accepted_c22e0.png">
</div>
</div>
</div>
<div class="panel-body">
<form role="form" id="payment-form">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<div class="input-group">
<input
type="tel"
class="form-control"
name="cardNumber"
placeholder="Valid Card Number"
autocomplete="cc-number"
required autofocus
/>
<span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-7 col-md-7">
<label for="cardExpiry"><span class="hidden-xs">EXPIRATION</span><span class="visible-xs-
inline">EXP</span> DATE</label>
<input
type="tel"
name="cardExpiry"
placeholder="MM / YY"
autocomplete="cc-exp"
required
/>
</div>
</div>
<div class="col-xs-5 col-md-5 pull-right">
<label for="cardCVC">CV CODE</label>
<input
type="tel"
name="cardCVC"
placeholder="CVC"
autocomplete="cc-csc"
required
/>
</div>
</div>
</div>
<div class="row">
<label for="couponCode">COUPON CODE</label>
<input type="text" class="form-control" name="couponCode" />
</div>
</div>
</div>
<div class="row">
<button class="btn btn-success btn-lg btn-block" type="submit">Start Subscription</button>
</div>
</div>
<div class="row" style="display:none;">
<p class="payment-errors"></p>
</div>
</div>
</form>
</div>
</div>

</div>
</div>
</div>
</body>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery.payment/1.2.3/jquery.payment.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
NEXT PAGE:
<html>
<body><img src="paay.jpg" style="width:100px;height:100px;"><p><big><b>Make a Donation to
VESIT</b></big><br />
Fill out the form and send us a few dollars for your favourite tutorial:</p>
<form action="thankyou.html" method="post">
<input type="hidden" name="cmd" value="_xclick">

<input type="hidden" name="business" value="[email protected]">
<strong>Donation / Contribution? </strong><br />
<select name="item_name">
<option value="Donation">Donation</option>
<option value="Contribution">Contribution</option>
</select>
<strong>Which tutorial are you donating for?</strong><br />

<select name="item_number">
<option value="PAAY Form Tutorial">The PAAY Form Tutorial</option>
<option value="Amazon S3 Tutorial">The Amazon S3 Tutorial</option>
<option value="Some Other Tutorial">Some Other Tutorial</option>
</select>
<strong>How much do you want to donate?</strong><br />

$ <input type="text" name="amount">
<input type="hidden" name="no_shipping" value="0">

<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="AU">
<input type="hidden" name="bn" value="PP-BuyNowBF">
<input type="hidden" name="return" value="thankyou.html">
<br /><br />
<input type="submit" value="Pay with PAAY!">
</form>
</body>
</html>

Code For Registration Page

Uploaded by

Copyright:

Available Formats

Code For Registration Page

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Code For Registration Page

Uploaded by

Copyright:

Available Formats

CODE FOR REGISTRATION PAGE:

/* ---------- LOGIN ---------- */

form fieldset input[type="text"], input[type="password"] {

if(pass1.length>=8 && pass2.length>=8)

Address:<textarea rows="10" cols="30" placeholder="Enter your Address"></textarea><br>

Contact:<input type="text" name="phnum" placeholder="enter 10 digit number"/><br/>

</div>

CODE FOR LOGIN PAGE

<h1><strong>Welcome.</strong> Please login.</h1>

<FORM action=" " onsubmit="return validateUrPw(this)" method="Post">

</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>

<link rel="stylesheet" href="css/style.css">

<form action="thankyou.html" method="post">

<input type="hidden" name="cmd" value="_xclick">

<strong>Which tutorial are you donating for?</strong><br />

<strong>How much do you want to donate?</strong><br />

<input type="hidden" name="no_shipping" value="0">

You might also like