1 00:00:00,089 --> 00:00:04,955 [MUSIC] 2 00:00:04,955 --> 00:00:08,311 Gone are the days when websites were purely used for 3 00:00:08,311 --> 00:00:11,385 delivering information to the users. 4 00:00:11,385 --> 00:00:16,380 These days on most websites, users will be able to interact with the website to 5 00:00:16,380 --> 00:00:21,360 supply information, for example by clicking buttons or by filling in forms 6 00:00:21,360 --> 00:00:26,240 and by typing something into search boxes, and so on. 7 00:00:26,240 --> 00:00:29,940 So how do we support these kinds of interactions with the users? 8 00:00:29,940 --> 00:00:35,900 So that is what we're going to deal with in this particular lecture and 9 00:00:35,900 --> 00:00:38,333 the exercise that follows. 10 00:00:38,333 --> 00:00:43,880 As an example, if you visit the Coursera website, you will see that you have 11 00:00:43,880 --> 00:00:49,091 buttons at the top here that you could click to reach different places. 12 00:00:49,091 --> 00:00:54,954 You could have a search box, into which you can type in information, 13 00:00:54,954 --> 00:01:01,880 to search for, say for example, full stack web development and, so on. 14 00:01:01,880 --> 00:01:08,286 So, what we notice is that user interaction needs to be supported 15 00:01:08,286 --> 00:01:14,808 on websites using many different approaches including buttons, 16 00:01:14,808 --> 00:01:20,054 forms, text boxes, check boxes, and many others. 17 00:01:20,054 --> 00:01:25,710 Early interactions with websites were provided mainly through hyperlinks. 18 00:01:25,710 --> 00:01:29,852 So you could click on a hyperlink and go on to other places and so on, but 19 00:01:29,852 --> 00:01:31,046 this is obviously, 20 00:01:31,046 --> 00:01:35,559 hyperlink is just one of the many methods of interacting with your website. 21 00:01:35,559 --> 00:01:40,335 You could have buttons included on the website which when clicked, 22 00:01:40,335 --> 00:01:44,580 will result in some action being taken on the website. 23 00:01:44,580 --> 00:01:49,900 You could have forms that you fill out to supply information to the website. 24 00:01:49,900 --> 00:01:54,500 So when you look at how you would include such user 25 00:01:54,500 --> 00:01:58,660 Interaction features into your website, you will see that you could use something 26 00:01:58,660 --> 00:02:03,930 like the a tags that are useful for providing hyperlinks, 27 00:02:03,930 --> 00:02:10,100 then you have the button tags that enable you to include buttons in your website. 28 00:02:10,100 --> 00:02:15,060 Now what we're going to look at is how do we format with a tags on 29 00:02:15,060 --> 00:02:19,850 the button tags using bootstrap classes so that you can style them 30 00:02:20,910 --> 00:02:24,775 to fake the general theme of bootstrap. 31 00:02:25,785 --> 00:02:30,075 HTML already includes the form elements and the input elements in there. 32 00:02:30,075 --> 00:02:34,640 Now, we can look at how bootstrap enhances these elements by providing 33 00:02:34,640 --> 00:02:40,310 styling features for forms, and various elements that go into the forms. 34 00:02:40,310 --> 00:02:45,950 Buttons obviously provide a simple way of interacting with your website. 35 00:02:45,950 --> 00:02:49,600 So when you have a button on your website, you might hover on the button, 36 00:02:49,600 --> 00:02:55,100 you might click on the button and expect something to happen in the process. 37 00:02:55,100 --> 00:02:59,830 The button behavior depends upon where it is positioned in bootstrap. 38 00:02:59,830 --> 00:03:03,060 If the button is inside a form, for example, 39 00:03:03,060 --> 00:03:08,280 typically the button clicking will result in the form being submitted to a server, 40 00:03:08,280 --> 00:03:13,270 or the form information being canceled. 41 00:03:13,270 --> 00:03:19,200 A button outside a form could have other ways of providing interaction. 42 00:03:19,200 --> 00:03:24,589 Similarly, the < a > tag that we have traditionally associated with 43 00:03:25,690 --> 00:03:31,550 hyperlinks could also be hijacked to be styled and 44 00:03:31,550 --> 00:03:34,170 presented in the form of a button. 45 00:03:34,170 --> 00:03:39,356 So here we will see how bootstrap provides classes that can be 46 00:03:39,356 --> 00:03:46,580 used to format the tag into a button to be presented on your website. 47 00:03:46,580 --> 00:03:51,600 We'll also look at various form elements, like the input elements, 48 00:03:51,600 --> 00:03:56,390 select, the button and also the text AD elements, and 49 00:03:56,390 --> 00:04:03,320 how we make use of them within our forms to design and 50 00:04:03,320 --> 00:04:09,660 construct a form that can be included in our website. 51 00:04:09,660 --> 00:04:13,640 So the exercise that follows this particular lecture will introduce you to 52 00:04:13,640 --> 00:04:17,440 bootstrap support for styling buttons, and 53 00:04:17,440 --> 00:04:22,670 also look at how various form elements can be enhanced using 54 00:04:22,670 --> 00:04:27,730 bootstrap classes to present classic Bootstrap forms.