[MUSIC] In this exercise, we're going to look at Bootstrap's support for buttons and forms. So we're going to include a few buttons and button group in our webpage. And we also look at designing forms and styling the forms using Bootstrap classes. To get you started, go to the instructions page and download the contactus.html.zip file that we have provided there. So right click on that, and then save this link into your conFusion folder. As, contactus.html.zip file. And then once the zip file is downloaded, unzip the file to get contactus.html page. Then you can delete the zip file. Once you've unzipped the file and get contactus.html page, you would notice that when you load this page in your browser using localhost:3000/ contactus.html, then you would see that this page is already pre-formated with some content. So you can notice that you already have the navigation bar there. We have the jumbotron already formatted for us. And you would notice that I have the breadcrumbs and the contact us heading here formatted. Then you will see some additional information, the address here. And also, you will notice that the footer is already formated. But you will notice two things here, you'll notice that there is a line here that says button groups go here and then one more line here that says form goes here. So we're going to replace these two with a button group and a form. And along the way, learn Bootstrap's support for buttons and forms. Before we proceed forward, now that we have three pages in our website, it is a good idea for us to link them up together, both in the navigation bar and in the links in the footer. Let's modify those two so that we can navigate between these three pages easily. So going to the contactus.html page, you will notice that in the navigation bar, I already have the links to index.html set up correctly. And you would notice that at the bottom here you have the contact link here. But the link corresponding to the about has not been configured properly. So go to this link here and then update that to aboutus.html. The contact us link can be left alone as such. And then save the changes. Now similarly, go to the footer of this page. And you will notice that in the footer we have these three links here. And this may be a good point to replace the links with the links to the corresponding pages. So I'll say, index.html, aboutus.html, and, contactus.html. And save the changes. Similarly, go to index.html, and then in index.html also, the contact us link has not been set up. So let's update that to contactus.html. And then similarly, update the links in the footer. Also go to aboutus.html and then fix up the links even there. So in the aboutus.html also, in the header I'm going to fix up the link. And also in the footer of aboutus.html. So now when you go to your website, you'll be able to navigate back to your home page, to your about page. And from the about page, you can even go back to the contacts page. So all the links between the three pages in the corresponding headers, and also the footers, here should be setup. So that if you click on any one of these will take you to the appropriate page. Now is the time to start working on the buttons that we're going to include in our contactus.html page. So what I will do is I will replace this line with the code for the button and the button group and then after that, we'll come back to explain how this whole thing works. Opening contactus.html in our editor, we'll locate the place where this statement, button group goes here, exists. And then I'm going to replace that with the code corresponding to that button group first. And then I'll come back to explain how this code works. So let's save the changes, and then take a look at what this button group looks like in our browser. Going to your browser, you can now see that in our webpage the button group has been created. So you can see that there are three buttons here, Call, Skype and Email buttons. Now, all these three are joined together into one single bar or button bar or what is in Bootstrap terms called a button group. So let's look at how we go about constructing something like this in Bootstrap code. So here I have both the browser window and my code open side by side. So let's have a look at how we create this button code. Taking a look at the code, you notice that the buttons are included inside a div here. To the div, we apply the class, btn-group. So, if you have a group of buttons that you want to join together and present as a group of buttons, as a bar of buttons, then you would use a div with the button group class and the role as group here to that div. Now inside that, you will notice that I am using the ,a, tag to define the three buttons. So let's look at how we define the three button. Let's look at how we define the Call button. So this particular line defines the Call button. So I say ,a, role is equal to button. So this ,a, tag here, I am using it as a button here. So that's why I specify the role as a button. So this is important. And then look at the classes that I am applying to this. So the first one is btn class. The btn class is the Bootstrap's button class. So it will display that as a classic Bootstrap button. The second part say is btn-primary. So, this is what defines the color of the button here. So, in this case this button color is blue. And so, this is the primary color in Bootstrap. So btn-primary. And then after that, look at the use of the href here. So, since this is an A tag, I can use an href attribute in that A tag. So, the href attribute points to the telephone number. And then following that you notice that I am using a font icon here for the phone. That's why I have i class fa fa-phone and then after the word call. So, this is what enables to construct this blue button, that is included in this button bar here. Similarly, the next one, you notice that this also says role button. And then as you go through, you see that btn-info. Btn-info gives it a color of a light blue in color. So, by default btn-info refers to a light-blue colored button here. And then, you can see that I have the Skype defined here. And then the third one which, is a green button there with email. Notice that I specify letters a role = button class = btn btn-success. So, when you say btn-success, that will be a green button here. So, you have some colors that are already defined in Bootstrap. Primary refers to blue in for the first, light blue success refers to the green color, then you have warning which would be a pale yellow color, and then danger, which is a red color. So, these are default colors that were set up in Bootstrap. And then the href setup, with the mailto here, and then following that, you have the. Font as icon here and then the email there. So this three e tags, which are currently acting as buttons, are enclosed in side those div, which acts as the btn-group. So, that's how we display a group of buttons in Bootstrap. If you just want single button, all that you need to do is include only one of these lines there. So, you could also use the button tag. If you use the button tag, then you don't need to specify the role, instead you just say type button. Because a button could also act as a submit button there. So later on, in forms we will look at the use of the button tag, to create a button to be included in our form. Continuing with the exercise, our next step would be to start, developing the form that we're going to include in the contactus.html page. We'll do it step by step, so that in each step we learn a little bit of how you include some elements into their form. So, as a beginning, when you go to the contactus.html page, right there, you'll see this statement called, form goes here. Now, what I'm going to do is to change this from col-sm to col-md, so that for extra small to small screen sizes, my form will be laid out occupying the entire breadth of the screen, because it uses col-xs-12. But from medium size screen on wards, it'll occupy only 9 out the 12 columns. So, let's start constructing the form. So, what I'm going to do is, I'm going to replace this, with my first chunk of code. We're going to include two fields into our form, for the first name and last name of the user. Let me add in the code, then we'll look at the result. And then, we'll come back and examine the code. So, adding in the code at that point, as always this code snippets is in the instructions. So, let me save the changes. And then we'll go back and look at what this form looks like in the browser. Taking a look at the form, you'll see that they have now two themes in the form here. The first one, has a label on the left side saying First Name and the then you have the input box here. And then the Last Name, and then an input box here. Now you notice also that this form is laid out, so that this part occupies the semi part of the screen, and the remaining part being occupied by the remaining part of the screen. You're beginning to wonder, how do we go about doing this? Does Bootstrap grid help us to decide on these sizes. That would be a very good question for you to ask yourself. Let's see the code and understand how it looks like. Before we do that, let's take a look at the same forms layout, in the extra small screen size. So, switching to the extra small screen size. So we'll go to Galaxy S5. You notice, how the form is laid out in the extra small screen size. So, you'll see that the label is on top, and then the box itself, input box itself is the bottom, similarly for the last name. So, you notice that Bootstrap. By the way, it provides those form classes. Automatically, makes your form responsive, so that when it is laid out on different screen sizes, the form will be appropriately laid out, so that it won't get all squashed up on small screen sizes. But for larger screen sizes, because you have larger real estate, you are able to stretch the form, to make use of the extra space that you have. Taking a look at that source code, and the form side by side, obviously the first thing that you notice, is that your form begins with the form tag here. So, form and then the closing form, tag here. So, inside there, you are describing the various parts of your form. So, let's take a look at how the first name is constructed, the last name obviously as it looks like should be using a similar approach. So, in default, what you notice is that, there is a div here. Div element here, with the closing div here. So this div element has a class called form-group. And then followed by a row class. So the form-group class essentially, says whatever is inside this div will be treated as a group of elements. And then they will be laid out accordingly. And the second part, you see the use of row here. So, you'd see that the Bootstrap group's row comes into play here. And so this particular form group, can be laid out using the row and the column classes that you have from the Bootstrap grid. So now, if you apply the row to this div, whatever is inside there, you can use the column classes, to exactly decide how much of space each of them is going to occupy on the screen. Now, so that makes it more clearer to, so those form group encloses. This unit. We're going to see this repeat over and over again when we are designing the various elements of the form. Then, below that, you see this label tag here. For the label tag, there are certain attributes that have been assigned to it. So you see that the label tag uses a for firstname. So this label is for something with the id firstname. So which is the input box that follows right below that. We're going to look at that in a short while. And then look at the classes that are applied to the label class, col-md-2. So meaning that for medium to extra large screens, this particular element is going to occupy 2 columns of the space. And then note the other one. It says, col-form-label. So the col-form-label essentially specifies that this label should be positioned to be aligned with the other element that forms part of this form group. So, in this case, the input box. And so this also means that the label be lined up in the middle, horizontally with the input box. So that is the reason why we use the col-form-label class. If you don't apply this, then your label will be aligned to the top of your input box. Which your form will not look that great on medium to extra large screen sizes. Now, on the left side, of course, because this browser window is squashed, so it is showing the view in a small or extra small screen size here. So that's why you see the label stacking up on top of the input box here. So this is the label that specify. So if you have a label that you want to assign to an element, so that is how you're going to assign the label. Down below here, you see a div class col-md-10. So this occupies the remaining 10 of the 12 columns. So two columns that are occupied by the label. And the remaining ten columns occupied by this, but is enclosed inside the div. And inside this div, you see that there is an input tag element there with the type text. So which means that this input box accepts text input. And the class, look at the class here. It says form-control. This is important to apply to the input box here. So form-control, and id firstname. And the name which is firstname. Then placeholder First Name. So the placeholder is what appears inside the box as a placeholder for the input box. So all these attributes are assigned. So more importantly, note the use of the form-control class being applied to input type. So this is how you structure these two elements in your form. For small screen sizes and below, it stacks the two things. But for medium to extra large, you saw that it is positioning them horizontally side by side. The same thing applies to the lastname code also. It'll be very similar to how the firstname is structured. So I would like you to spend a little bit of time taking a look at this code also. So that you see, based upon your understanding of this, how this is also formatted. The next kind of formal event that we will add in is an input group element. Let me add in the code. We'll look at what the form turns out to be. And then we'll go back and examine the code. So right here, after the second div, after the lastname field, I'm going to include the code for the next element here. And then let's save the changes. And then, immediately, you would see a couple of more things added into your form. You see a telephone number field added here. This, from the look of it, you see that this is very similar to that. So I'm not going to explain the code for this. This should be very straightforward for you to understand. And then this email field also should be very straightforward for you to understand. Because this looks very similar to the lastname. Except that for this, the input field, the type will be set to email. So that the built in form checking capabilities of your browser automatically kicks in. So that when you type in something that doesn't look like an email, then it'll complain appropriately. So let's examine this particular part of the form here. Note that in this case, we are adding in left parenthesis and the right parenthesis to this particular input box. So how do you add in things into your box like this? Taking a look at the code here in your editor, you see that you still have the form-group row which you already understand. And down below here, you have input type form element id telnum, and so on, which also should be very clear to you. So I don't think I need to explain that part to you. Notice how I am using the Bootstrap's grid column classes to each of these. So the label is given col-md-2. And then the telephone number one is given col-xs-7 col-sm-6 and col-md-7 here. So that way, the telephone number, this element is properly positioned. But, in particular, let's pay attention to this part. So this one here is inside of this div. So inside this div, notice the class given to it. The class says input-group. So essentially meaning that whatever is inside this div will be treated as a group of elements here. So that's why the class given is input-group. Now, for adding in something like this, you will use a class called as input-group-addon. And then notice that I am using a div to hold that item. I can use anything here, but a div comes in handy here. So I say div class input-group-addon. And then the closing div type inside, where, notice that I have the left parenthesis. So this is what allows you to add in some extra appendage to your input box here. Similarly, the one below here is also an input-group-addon right parenthesis. So that is what adds the other right parenthesis here. Now, between these two, of course, you have the input type. The input with the type tel and class form-control, id, name, placeholder, everything in place here. So this is nothing but the area code part. So if you use this input-group together with input-group-addons like this on either side. Those things will be added in to your input element like this. That provides you with a nice way of designing Your form with some added in. So for example, if you have a field that is accepting money as the input, you could simply add a dollar sign to the left hand side to indicate to the user that that is a field that takes currency value at the moment. Right now in this case, this field takes in an area code. And if you see how the area codes are written in the United States and Canada, you know that they are enclosed inside left and right parenthesis. So, that's what allows me to specify something like that in my form there. My next set of elements that I'm going to add to my form are a checkbox and a select. So, how do we add that? So, if you are familiar with HTML forms, you understand how select works and you understand how checkboxes work in HTML forms. Now, Bootstrap gives you some additional classes that enable you to format these elements appropriately. So, let me add in the quote. Let's save the changes. Take a look at what this results in the form here. And then have a look at the code. So here, you see that I have a checkbox and some message here. And then this is a selector which allows me to select among a set of choices here. Now the form as it exists here is what you will see in small and extra small screen sizes. Let's take a look at it on a larger screen size. The same form when laid out on medium to extra large screen sizes will look like this. So you can see how the contact telephone number is positioned here, and email is positioned here. So notice that these labels are lined up to a line in the middle with the boxes here. That is what the col form label class achieves first. Now, let's concentrate on this that we just added in. Here, we see that we have a checkbox added in. And then, a text field here. So may we contact you? So, for example, you would expect the user to either check it on and off. So what is the reason for a checkbox? Similarly, you could have radio buttons. Bootstrap supports radio buttons that are available in HTML forms. And provide some classes for styling them properly. And then this is of course the selector which allows you to select among choices. So going back and looking at the code. Let's see how this are implemented. Coming back to take a look at the code, you see that this one is again a form group row div here which encloses two things here. One is a form-check col-md-6 offset-md-2. So this is what encloses a checkbox inside this div element. And then down below here I have a div class, Col-md-3 offset-md-1. So notice that here, this says form-check col-md-6 offset-md-2. The reason why I'm doing an offset-md-2 is I don't have a label. So I was typically using two columns for the labels. So since this checkbox should align itself to the right side in the form. So that's why I used offset-md-2 here. And then inside here it says label class="form-check-label". And then it provides input tag here with type checkbox. So that's how you create a checkbox. And then the class, the Bootstrap class that you're going to apply to your checkbox is form-check-input. And then the name and the initial value is empty. And then, this one is the actual label that you see being applied to that particular checkbox there. So notice how these two are enclosed inside a label tag here. So this is how you create a checkbox together with its label and then position that in your form here. So this here uses form-check-label. And then in here, you have to have a checkbox, input type="checkbox", and then label itself. So here you see strong, May we contact you? So that's why it is displayed in bold letters right next to the checkbox here. Now below in the code, you have a div class col-md-3 offset-md-1. So this occupies three columns within one column offset. So the total of four columns here. So this one is col-md-6 plus 2, so that is eight columns. So 8 plus 4, 12. So that takes care of your 12 columns for your grid there. Now inside this, you see a select applied here. Now this is the select option that HTML file forms support. And look at the class applied to this. It says class="form-control" to the select. And then you give the options in the select here. So <option>Tel., Email and so on. So this is how you specify the options for your select field in your form here. So this is the use of select and checkboxes in your form. Similarly, if you check Bootstrap's documentation you will see the use of radio buttons and other form elements. Taking a look at our form, we now see that we have many of the things that we need in our form already. You have a first name and last name. So this form is something that we construct to enable users to submit feedback to the restaurant. So here we have first name, last name and contact telephone number and then an email. And then of course, an option to allow the user to see whether they can be contacted or not. So that is implemented using a checkbox and a selector here. Now, the only thing left over is a submit button for us. So we will add in a submit button to this form and then take a final look at the form. Before we add a submit button, maybe we want to provide a box for the users to type in their feedback. So in this case, I'm going to make use of a text area for providing that. So let me paste in the code. And then we'll review the code here. So this code, as you see says, div class="form-group row" which you already know what it means. And then this is label which you already know how it is constructed. And down below it, you see a textarea tag being used for the form. So it says, textarea class, with class="form-control", which you have already seen before. And then id, name and then the number of rows for the text area being specified here. So, let's save the changes and take a look at the form. So taking a look at the form, you see that along with this, right below here, you have a big text box into which feedback comments can be typed by the user. So your form has first name, last name, telephone number, email, and an approval for contacting the user, then a feedback box. The last thing would be the Submit button. Finally, let's add in a Submit button to the form. So after a div, on the text area, I'm going to paste in the code for the Submit button here. So pasting in the code for the Submit button again, looking at the code, you see that this is a div class ="form-group row">, which you already know from before. And then this says, div class="offset-md-2 col-md-10">. You understand what that is and then, inside this div, you see a button being enclosed here. Now since we have seen the construction of a button using the a tag, let's pay attention to how you construct a button using the button HTML tag. So if you are using the button HTML tag, then you say button and then the type is submit. This is going to act as a Submit button for my form, so that's why I said the type is submit. You set the type to button, it will act as a normal button here. And then to this I say, class button, button primary. So this is a blue colored button and then the button contains this text inside the button to send the feedback text inside the button. So let's save the changes. So this is would be the last modification to my form here. So let's save the changes and then go and have a look at the button. Returning to the browser, you now see that in your form right below, you have the Send Feedback button. So when the user fills in the form, they'll click on the Send Feedback button to submit the feedback to the company. So this completes the design of a form. So this is one such form that you can include. There are many more classes that are available in Bootstrap for supporting forms. I would strongly urge you to consult the form documentation to see the other kinds of classes that are available for constructing default. So if you have conceptually in your mind a form that you want to construct, then you just look up all the different possible elements that you want to include in the form, and then design the form accordingly. More important thing that you've noticed in constructing the form using Bootstrap, is all the Bootstrap classes that are available. The form control, the form group, how you use the row and column classes. And all these different classes that are supported in Bootstrap to design forms, the Bootstrap movie. Last set, do the git commit, so, we will bring up the git page. I'm going to comment the changes that I have done to the about, contactus and index. And then say Bootstrap buttons and forms, and then that would have committed to my git repository. With this, we complete this exercise. Here we have learned how we include buttons and form elements into our Bootstrap design pitch. [MUSIC]
