Registration Form Using Bootstrap

Submitted by GeePee on Thursday, April 2, 2015 - 22:16.
In one of our previous tutorial, we discuss on How to Create Secure Registration Page in PHP/MySQL. This time, I will put some extra coding to make our registration form look better by using CSS code. We will be using bootstrap to make our like easier. No need to reinvent the wheel as it is already invented by twitter. So here we go. First you need to download the bootstrap framework. After you download the framework, extract it on your computer and copy the following files under CSS folder: bootstrap.css bootstrap-responsive.css Create a directory called "css" and paste the above files under it. Next, create a file called registration.html and paste the following code: 
  1. <!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Register</title>
  6. <link href="css/bootstrap.css" rel="stylesheet">
  7. <link href="css/bootstrap-responsive.css" rel="stylesheet">
  8. </head>
  9.  
  10. <body>
  11. <div class="container">
  12. 	<form class="form-horizontal" id="registration" method='post' action='register.php'>
  13. 		<fieldset>
  14. 			<legend>Registration Form</legend>
  15. 			<div class="control-group">
  16. 				<label class="control-label">Username:</label>
  17. 				<div class="controls">
  18. 					<input type="text" id="username" name="user_name">
  19. 				</div>
  20. 			</div>
  21. 			<div class="control-group">
  22. 				<label class="control-label">Password:</label>
  23. 				<div class="controls">
  24. 					<input type="text" id="password" name="password1">
  25. 				</div>
  26. 			</div>
  27. 			<div class="control-group">
  28. 				<label class="control-label">Password:</label>
  29. 				<div class="controls">
  30. 					<input type="text" id="password" name="password2">
  31. 				</div>
  32. 			</div>
  33. 			<div class="control-group">
  34. 				<label class="control-label">Email</label>
  35. 				<div class="controls">
  36. 					<input type="text" id="email" name="email">
  37. 				</div>
  38. 			</div>
  39. 			<div class="control-group">
  40. 				<label class="control-label"></label>
  41. 				<div class="controls">
  42. 					<button type="submit" class="btn btn-success" >Submit</button>
  43. 				</div>
  44. 			</div>
  45. 		</fieldset>
  46. 	</form>
  47. </div>
  48. </body>
  49. </html>
The file structure should look like: 
  1. login\registration.html
  2. login\css\bootstrap.css
  3. login\css\bootstrap-responsive.css
This assumes that you put this into the "login" folder. Make sure that you also follow on how to create the PHP script for our registration. Understanding how this code works. As you can see, there are several class we used in the code above. They are: 
  1. class="container"
  2. class="form-horizontal"
  3. class="control-label"
  4. class="control-group"
  5. class="control-label"
These class are not meant to be modified as it is defined under the bootstrap framework. Please follow this link to see the other samples: http://twitter.github.io/bootstrap/base-css.html#forms

Tags

Add new comment

About text formats
  • 2075 views