WEBVTT 0 00:00.570 --> 00:06.780 Yes! We've made it 💪. We've pretty much made it to the end. What I want to do now, is I want to add a.. 1 00:06.780 --> 00:09.630 submit button, and then I want to talk to you a bit about how that works. 2 00:09.900 --> 00:11.100 So, how do we do that? 3 00:11.140 --> 00:13.250 Well, it's as easy as adding a button. 4 00:13.290 --> 00:14.310 It really, really is. 5 00:14.850 --> 00:15.330 So let's go... 6 00:15.360 --> 00:16.050 to our text editor. 7 00:16.380 --> 00:20.220 And as always, we have to write our button in HTML, before we can style it. 8 00:20.790 --> 00:22.260 And let's copy our heading here... 9 00:23.640 --> 00:28.770 as I keep saying, it's always good to label your code, otherwise you're going to come back to it in 5... 10 00:28.770 --> 00:31.170 months time, and you're not going to know what you were doing. 11 00:31.740 --> 00:35.850 So here we go, adding a submit button to our form. 12 00:37.070 --> 00:43.640 Starting point, as always, I'm like a broken record, broken record, broken record, but I keep saying... 13 00:43.640 --> 00:49.580 this we need to wrap all our form widgets in a wrapper, so let's do it in a DIV, and let's give it a... 14 00:49.610 --> 00:52.100 form-row class. Within here... 15 00:52.100 --> 00:59.450 all we need is a button, and that we can have as, I don't know, "Update" or "Submit" or "Login" or whatever the form is you're creating. 16 00:59.630 --> 01:00.580 That's what we can call it. 17 01:00.830 --> 01:05.300 And of course, if we got our browser, we've added this very cool button. 18 01:06.090 --> 01:11.690 But as Gerald 🦒 pointed out earlier, in many things I've done, that just looks hideous 🤢. 19 01:11.690 --> 01:14.310 It looks horrible! Which is why we should quickly style it. 20 01:14.600 --> 01:15.840 Let's go back to text editor... 21 01:15.840 --> 01:18.710 here, let's go to the styles. Checkbox styling. 22 01:20.170 --> 01:20.910 Let's go here... 23 01:21.740 --> 01:22.700 Button styling. 24 01:23.960 --> 01:29.480 And the starting point is, of course, let's actually float this to the left and to the right, so you can... 25 01:29.480 --> 01:30.170 see what we're doing... 26 01:30.890 --> 01:32.750 the starting point is we have to grab the button. 27 01:32.900 --> 01:36.680 So we start with the parent class, which is that... 28 01:36.680 --> 01:36.910 form-row. 29 01:37.430 --> 01:39.280 And within there, we know we've got the button. 30 01:39.830 --> 01:41.240 We can change the font-size... 31 01:42.430 --> 01:49.300 to 1em, just to make it fit the rest of our entire page font-size. Let's give it a bit of a bold... 32 01:49.300 --> 01:52.130 weight, so font-weight let's give it bold. 33 01:52.930 --> 01:53.470 It's getting there. 34 01:54.070 --> 01:55.660 Let's effect its color. 35 01:57.590 --> 01:58.360 How does that look? 36 01:59.630 --> 02:05.080 I know you can't see it. We're going to give it a background, background-color... 37 02:06.320 --> 02:08.750 rgb, I don't know, 231, 2, 2. 38 02:08.840 --> 02:13.100 I think that's what I had. RGB. 39 02:14.290 --> 02:16.070 I knew something wasn't quite right there 🤦‍♂️. 40 02:17.420 --> 02:22.220 Let's just scroll down a bit, and you can see, I mean, the default button in the browser is to give it a... 41 02:22.220 --> 02:25.540 border and very square edges. 42 02:25.550 --> 02:26.630 So let's remove the border. 43 02:28.920 --> 02:29.460 There you go. 44 02:30.540 --> 02:32.850 Let's change those, that border.... 45 02:33.060 --> 02:35.040 I don't like it square. I like it's slightly rounded. 46 02:35.790 --> 02:40.560 So we know that that's border-radius and we've defined a variable called --border-radius. 47 02:42.360 --> 02:43.560 It's already starting to look better. 48 02:43.850 --> 02:50.580 Let's give padding to the top and bottom and the left and right, so padding, 10 pixels, 40 pixels... 49 02:50.730 --> 02:51.780 I think that looks pretty good. 50 02:51.930 --> 02:56.880 Remember, with the padding, the 10 pixels affects the bottom and the top, and the 40 pixels affects... 51 02:56.880 --> 02:58.230 the padding on the left and the right. 52 02:58.260 --> 03:00.990 It's just a shortcut method rather than writing... 53 03:01.150 --> 03:01.650 top right... 54 03:01.650 --> 03:02.190 bottom left. 55 03:04.100 --> 03:05.170 Whew, okay. Let's move on. 56 03:05.740 --> 03:09.750 The other thing I want to change is when we hover our mouse over this update, nothing happens. 57 03:10.330 --> 03:12.730 So of course, let's just go "cursor: pointer". 58 03:14.440 --> 03:18.970 There we go, at least now when you hover over it, your mouse is converted to that little hand symbol so... 59 03:18.970 --> 03:19.930 people know it's a button. 60 03:20.830 --> 03:25.510 It's all these little things that matter. And I also want to now give it margin to the left, I want to push... 61 03:25.510 --> 03:32.560 that update button so it's aligned with all the otha otter ... man, I can't talk today 😆 ... I want to push that update button... 62 03:32.560 --> 03:36.400 to the right so it's aligned with all the other form widgets. 63 03:37.180 --> 03:41.800 So in order to do that, and we've seen this before I mean, we've done it with others, is we give this... 64 03:41.800 --> 03:45.580 a margin-left, and we've defined a variable... 65 03:46.960 --> 03:49.480 margin, what was it called, label. 66 03:50.650 --> 03:57.490 Aw, beautiful 🌺. Man, this is fun. Now, when I hover over yes, it goes to a pointer, but I want to change... 67 03:57.490 --> 04:02.140 the style, the hover style, and for that we've got to use pseudo-classes again 😱. 68 04:02.600 --> 04:04.540 Don't worry, it's very, very simple. 69 04:04.570 --> 04:06.670 Again, let's target our button. 70 04:07.180 --> 04:08.590 We know we start at the parent... 71 04:08.980 --> 04:15.000 we then look at its button descendant, and we want to effect it styling when the user hovers over it. 72 04:15.010 --> 04:17.500 And here we can just change our background-color... 73 04:18.720 --> 04:26.870 to, I don't know, 255, I just want it, you know, I just want it a bit lighter. You see that... 74 04:26.880 --> 04:29.220 it's subtle, but it's nice. 75 04:29.220 --> 04:30.690 It's nice to have subtle styling. 76 04:30.690 --> 04:31.980 Don't go overboard with styling. 77 04:33.240 --> 04:34.740 It's all these things that make a difference. 78 04:36.090 --> 04:37.250 I think that's fine for now. 79 04:37.250 --> 04:38.340 I think that's all we need to do. 80 04:39.840 --> 04:41.010 I think it's looking pretty good. 81 04:41.010 --> 04:41.910 Let me expand this. 82 04:43.280 --> 04:46.330 I mean, I don't know about you, but I think this is awesome. 83 04:47.580 --> 04:53.450 You know what I haven't done? I haven't background styled and put a box-shadow around all of our widgets... 84 04:53.850 --> 04:56.770 so let me actually just quickly do that now, before we finish this lecture. 85 04:57.450 --> 04:57.770 Alright... 86 04:57.970 --> 05:00.090 so how do we change, just going back to the browser quickly... 87 05:00.100 --> 05:01.530 how do we change the background of this? 88 05:01.530 --> 05:06.500 Well, we know that we've wrapped all our widgets and we've put them all within a form. 89 05:07.160 --> 05:15.150 If we go back to our code here, and the HTML, and we scroll up, there's our form. We've given it a class of "profile-form". 90 05:16.860 --> 05:22.350 Form right. We've wrapped everything within this form, so all we need to do, let's actually do this... 91 05:22.350 --> 05:24.450 at the top. We should have done this right at the beginning, actually. 92 05:25.770 --> 05:28.020 Um, here, before even this. 93 05:29.970 --> 05:31.830 Let's go here, form styling. 94 05:35.330 --> 05:40.520 And let me float this to the left, and float that to the right, so you can see what's going on. And it's going to be very... 95 05:40.520 --> 05:40.910 simple. 96 05:40.920 --> 05:43.250 We just have to grab our class "profile-form"... 97 05:45.270 --> 05:46.260 background-color... 98 05:48.130 --> 05:48.850 can be... 99 05:50.910 --> 05:54.020 241, 238... 100 05:56.100 --> 05:56.980 238. 101 05:58.200 --> 05:58.870 How does that look? 102 06:01.250 --> 06:08.480 We can give it a border, 1px solid rgb(186, 189, 190). 103 06:10.040 --> 06:10.640 There you go. 104 06:11.580 --> 06:15.090 Border radius, as you know, it's not that nice to have square borders. 105 06:16.010 --> 06:18.420 We've defined a variable called --border-radius. 106 06:20.130 --> 06:22.470 It's starting to take shape. Box shadow... 107 06:25.760 --> 06:27.680 0, 1, 2.... 108 06:28.970 --> 06:32.690 0,0,0.5. We've already done this before. 109 06:34.080 --> 06:36.840 And, of course, to finish it off, let's just give it some padding. 110 06:39.030 --> 06:39.750 Um... 111 06:42.220 --> 06:43.620 did we define padding at the top? 112 06:45.330 --> 06:46.980 Yes we have, --main-padding. 113 06:48.390 --> 06:53.910 Um, adding ... oh, we've done it before here, padding lets just copy that. Paste that. 114 06:56.010 --> 06:59.650 Save. There we go, and there we have it. 115 06:59.670 --> 07:01.530 How awesome does this look? 116 07:01.740 --> 07:05.910 You've literally created your very first form! And don't take it for granted... 117 07:05.910 --> 07:12.330 what you've learnt. You've learnt how to create text input boxes, radio buttons, checkboxes, select... 118 07:12.330 --> 07:15.800 dropdown menus, as well as submit buttons... 119 07:16.350 --> 07:21.840 I mean, if this doesn't blow your mind 🤯, I don't know what will! But because this lecture has dragged on a... 120 07:21.840 --> 07:25.170 bit, I won't discuss now what happens when we submit this data. 121 07:25.170 --> 07:26.820 But let me do that in the next lecture. 122 07:27.060 --> 07:29.190 OK, so hold tight and I'll see you soon 👋.