How to create a Sign up Page Using Twitter Bootstrap

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