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="accounts@freelanceswitch.com">
<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

Document Information

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