How To Create a Bootstrap Styled Registration Form

In this lesson we will create a very simple Bootstrap form.

This form could be used as the basis for a typical registration form.

In the form we shall have 3 of the most common fields used in a registration form:

  • Name
  • Email
  • Password

You can obviously add more if required.

We will start by designing a very simple HTML5 page structure as follows:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap Form Example</title>
	</head>
	<body>
	</body>
</html>

Now that we have a simple page structure we can add the link to the Bootstrap CSS file (Line 5) as follows:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap Form Example</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	</head>
	<body>
	</body>
</html>

We can now structure a basic form. We will start with the form tags:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap Form Example</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	</head>
	<body>
		<form>
		</form>
	</body>
</html>

I mentioned at the start of the lesson that I wanted 3 input fields so we will now create 3 div tags to encompass each field. Each of these divs will have a class of form-group. This class basically adds some padding to the bottom of the div, thus separating each element a little:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap Form Example</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	</head>
	<body>
		<form>
			<div class="form-group">
			</div>
			<div class="form-group">
			</div>
			<div class="form-group">
			</div>
		</form>
	</body>
</html>

We can now add the label for each of the input fields:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap Form Example</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	</head>
	<body>
		<form>
			<div class="form-group">
				<label for="name">Name</label>
			</div>
			<div class="form-group">
				<label for="email">Email</label>
			</div>
			<div class="form-group">
				<label for="password">Password</label>
			</div>
		</form>
	</body>
</html>

We can now add each of the 3 input fields. Note that the type of input will differ depending on the type of input required. The class of form-control takes care of the styling of the input box. For example, it will add a highlight around the input box when you enter it. We also give the input an id which is the same as the label attribute e.g. in the name label we use for="name" and therefore the id of the input must be "name". The final attribute is the placeholder. This is not required but can be quite helpful in assisting users to identify what they have to enter into the input field.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap Form Example</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	</head>
	<body>
		<form>
			<div class="form-group">
				<label for="name">Name</label>
				<input type="text" class="form-control" id="name" placeholder="Name">
			</div>
			<div class="form-group">
				<label for="email">Email</label>
				<input type="email" class="form-control" id="email" placeholder="Email">
			</div>
			<div class="form-group">
				<label for="password">Password</label>
				<input type="password" class="form-control" id="password" placeholder="Password">
			</div>
		</form>
	</body>
</html>

Line 19: Notice that we used a type of password. When entering data into this field each character will appear as an asterisk. 

The last element we need to add to the form is the submit button. See line 21. 

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap Form Example</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	</head>
	<body>
		<form>
			<div class="form-group">
				<label for="name">Name</label>
				<input type="text" class="form-control" id="name" placeholder="Name">
			</div>
			<div class="form-group">
				<label for="email">Email</label>
				<input type="email" class="form-control" id="email" placeholder="Email">
			</div>
			<div class="form-group">
				<label for="password">Password</label>
				<input type="password" class="form-control" id="password" placeholder="Password">
			</div>
			<button type="submit" class="btn btn-default">Submit</button>
		</form>
	</body>
</html>

That's it!

We have created a very simple Bootstrap styled form.

However, when we enter data into the form and hit the submit button the data will not be sent anywhere or processed.

We will need to write some additional code to handle the processing of the data and we will start to review this code in the following lesson:

How to Process Form Data in PHP.

Want to Learn More?

Become a member and get access to the member only area of this site here.

Comments

Your email address will not be published.

User Avatar

Many thanks for such a concise and easy to understand tutorial. When will you produce the next lesson in this sequence?

by Paul, 27-Dec-2015

User Avatar

I should get the next tutorial out fairly quickly...perhaps tomorrow!

by Patrick Morrow, 27-Dec-2015

User Avatar

That's awesome...many thanks!

by Paul, 27-Dec-2015

PHP for Beginners

Enrol in the full course here

PHP, MySQL and PDO

Coming soon, a full course on using PHP, MySQL and PDO. Be notified as soon as the course goes live.