How to Create a Registration Page Using a Twitter Bootstrap Framework

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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

<!DOCTYPE html>

<head>

<title>Registration form</title>

</head>

<body>

<legend>Register Now</legend>

<h4>It’s free and always will be.</h4>

</div>

</div>

</div>

</div>

<input class="form-control input-lg" id="password" name="password" placeholder="New Password" type=

"password">

</div>

<h4>

<label class="col-lg-4 control-label">Birthday</label>

</div>

<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>

<?php

$d = range(31, 1);

foreach ($d as $day) {

echo '<option value='.$day.'>'.$day.'</option>';

}

</select>

</div>

<?php

$years = range(2010, 1900);

foreach ($years as $yr) {

echo '<option value='.$yr.'>'.$yr.'</option>';

}

</select>

</div>

</h4>

</div>

<label><input checked id="optionsRadios1" name="optionsRadios" type="radio" value="Female">Female</label>

</div>

</div>

<button class="btn btn-success btn-lg" type="submit">Register</button>

</div>

</fieldset>

</form>

</div>

</div>

</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"

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.

1 thought on “How to Create a Registration Page Using a Twitter Bootstrap Framework”

Leave a Comment Cancel reply