Now that we have seen how to add buttons to our web page. In this exercise, we're going to look at forms and how we can add forms to our web page and also style these form elements using the Bootstrap classes. Going back to contactus.html page, scroll down until you see this comment there called "Form goes here". We're going to replace this with the form in this web page. So, let's delete that and then construct the form in that particular location inside the div there. To get started with the form, I'm going to use the form HTML tag and construct the form within this HTML tag. So, within this form tag, let's add in the radius elements of our form. So, inside this form, I'm going to divide this form into several rows there. To divide your form into rows, you can simply use a div with the class="form-group" and then apply the row class to it. So, with this, we are going to add in two form groups here. I'm going to copy this and then paste it down below here. So, you can see that I'm going to add two rows to this form here. So, to add an item into this form, we're going to this div and then I will start out by using a label tag here. And for the label tags, so I will have two rows; one allowing the user to fill in their first name, and the second one for their last name. So, this is where we are going to use that label to specify the class there. Now, In addition, Bootstrap allows us to use the Bootstrap grid to specify how these forms are going to be laid out ad so I will apply the col-md-2. You can see that I have applied the md-2 column classes to this particular item. So, this item in the form will occupy two columns. So, inside this form element, we have divided each row into 12 columns. So, because we have already used the row for the div, so that'll provide us with 12 columns inside the div there. In addition, I have to apply the class col form label to this. So, this is what allows me to specify a label here. So, for this label, I will fill in the label as a first name and then close the label tag. So, this label tag allows me to give a label, which will occupy two left columns in this particular row. On the right side, I'm going to use another div that the class applied as col-md-10. Notice that the earlier label used the col-md-2 there. So, for this div, I'm going to apply the col-md-10 there. And then inside this div, I'm going to apply an input element, which is of the type text. So, if you are familiar with the forms from HTML, you'll see that we are using the form elements from HTML to create that form here so the input box here is of the type text. Now, this is where we are going to apply the Bootstrap classes to this and the corresponding Bootstrap class for this is form control and then I can specify an ID for this as first name. So, notice that this ID matches this label for div. So, first name, and then name as first name and also I will specify a placeholder for this so let me use the next line here, placeholder as, I'm sure from your knowledge of HTML, you understand how this specification is done here. So, with this, we have now created our first form element in our form. Let's take a quick look at the web page. Going to our web page, you can now see how adding in the form elements has created this input textbox and the label on the left side. Now, I'm going to add in another row with the last name. Going back to my contactus.html, let me simply copy this part and then paste it into the second div here, and then go in and edit that. From first name I change that to last name. Make sure that you complete all the edits correctly. Even one missing improper edit, will cause your form not to work correctly so make sure that all the first name things here are replaced by my last name. So, the last name, md-10 text form control. The ID here should be last name and the name also should be last name and the placeholder again the last name so this should add in a second row with the last name. Going to your web page, you can see now the form slowly getting into shape so you have the first name and last name. Now, lets next add in an input elements. We'll see how this works as we add in the code. Moving now to the next part of the exercise, here we will add two more fields into our form here for entering the telephone number and the email ID. Since the basic structure of the code is similar to the first name and the last name that you have already added to the form, so I'm just going to copy the code from the first name and the last name and then paste it in here and then modify the code accordingly. So, I have pasted the code from the first name and the last name here. Let's go ahead and now modify this to turn it into fields that enable the user to enter the telephone number and the email ID. So, for the telephone number, so here we already have the first name and the last name above. So, the third one, I'm going to change this to label for "telnum". So, this is from the telephone number and then the classes, I'm going to apply a col-12 class to this saying that this label will be in its own draw when the form is shown on extra small to small screen sizes. And then, for medium to higher screen size, this would be displayed in two columns of that particular row here so that's the change that we will make there. And then also, the label itself, let me change that to contact telephone number, contact Tel. Now, the telephone number itself, we will let the user enter it as two parts; one, which is the area code and the second one, which would be the actual telephone number. So, I'm going to take this part of the code, which was the input field that we had for the first name and then create another one down below here, which I'm going to use for the telephone number itself. And now we will turn this first one into the field for entering the area code. You could also use it for example, for country code if that's what you wish to put in the form. So, for the area code itself, I'm going to apply for the div, the classes="col-5 col-md-3 here". So, notice that for the medium screen, we have two columns occupied by the label, three columns occupied by the area code itself and the remaining seven columns I will give it to the text field here. So, similarly, for the area code I say col five. So, for extra small to small screens this will occupy five columns and then for the remaining seven columns, we'll let the telephone number feed itself occupied at. So, let me change the next one to col-7 and col-md-7 here. Now, this field I will change this to tel, input type tel for telephone number and the class is form control, the ID is area code and the name is area code and then the placeholder, I will change this to area code. And the next part, we will change this also type tel and ID is telnum, the name is telnum and the placeholder, itself, would be tel number. So, this will form the telephone number field, which will be entered as two parts; the area code and the telephone number. So, we are using, again, the column classes in order to structure how the two parts of the input field are displayed in the form there. Now the last one, of course, this would be for email ID so the label, I turn that into email ID and then the label itself is email and input type is email. Now, we change the type to email, which is allowed in HTML so that later on if we need to do form validation, then we know that this field should contain only an email type of entry there, and the ID, itself, email ID and the name email ID and the placeholder. 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.
