In this tutorial, I’m going to teach you how to create a simple Registration Page using Twitter bootstrap. We all know that there are many cases that we need to create a User Registration Page for our site that allow visitors register themselves and have access to the site. But, some programmer may find it difficult to create a simple Registration page. In this lesson, we will also use a Twitter bootstrap Framework so that we can save time, because it has a piece of code that are ready to use, and using this framework can help you build your project and better.
If you don’t have this framework yet, you can download it here.http://getbootstrap.com/2.3.2/
After downloading, we need to create a new folder and name it as “snappy”. Then save this folder inside the htdocs folder. Then extract the downloaded file and copy the three folders namely css, fonts and js.
Here’s the folder structure;
snappy/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
at this time, we will now create our registration page. To do this, let’s create a new PHP file called “registration.php”. Then add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="" rel="shortcut icon">
<title>Registration form</title><!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="well">
<form action="register.php" class="form-horizontal well" method="post">
<fieldset>
<legend>Register Now</legend>
<h4>It’s free and always will be.</h4>
<div class="row">
<div class="col-xs-8">
<div class="form-group">
<div class="rows">
<div class="col-md-8">
<div class="col-lg-6">
<input class="form-control input-lg" id="fName" name="fName" placeholder="First Name" type="text">
</div>
<div class="col-lg-6">
<input class="form-control input-lg" id="lName" name="lName" placeholder="Last Name" type="text">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="rows">
<div class="col-md-8">
<div class="col-lg-12">
<input class="form-control input-lg" id="email" name="email" placeholder="Your Email" type="email">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="rows">
<div class="col-md-8">
<div class="col-lg-12">
<input class="form-control input-lg" id="reemail" name="reemail" placeholder="Re-enter Email" type="text">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="rows">
<div class="col-md-8">
<div class="col-lg-12">
<input class="form-control input-lg" id="password" name="password" placeholder="New Password" type=
"password">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="rows">
<div class="col-md-8">
<h4>
<div class="col-md-3">
<label class="col-lg-4 control-label">Birthday</label>
</div>
<div class="col-lg-3">
<select class="form-control input-sm" name="month">
<option>Month</option>
<?php
$m = array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
foreach ($m as $month) {
echo '<option value='.$month.'>'.$month.'</option>';
}
?>
</select>
</div>
<div class="col-lg-3">
<select class="form-control input-sm" name="day">
<option>Day</option>
<?php
$d = range(31, 1);
foreach ($d as $day) {
echo '<option value='.$day.'>'.$day.'</option>';
}
?>
</select>
</div>
<div class="col-lg-3">
<select class="form-control input-sm" name="year">
<option>Year</option>
<?php
$years = range(2010, 1900);
foreach ($years as $yr) {
echo '<option value='.$yr.'>'.$yr.'</option>';
}
?>
</select>
</div>
</h4>
</div>
</div>
</div>
<div class="form-group">
<div class="rows">
<div class="col-md-4">
<div class="col-lg-6">
<div class="radio">
<label><input checked id="optionsRadios1" name="optionsRadios" type="radio" value="Female">Female</label>
</div>
</div>
<div class="col-lg-6">
<div class="radio">
<label><input id="optionsRadios2" name="optionsRadios" type="radio" value="Male"> Male</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="rows">
<div class="col-md-8">
<div class="col-lg-12">
<button class="btn btn-success btn-lg" type="submit">Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div><!-- /container -->
</body>
</html>
After adding the code above. We will now try it in our browser. Just type in the address bar http://localhost/snappy/registration.php. and it will show you the page that looks like as shown below.
And here’s the different classes used in this tutorial:
class="navbar navbar-inverse navbar-fixed-top" class="container" class="navbar-header" class="navbar-toggle" class="navbar-collapse collapse" class="navbar-form navbar-right" class="form-group" class="form-control" class="rows" class="col-xs-6" class="form-horizontal" class="form-control input-lg" class="form-inline" class="form-control input-sm" class="radio"
And here’s my next topic:
Saving Data from Registration Form into MySQL Database using PHP/MySQL
How to useTwitter Bootstrap Table using PHP/MySQL
Download source code snappy.
How to create a registration page using netbean java