How to create a Sign up Page Using Twitter Bootstrap

Submitted by: 
Language: 
Visitors have accessed this post 1134 times.

In this tutorial, I'm going to show you how to create a Sign up page using the twitter bootstrap framework. Using bootstrap framework, it has a ready made piece of code and you can save time because it easy to use, fast and better.
If you don’t have this framework yet, you can download it here.
After downloading, create a new folder and name it as “signup”. Then save this to our local server. Then extract the downloaded file and copy the three folders namely css, fonts and js.
Here’s the folder structure:
signup/
├── 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

This time, let’s create a new PHP file and save it as “signup.php”. And add the following code.

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <meta content="width=device-width, initial-scale=1.0" name="viewport">
  7. <meta content="" name="description">
  8. <meta content="" name="author">
  9. <link href="" rel="shortcut icon">
  10.  
  11. <title>Sign Up page</title><!-- Bootstrap core CSS -->
  12. <link href="css/bootstrap.css" rel="stylesheet">
  13. <link href="css/bootstrap-responsive.css" rel="stylesheet">
  14. </head>
  15.  
  16. <body>
  17. <div class="container">
  18. <div class="well">
  19. <form action="register.php" class="form-horizontal well" method="post">
  20. <fieldset>
  21. <legend>Sign Up</legend>
  22.  
  23. <h4>It’s free and always will be.</h4>
  24.  
  25. <div class="row">
  26. <div class="col-xs-8">
  27. <div class="form-group">
  28. <div class="rows">
  29. <div class="col-md-8">
  30. <div class="col-lg-6">
  31. <input class="form-control input-lg" id="fName" name=
  32. "fName" placeholder="First Name" type="text">
  33. </div>
  34.  
  35. <div class="col-lg-6">
  36. <input class="form-control input-lg" id="lName" name=
  37. "lName" placeholder="Last Name" type="text">
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42.  
  43. <div class="form-group">
  44. <div class="rows">
  45. <div class="col-md-8">
  46. <div class="col-lg-12">
  47. <input class="form-control input-lg" id="email" name=
  48. "email" placeholder="Your Email" type="text">
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53.  
  54. <div class="form-group">
  55. <div class="rows">
  56. <div class="col-md-8">
  57. <div class="col-lg-12">
  58. <input class="form-control input-lg" id="reemail" name=
  59. "reemail" placeholder="Re-enter Email" type="text">
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64.  
  65. <div class="form-group">
  66. <div class="rows">
  67. <div class="col-md-8">
  68. <div class="col-lg-12">
  69. <input class="form-control input-lg" id="password"
  70. name="password" placeholder="New Password" type=
  71. "password">
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76.  
  77. <div class="form-group">
  78. <div class="rows">
  79. <div class="col-md-8">
  80. <h4></h4>
  81.  
  82. <div class="col-md-3">
  83. <h4><label class=
  84. "col-lg-4 control-label">Birthday</label> </h4>
  85.  
  86. <div class="col-lg-3">
  87. <h4><select class="form-control input-sm" name=
  88. "month">
  89. <option>
  90. Month
  91. </option>
  92. <!--php code for populating the selectbox for Month -->
  93. </select> </h4>
  94.  
  95. <div class="col-lg-3">
  96. <h4><select class="form-control input-sm" name=
  97. "day">
  98. <option>
  99. Day
  100. </option>
  101. <!--php code for populating the selectbox for Day -->
  102. </select> </h4>
  103.  
  104. <div class="col-lg-3">
  105. <h4><select class="form-control input-sm"
  106. name="year">
  107. <option>
  108. Year
  109. </option>
  110. <!--php code for populating the selectbox for Year -->
  111. </select> </h4>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119.  
  120. <div class="form-group">
  121. <div class="rows">
  122. <div class="col-md-4">
  123. <div class="col-lg-6">
  124. <div class="radio">
  125. <label><input checked id="optionsRadios1" name=
  126. "optionsRadios" type="radio" value=
  127. "Female">Female</label>
  128. </div>
  129. </div>
  130.  
  131. <div class="col-lg-6">
  132. <div class="radio">
  133. <label><input id="optionsRadios2" name=
  134. "optionsRadios" type="radio" value="Male">
  135. Male</label>
  136. </div>
  137. </div>
  138. </div>
  139. </div>
  140. </div>
  141.  
  142. <div class="form-group">
  143. <div class="rows">
  144. <div class="col-md-8">
  145. <div class="col-lg-12">
  146. <button class="btn btn-success btn-lg" type=
  147. "submit">Sign Up</button>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. </fieldset>
  155. </form>
  156. </div>
  157. </div><!-- /container -->
  158. </body>
  159. </html>

Next, inside the Month Selectbox. Add the following code:
This code added, we create an array containing a range of months. Then on the next line, we use foreach loop to iterate and get all the values from the array and we also use it to populate the selectbox.

  1. $m = array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
  2. foreach ($m as $month) {
  3. echo '<option value='.$month.'>'.$month.'</option>';
  4. }

And for Days. Add the following code:
For days, we only use the range of the array from 1 to 31.

  1. $d = range(31, 1);
  2. foreach ($d as $day) {
  3. echo '<option value='.$day.'>'.$day.'</option>';
  4. }

Next, for year. Add the following code:

  1. $years = range(2010, 1900);
  2. foreach ($years as $yr) {
  3. echo '<option value='.$yr.'>'.$yr.'</option>';
  4. }

Then the output should look like as shown below.

signup

Next, we’re going to create a new PHP file to view the process data from sign up page after submitting the form and we will save it as “process_signup.php”. Then add the following code:

  1. echo 'First Name : '.$fName = $_POST['fName'].'<br/>';
  2. echo 'Last Name : '.$lName = $_POST['lName'].'<br/>';
  3. echo 'Email Address : '.$email = $_POST['email'].'<br/>';
  4. echo 'Re-Email Address : '.$reemail = $_POST['reemail'].'<br/>';
  5. echo 'Password : '.$password = sha1($_POST['password']).'<br/>';
  6. echo 'Birth Day : '.$month = $_POST['month'].'-'. $day = $_POST['day'].'-'. $year = $_POST['year'].'<br/>';
  7. echo 'Gender : '.$optionsRederadios = $_POST['optionsRadios'];
  8.  

The output of the code above will look like as shown below.
process_signup

In this tutorial, we the different class and these are:

  1. class="form-horizontal well"
  2. class="rows"
  3. class="col-xs-8"
  4. class="form-group"
  5. class="col-md-8"
  6. class="col-lg-6"
  7. class="form-control input-lg"
  8. class="form-control input-sm"
  9. class="col-lg-4 control-label"
  10. class="radio"

If you want to see more of my works, new Source Code or Application and Tutorials Just click here.


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.