WEBVTT 0 00:00.230 --> 00:04.010 This is just something I coded up that I think is pretty cool. 1 00:04.010 --> 00:05.990 It just drives the point home. 2 00:05.990 --> 00:08.420 It's like hitting the nail on the coffin. 3 00:08.570 --> 00:11.960 And it would be really cool if you tried to do this yourself. 4 00:11.960 --> 00:13.760 But let me explain what I did first. 5 00:13.760 --> 00:14.570 I've got a heading: 6 00:14.600 --> 00:17.360 "Defining the type in buttons is important". 7 00:17.360 --> 00:19.250 That's the heading at the top. 8 00:19.490 --> 00:22.640 Then I've got kind-of two sections, two main sections. 9 00:22.670 --> 00:29.540 The one is a form and can you see I've used the fieldset element to create that cool dotted pink border. 10 00:30.020 --> 00:32.810 And yes, I use the legend to give it a heading: 11 00:32.810 --> 00:34.370 "This is a cool form". 12 00:34.520 --> 00:35.870 So I've used fieldset. 13 00:35.870 --> 00:36.650 I've used legend. 14 00:36.650 --> 00:38.300 You've seen these all before. 15 00:38.300 --> 00:43.160 And I wrapped this entire block within a form. And you can see I've got an input there. 16 00:43.160 --> 00:48.620 It's actually just of type text, and then I've included different buttons at the bottom just with different 17 00:48.620 --> 00:52.580 stylings and more importantly, different types. 18 00:52.580 --> 00:57.560 I've got submit, I've got button, I've got reset, and then I just didn't define a type. 19 00:58.040 --> 00:59.280 I just left it blank. 20 00:59.300 --> 01:01.500 In other words, it's got no type. 21 01:01.500 --> 01:03.120 So that's the one block. 22 01:03.150 --> 01:09.120 Then I did the same buttons, but I did it outside of a form. 23 01:10.040 --> 01:14.570 I just wanted to prove to you that when it's outside of form, the types do nothing. 24 01:14.570 --> 01:15.670 They only work, 25 01:15.680 --> 01:19.040 they are only relevant when it comes to forms. 26 01:19.070 --> 01:20.830 And what do I want to show you here? 27 01:20.840 --> 01:27.080 Well, every time a submit event is fired on the form, I want to change the background color, 28 01:27.260 --> 01:27.770 okay. 29 01:27.770 --> 01:30.860 For all other purposes, I want nothing else to happen. 30 01:31.220 --> 01:32.690 So let's see this in action. 31 01:32.690 --> 01:38.240 If a user clicks a button with type submit in a form, what's going to happen? 32 01:39.420 --> 01:40.880 100 percent correct. 33 01:41.210 --> 01:46.880 A submit event is going to get fired, and every time the user clicks this button, the background color 34 01:46.880 --> 01:48.980 is going to change. 35 01:49.310 --> 01:50.750 How awesome. 36 01:51.590 --> 01:56.990 The next type is type "button", and remember what this does? 37 01:58.140 --> 02:02.210 It's kind of silly in one way, because it does nothing, right? 38 02:02.220 --> 02:04.200 If the user clicks it, it does nothing. 39 02:04.200 --> 02:08.480 And this means the background color won't change because no submit event has been fired. 40 02:08.490 --> 02:11.010 But just because it does nothing doesn't mean it's useless. 41 02:11.040 --> 02:17.190 As I mentioned, we often use JavaScript to customize what action we want to take place, so it does 42 02:17.190 --> 02:18.150 have its place. 43 02:18.330 --> 02:24.720 Next, we've got type "reset". And if we just click type reset now, we know the submit event doesn't get 44 02:24.720 --> 02:25.250 fired. 45 02:25.260 --> 02:30.180 But that's why I wanted this input here, because I wanted to show you if the user types in their name, 46 02:30.180 --> 02:37.350 Wally, for example, hits type reset all form widgets will get reset to their default values. 47 02:37.350 --> 02:39.530 So that's all the type of reset does. 48 02:39.540 --> 02:42.000 It doesn't submit the form. 49 02:42.300 --> 02:45.000 And then finally, we've got nothing. 50 02:45.000 --> 02:47.910 If we don't specify any type, what happens? 51 02:48.450 --> 02:52.860 Well, if you've been paying attention, you'll remember that the default type is submit. 52 02:52.860 --> 02:59.410 So if we specify nothing, we would expect a submit event to still be fired because it's the same as 53 02:59.410 --> 03:04.750 type being set to submit. The user clicks that there we go. 54 03:04.990 --> 03:06.610 We get different background colors. 55 03:06.610 --> 03:07.600 How cool. 56 03:08.320 --> 03:10.690 Okay, so that's the first thing I wanted to show you. 57 03:11.020 --> 03:18.280 Now, if we have the exact same buttons, but outside of a form, nothing happens. 58 03:18.280 --> 03:20.170 These buttons are useless. 59 03:20.170 --> 03:23.740 They only work inside of a form. 60 03:23.740 --> 03:30.280 In fact, if we type Wally here and click on type reset out the form, nothing happens. 61 03:30.280 --> 03:31.540 It doesn't reset. 62 03:58.750 --> 04:03.690 So all these attributes only work inside of forms. 63 04:03.700 --> 04:05.510 That's an important point. 64 04:05.530 --> 04:10.990 But anyway, this was kind of a cool little example that I loved coding up. 65 04:11.020 --> 04:17.110 I'll provide the code for you that you can download and go through it, but try and do it yourself. 66 04:17.140 --> 04:19.090 You know, it's a lot of fun doing these things. 67 04:19.090 --> 04:25.080 You can see how much power you have just with plain CSS, HTML and a bit of JavaScript. 68 04:25.090 --> 04:27.100 That really, really is cool. 69 04:27.100 --> 04:33.270 And you know, just in case you're wondering how I set it up, I'll just briefly go over it in like 30s. 70 04:33.280 --> 04:34.000 So here we go. 71 04:34.000 --> 04:34.900 Here's my file. 72 04:34.900 --> 04:38.470 We've got an HTML file, right? 73 04:38.500 --> 04:39.180 No dir. 74 04:39.190 --> 04:44.350 And then I just reference this buttons.css file, and that just contains all my CSS so I won't get 75 04:44.350 --> 04:46.930 into that, but it's pretty straightforward stuff. 76 04:47.050 --> 04:50.980 Then I've got our heading in its own div wrapper. 77 04:51.160 --> 04:51.510 Okay. 78 04:51.520 --> 04:52.960 That's that top heading. 79 04:52.960 --> 04:55.180 Defining the type in buttons is important. 80 04:55.180 --> 04:56.230 Let's just refresh this. 81 04:56.230 --> 05:02.390 There's our default styling. So that first section is in a wrapper, and so are the bottom three sections. 82 05:02.390 --> 05:06.980 If we go to our code, we've got another div of class wrapper ... another div class of wrapper ... 83 05:06.980 --> 05:10.820 and yes, the final section is in its own div class of wrapper. 84 05:10.820 --> 05:17.360 And the reason I did that was we putting this cool little funky border with some box shadows there in 85 05:17.360 --> 05:18.230 each section. 86 05:18.230 --> 05:20.210 So it just makes it easy to style. 87 05:20.210 --> 05:21.290 So that's what I did. 88 05:21.320 --> 05:27.350 Of course, the first wrapper we put within this form element, right, with all those buttons. 89 05:28.130 --> 05:31.010 In a form element. 90 05:31.220 --> 05:34.840 The next set of buttons are not in the form element. 91 05:34.850 --> 05:39.380 We've got a fieldset, we've got a legend, but it's not wrapped within a form. 92 05:40.140 --> 05:43.410 And then finally, we've got this paragraph at the bottom. 93 05:43.800 --> 05:47.970 But more importantly, we've got this JavaScript and it's a very, very simple script. 94 05:47.970 --> 05:51.420 All we do is we grab our forms and it's very easy to grab our form. 95 05:51.420 --> 05:55.290 We've only got one form on the page, so all we need to do is look at our DOM. 96 05:55.860 --> 06:01.980 In other words, we grab the document. On there, we can look for a property called "forms" which returns 97 06:01.980 --> 06:02.820 a collection to us. 98 06:02.820 --> 06:04.290 And we just want the first form 99 06:04.290 --> 06:07.650 there is, in fact the only form there is, which is why we have zero. 100 06:07.830 --> 06:11.880 Okay, then we want to add an event listener called submit. 101 06:12.240 --> 06:18.330 And the first thing we want to do is we want to use the JavaScript's preventDefault() method because 102 06:18.450 --> 06:21.840 the default is for the browser to refresh the page. 103 06:21.840 --> 06:23.490 We don't want that to happen. 104 06:23.490 --> 06:29.100 Okay, so the first thing is we prevent the default and then we execute a function called change background, 105 06:29.100 --> 06:29.760 or 106 06:29.790 --> 06:32.130 changeBg(), and that's very, very simple. 107 06:32.130 --> 06:39.540 All we do is we execute a function where we're using Math.random numbers to generate a hexadecimal 108 06:39.540 --> 06:43.060 value, which HTML uses to determine a color. 109 06:43.090 --> 06:43.840 Very, very simple. 110 06:43.840 --> 06:51.910 In fact, I can even console this, let's just console log this random hex value out, and you can see it. 111 06:51.940 --> 06:53.140 Let's go to our browser, 112 06:54.900 --> 07:00.300 inspect the page, go to the console, click on submit, and there is the hex value. 113 07:00.420 --> 07:03.630 And each hex value is corresponding to an HTML color. 114 07:03.630 --> 07:04.680 So that's all we're doing there. 115 07:04.710 --> 07:05.970 Very, very simple. 116 07:06.240 --> 07:07.980 And that's, that's about it 117 07:07.980 --> 07:10.050 my dear students, very high level. 118 07:10.050 --> 07:12.180 I will provide this code for you, play around with it. 119 07:12.180 --> 07:16.800 But before you do, try and recreate it, you really will learn the most that way. 120 07:16.850 --> 07:18.900 Hope you're having fun and I'll see you shortly.