WEBVTT 0 00:00.360 --> 00:05.880 All right, in this lecture, I want us to go back to our <input> elements. 1 00:06.090 --> 00:06.780 Remember those 🤔 ? 2 00:07.410 --> 00:09.660 And specifically, I want us to look at a checkbox. 3 00:10.350 --> 00:13.350 In my opinion, the checkbox is a lot easier than the radio... 4 00:13.360 --> 00:19.180 button. Remember the radio button? We had to have the same "name" attributes with each radio button. 5 00:19.650 --> 00:24.270 We even had to wrap it in a <fieldset> element just to make sure that it's all associated with the same... 6 00:24.270 --> 00:24.630 group. 7 00:25.260 --> 00:32.130 The cool thing is ... let me just move this camera 🎥 here ... the cool thing is with checkboxes is that you can select however... 8 00:32.130 --> 00:32.760 many you want. 9 00:33.390 --> 00:33.870 That's right... 10 00:33.870 --> 00:37.820 if there are a whole lot of checkboxes, I might want to select every single one. 11 00:38.490 --> 00:42.660 And because of that, it makes checkboxes a lot more intuitive and easy, in my opinion. 12 00:42.870 --> 00:48.540 In fact, we don't even need the <fieldset> element wrapper, and we also don't even need to have the same name... 13 00:48.540 --> 00:50.700 attributes across every checkbox. 14 00:51.000 --> 00:53.530 So let's start, um, let me me walk back into the room... 15 00:53.760 --> 00:58.440 let's jump into the text editor, and let's start coding some checkboxes. See you now. 16 01:02.260 --> 01:03.560 I just love this stuff. 17 01:03.580 --> 01:08.500 I'm so, so amped. So, let's try and finish off our form because we are almost almost there. 18 01:08.920 --> 01:09.460 Well done 🎉. 19 01:09.490 --> 01:10.720 You've learned an incredible amount. 20 01:10.750 --> 01:14.020 So what I want to do now, we've got our textbox, and as I mentioned outside... 21 01:14.020 --> 01:15.940 I want us to do checkboxes now. 22 01:15.940 --> 01:18.580 And in my opinion, they are easier than radio boxes. 23 01:19.030 --> 01:19.900 But let's start coding... 24 01:21.060 --> 01:23.820 so let's go to our text editor. Let me remove myself. 25 01:24.460 --> 01:24.840 There we go... 26 01:24.900 --> 01:29.940 then you can see better. And let's now go to our HTML, adding a textarea to our form... 27 01:31.870 --> 01:33.190 now I want us to... 28 01:34.920 --> 01:37.320 add a checkbox... 29 01:38.500 --> 01:39.130 to our form. 30 01:40.730 --> 01:41.750 Okay, where do we start? 31 01:41.780 --> 01:47.780 Well, as always, we need to start with a wrapper. We wrap all our widgets in a wrapper, just to make it easier... 32 01:47.780 --> 01:48.350 to style. 33 01:49.420 --> 01:52.920 And we've given all our form widgets, a class of form-row... 34 01:52.960 --> 01:55.020 so why do anything different here? 35 01:55.300 --> 01:59.130 Let's do a DIV, and we can give it a class of... 36 01:59.580 --> 02:00.750 form-row. 37 02:00.760 --> 02:03.640 now what I want to do, is I want to be a bit funky. (music, play that funky music) I want to be a bit daring... 38 02:03.650 --> 02:08.380 I want us to use the label element, but I want to do so in a very unique way. 39 02:09.400 --> 02:09.950 What do I mean? 40 02:09.980 --> 02:10.570 Let me show you. 41 02:10.630 --> 02:14.380 And I'm just doing this so you can see different ways to code. Here is label... 42 02:14.380 --> 02:17.350 I want to give it a class of "checkbox-label"... 43 02:18.820 --> 02:26.710 and its "for" value can be, I don't know, "ishappy" because we are checking whether the user is happy here. And I want to... 44 02:26.860 --> 02:30.820 now insert our widget within the label itself. I know... 45 02:32.290 --> 02:35.310 it sounds strange, but it's going to make it very easy for us to style. 46 02:35.830 --> 02:36.960 I want now an input... 47 02:36.970 --> 02:39.310 and of course, we're dealing with a checkbox input. 48 02:40.290 --> 02:42.460 The name we can give is happy. 49 02:43.050 --> 02:45.900 The ID has to match that "for" value... 50 02:46.100 --> 02:52.380 remember, it's just good practice to always do that. So we can give it a value of "ishappy". 51 02:52.680 --> 02:57.660 Now, when it's checked, it's going to be sent to the server and we need to assign a value to that... 52 02:58.020 --> 02:59.040 to this checkbox. 53 02:59.040 --> 03:06.270 And the value, if it's checked, is going to be "ishappy", or let's just say "happy", because we know... 54 03:06.270 --> 03:08.250 when it's checked, the user is going to be happy 😊. 55 03:09.060 --> 03:14.610 And of course, I just want to ask the user here, "I am generally a happy person". 56 03:15.550 --> 03:16.810 If we save this... 57 03:18.490 --> 03:19.390 go to our browser... 58 03:21.810 --> 03:29.280 we can see there, "I'm generally a happy person". But it looks super ugly 🤢, which is why we need to now spice... 59 03:29.280 --> 03:31.830 this up with a bit of love ❤️ and care. 60 03:32.130 --> 03:34.520 So let's go back to our coding editor... 61 03:34.710 --> 03:40.470 let's go to the styles section. As always, a new heading. We're not doing textarea anymore... 62 03:40.530 --> 03:41.310 we are doing... 63 03:42.460 --> 03:44.440 checkbox styling. 64 03:45.640 --> 03:52.810 Let's scroll down a bit, and I'm going to keep our styling here incredibly simple. All I want to do, is I want... 65 03:52.810 --> 03:56.780 to target our parent class, which has a class of... 66 03:56.780 --> 03:57.020 form-row... 67 03:57.640 --> 04:03.580 and then I want to target that label. And I want to give it some margin to the left. 68 04:05.000 --> 04:09.110 We define a variable above, called --label-width. 69 04:12.260 --> 04:17.920 I also want to give it a width of 'auto'. And if we save this, go the browser... 70 04:18.470 --> 04:21.760 💖 ✔️ 🌟 I mean, come on, you've got to admit - how easy was that? 71 04:22.220 --> 04:25.160 And it's looking pretty amazing. If we click on the label... 72 04:26.700 --> 04:28.710 it automatically gets checked. 73 04:29.010 --> 04:32.850 I don't know about you, but I love this stuff and I think it's really fun. 74 04:33.360 --> 04:34.470 I hope you're learning a ton. 75 04:34.500 --> 04:38.490 Don't worry if you are not fully following everything, we're going to get into a lot more detail in... 76 04:38.490 --> 04:38.860 this course, but... 77 04:39.030 --> 04:42.860 for now, we're just building a simple form. In the next lecture... 78 04:43.230 --> 04:47.280 I think we are ready to actually build our submit button. 79 04:47.610 --> 04:52.860 And then I just want to talk to you a little bit about how it's submitted to a server. Cool, I'm super excited. 80 04:52.860 --> 04:53.670 See you in the next lecture.