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:
Now that we have a simple page structure we can add the link to the Bootstrap CSS file (Line 5) as follows:
We can now structure a basic form. We will start with the form tags:
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:
We can now add the label for each of the input fields:
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.
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.
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:
