Email. That's it.
Let's save the changes and go and take a look at the updated form.
Going to the form in the browser,
you now see two additional rows added into our form.
The first name and the last name be added in the previous part of the exercise.
So, here, we have the contact telephone number,
which is divided into the area code and telephone number.
Note how we have used the column classes to position these two in
the form itself and then the email field here.
Let's take a look at the same thing on an extra small screen size.
So, when you go to an extra small screen size,
you'll notice how the form itself is laid out.
You'll see that the label is on the top and then the field itself at the bottom.
So first name, last name.
Note how the contact telephone number
entry fields are positioned using the column classes,
so the area code here,
and the telephone number,
and then the email ID here.
Now, we'll continue with the exercise.
Continuing in the next step,
we will add in a checkbox and then thereafter we will add in a select two or four.
To add a checkbox,
let's just copy this form group here so that we will add it as another row here,
and then add in the form group div here,
and then close off the div here.
And then inside this form group row,
so this gives us one more row in the form.
So inside this form group row,
let me add in first the checkbox.
So, to do that, we'll add in a div with the class="col-md-6"
so you'll see that this is going to occupy
six columns in the medium to extra large screen size,
and then offset-md-2, so this will offset it to
the right by two columns and then display the checkbox in there.
Now, inside here, to add a checkbox,
we'll say div with the class="form-check" and
inside this form-check class we'll add in an input type="checkbox"
and the class="form-check-input" and then let me go to the next line and then
say name="approve" and the
id="approve" and the value is an empty string there.
And to this checkbox,
let's add a label.
So, to add a label,
we'll go and add in label
class="form-check-label" and then this label
is for this checkbox that we just added.
So, that's why we'll say for="approve" so notice that for the checkbox,
we had given the name and the ID as approve so that's why here,
we'll be save for the label for approve.
And then inside this label,
we'll specify the content as 'May we contact you?'
And then save the changes and let's go and take a look at our form.
Going to the web page,
you can now see that we have added in a checkbox along with a label here and notice
that this label is in bold because of the use of the "strong" tag there,
and we did offset-md-2.
So that's why we push this checkbox all the way here.
This doesn't have a label here but instead this is pushed right here,
so that's the reason for using offset-md-2 here,
and this one occupies md-6 so six columns here.
We are not done with that yet.
I'm going to add in the next part here,
which is a select box there.
So I will apply one more div here with
the class="col-md-3 offset-md-1" here.
And inside this div,
I'm going to define a select.
So, again, from your knowledge of HTML,
you know what a select does for you.
Now, the select will apply
the classes form control so this is Bootstrap class that I'm applying to the select here,
and close off the select.
And inside here, I need to give the options for the select.
So, I'm using a simple select here,
and so the first one is an option
for telephone or email and close off the option.
So, this creates a select element in my form,
which has two options;
telephone and email, so,
let's save the changes.
Taking a look at our web page,
you can now see how the telephone and email select box is now created here so this
allows me to select which one to do and then you can also check the checkbox like this.
So, this finishes the next row.
Let's add in one more row,
which will allow the user to actually type in their feedback.
So, I will use a text area for formatting that.
For the next one, I'm going to use a text area.
So, what I'm going to do is I'm just going to go up and copy this email part of it.
I'm too lazy to keep typing in everything all the time.
So, I tend to do cut and paste wherever feasible, but for this one,
the label should be feedback and the column form label,
and then the actual text is, "Your feedback here."
So that is the label.
And then, in here, the second one,
I'm going to format this one.
Instead of input type,
I'm going to change that to a text area,
and then I don't need the type there.
Text area, the class is still form control and the ID is feedback.
Name is feedback and the placeholder is not needed
here and instead change it to how many of rows I
want to give from the feedback for the text area?
So I'll say 12 rows and then close off text.
So notice how I have included the textarea in my form.
Save the changes.
Take a look. Going to my web page,
now you see my form taking its complete shape here.
You have the first name, last name,
telephone, email there, and then the feedback.
The text area of 12 rows.
Now, you will need a button which the user should click to submit their feedback.
So, lets add in a submit button to this form.
Going back to the form again,
create one more row here by using
the div here with the form group row here,
and inside here I'm going to add in a button here.
So, I would say, div
class="offset-md-2" because I want my button to be
positioned right below all those fields that I
have here so the left two columns are being used for the label.
So the submit button doesn't need a label so I'm just going to push
it to the right here and then I would
say "col-md-10" so this would occupy the remaining 10 columns there.
And then inside those div,
I'm going to add in a button there.
So, when you add in a button to your form,
use the button tag here with a type submit.
So, this is the submit button for your form there and class.
Remember button classes, button primary,
so this would create a dark blue button in your form and
then close off the button there,
and then I'm going to simply go in and inside the button,
I'll give the name as "Send Feedback" and then save the changes.
Now, our form is complete.
So, let's take a look at the final version of our form.
Going to our web page,
you can now see the form completed.
All these fields we have seen already,
the button at the bottom with the wording "Send
Feedback" and the dark blue-colored button because of the use of button "primary".
So, this completes the form that we wanted to create in our web page.
With this, we complete this exercise,
where we have seen how we can construct a form and include it into our web page.
You'll be working with forms in some of
the later exercises including your second assignment.
This is a good time for you to do a good comment with the message forms.
