WEBVTT 0 00:00.200 --> 00:01.280 Awesome, awesome, awesome. 1 00:01.280 --> 00:02.210 I've got my coffee ☕. 2 00:02.210 --> 00:03.400 I hope you do, too. 3 00:03.410 --> 00:06.530 And now I want to start in this lecture 4 00:06.530 --> 00:07.550 building a form. 5 00:07.550 --> 00:09.530 Building a very simple signup form. 6 00:09.530 --> 00:13.430 But we're going to be looking at this form again in future lectures. 7 00:13.430 --> 00:15.290 So it's good if you can start with me here, 8 00:15.290 --> 00:19.910 build it up from scratch so you know exactly where we're picking up from in later lectures. 9 00:19.910 --> 00:21.470 So how do I want to build this form? 10 00:21.470 --> 00:25.670 Well, we want a fieldset to wrap the entire form into one group. 11 00:25.700 --> 00:29.840 The fieldset usually has a legend associated with it, a nice little heading. 12 00:29.840 --> 00:33.200 And then, of course, I want to wrap each form control in its own div. 13 00:33.200 --> 00:34.550 So let's get into it. 14 00:34.550 --> 00:35.870 But first things first. 15 00:37.520 --> 00:37.680 Mmm ... 16 00:39.000 --> 00:41.070 sip of hot coffee. 17 00:41.220 --> 00:42.090 Lovely 😋. 18 00:42.450 --> 00:43.620 You know the drill by now. 19 00:43.710 --> 00:45.840 We just starting with an empty file. 20 00:45.840 --> 00:49.050 We want HTML, and, yes, we do want a style section. 21 00:49.050 --> 00:51.240 We're going to be styling this for obvious reasons. 22 00:51.240 --> 00:52.860 We're talking about CSS, right? 23 00:52.860 --> 00:56.480 But before we can style the HTML, we have to build the HTML. 24 00:56.490 --> 00:59.280 So let's do that within the body. And let's create a form. 25 00:59.310 --> 01:02.130 We're going to wrap everything within these form tags. 26 01:02.160 --> 01:07.800 First thing is first, like I mentioned, I want a fieldset element. 27 01:07.950 --> 01:10.560 The fieldset element needs a legend. 28 01:10.560 --> 01:13.590 And let's just say this is, "Sign Up 29 01:13.590 --> 01:17.310 Now". If we save this, and look in the browser, there we go. 30 01:17.550 --> 01:18.510 Very, very simple. 31 01:18.510 --> 01:23.000 And then I want each form control wrapped within its own div tag. 32 01:23.010 --> 01:23.960 So let's do that. 33 01:23.970 --> 01:24.960 We've got a div. 34 01:24.990 --> 01:29.940 We don't even need to put a class or ID on this, because we can just target it directly in CSS. 35 01:29.970 --> 01:34.980 Each div is going to have a label, it's always good to get used to doing labels. 36 01:34.980 --> 01:40.240 We can give it a for attribute value of fname, for, you guessed it, first name. 37 01:40.690 --> 01:48.100 So there's our label. And of course we need an input with type set to text. The name we can give that 38 01:48.100 --> 01:55.450 can also be fname, and the ID has to match the value of that for attribute on the label, which is also 39 01:55.480 --> 01:56.050 fname. 40 01:56.080 --> 01:58.090 If we save this, there we go. 41 01:58.120 --> 02:03.130 We've got our first name. But I am wanting this to be a required field. 42 02:03.280 --> 02:04.390 How do we do that? 43 02:05.050 --> 02:05.670 That's right. 44 02:05.680 --> 02:10.480 We put the required attribute on the input type of text. 45 02:10.480 --> 02:12.220 Very, very simple. 46 02:12.250 --> 02:14.650 Let me just expand this so it's easier to read. 47 02:14.920 --> 02:17.760 So that's our first input control. 48 02:17.770 --> 02:18.790 I want to create another one 49 02:18.790 --> 02:23.650 now. We've asked for the user's first name, so let's create another div, a label. 50 02:23.740 --> 02:29.050 Now I want to ask for their lname, and you guessed it, that is going to be their last name. 51 02:29.050 --> 02:31.270 Again, input type text. 52 02:31.300 --> 02:37.930 We can give it a name of lname, and now the value of the ID has to match that for attribute's value, 53 02:37.960 --> 02:39.910 which is lname as well. 54 02:39.910 --> 02:42.520 And of course, we want this required as well. 55 02:43.250 --> 02:44.000 So there we go. 56 02:44.030 --> 02:45.020 Those are the two, 57 02:45.050 --> 02:46.520 well, let me have a comment here. 58 02:47.480 --> 02:50.300 Two required input fields. 59 02:51.980 --> 02:55.040 The last thing I want to do in this form is I want an email field. 60 02:55.580 --> 02:58.910 Create an optional email field. 61 02:58.940 --> 03:00.080 How do we do that? 62 03:00.110 --> 03:00.740 Yep. 63 03:00.740 --> 03:02.030 I want to wrap it in a div. 64 03:02.210 --> 03:03.510 We need a label. 65 03:03.530 --> 03:04.880 The for attribute, 66 03:04.910 --> 03:06.920 we can give that a value of email. 67 03:07.370 --> 03:10.880 And of course we can write here "Email Address" and in brackets 68 03:10.880 --> 03:15.020 we can just say "include if you want updates". 69 03:15.470 --> 03:19.710 So it makes it pretty clear that this is an optional input element. 70 03:19.730 --> 03:21.290 What kind of input do we need? 71 03:22.410 --> 03:23.640 You already know this ... 72 03:23.670 --> 03:24.690 of type email. 73 03:24.690 --> 03:26.070 That's 100% correct 💯. 74 03:26.070 --> 03:27.510 We can give it a name of email. 75 03:27.510 --> 03:31.830 And of course the ID has to match the value of that for attribute, which is also email. 76 03:32.530 --> 03:36.940 The last thing we need to do is ... how do you submit a form? 77 03:38.230 --> 03:39.130 That's right. 78 03:39.130 --> 03:47.080 Create a submit button. And we can do that by again, wanting to wrap every form control in a div. 79 03:47.320 --> 03:55.300 And here we can just create a button with its type set to submit, and we can just say, I don't know, 80 03:55.480 --> 03:56.500 let's go. 81 03:56.530 --> 03:57.280 How's that? 82 03:57.550 --> 03:58.810 Let's go to the browser. 83 03:59.110 --> 03:59.920 Let's expand this. 84 03:59.920 --> 04:01.000 And there we go. 85 04:01.120 --> 04:02.320 I know, I know. 86 04:02.320 --> 04:03.790 It's pretty hideous. 87 04:03.790 --> 04:08.770 I don't like the look of this right now, but the HTML is done and you can see how quick this was for 88 04:08.770 --> 04:09.760 us just to set up. 89 04:09.760 --> 04:13.090 So now let's start including some CSS. 90 04:13.120 --> 04:13.900 You know what I'm going to do? 91 04:13.900 --> 04:18.880 I'm going to put this side by side. It's always nice and then you can kind of see how the CSS affects the styling 92 04:18.880 --> 04:19.540 as we go. 93 04:19.570 --> 04:21.820 Maybe I should zoom out here just a little bit. 94 04:22.240 --> 04:22.970 How's that? 95 04:23.020 --> 04:28.180 All right, my dear comrades, my students, my awesome, awesome friends, what should we do first? 96 04:28.210 --> 04:30.430 Well, I think we should start off with a fieldset, 97 04:30.460 --> 04:30.790 right. 98 04:30.790 --> 04:34.360 Let's start off in a logical, from the top to the bottom, kind of order. 99 04:34.810 --> 04:38.690 Let's give it a width of 40%, nah, maybe 30%. 100 04:38.780 --> 04:40.130 And let's see what that looks like. 101 04:40.700 --> 04:41.390 That's okay. 102 04:41.390 --> 04:44.210 I don't like it stretching across the entire screen of the browser. 103 04:45.020 --> 04:47.180 Let's center this now in the middle of the page. 104 04:47.360 --> 04:50.150 Yep. And let's give it some padding. 105 04:51.530 --> 04:58.700 You can already see how quick and easy, you know, transforming boring HTML to something nice can take. 106 04:58.730 --> 04:59.760 Very, very quick and easy. 107 04:59.780 --> 05:03.020 As I mentioned, we're going to be logically going in order here. 108 05:03.020 --> 05:03.770 So fieldset. 109 05:03.800 --> 05:05.720 Then let's deal with our legend. 110 05:05.810 --> 05:09.110 Let's give our legend a nice a nice background color. 111 05:10.040 --> 05:13.040 19, 197, 167. 112 05:14.000 --> 05:15.140 Why is it not working? 113 05:15.220 --> 05:16.850 I need a comma there. 114 05:17.300 --> 05:17.960 Let's save. 115 05:17.960 --> 05:18.400 And there we go. 116 05:18.410 --> 05:20.150 It's like a turquoisey kind of color. 117 05:20.990 --> 05:21.800 And the text 118 05:21.800 --> 05:24.290 I don't want to be black, so let's just make it white. 119 05:24.320 --> 05:25.250 There you go. 120 05:25.580 --> 05:27.410 And let's give this some padding. 121 05:27.500 --> 05:30.500 Five pixels and ten pixels. 122 05:30.830 --> 05:31.800 And what else can we do? 123 05:31.820 --> 05:33.050 Okay, the div we can target. 124 05:33.060 --> 05:38.180 Remember, each control is wrapped within a div and they're quite bunched up to each other here and 125 05:38.180 --> 05:38.990 I don't like that. 126 05:38.990 --> 05:40.070 So let's just give it a margin 127 05:40.070 --> 05:42.140 bottom of something ... 128 05:42.140 --> 05:43.400 maybe 20 pixels. 129 05:43.730 --> 05:44.480 That's better. 130 05:44.480 --> 05:45.080 That's better. 131 05:45.080 --> 05:46.490 At least now they're separated. 132 05:46.820 --> 05:47.750 All right, what's next? 133 05:47.750 --> 05:49.340 What's next, my dear students? 134 05:51.060 --> 05:51.780 That's right. 135 05:51.780 --> 05:53.180 Let's target our input. 136 05:53.190 --> 05:58.710 Let's set its width to 100%. And its parent is a div element, right, 137 05:58.710 --> 06:02.700 so what I mean by 100% is that it's just going to stretch across the entire div. 138 06:02.730 --> 06:09.060 The reason you still seeing gaps that it's not touching the edge is because we gave this fieldset some 139 06:09.060 --> 06:09.510 padding. 140 06:09.510 --> 06:12.510 If we make this padding zero then there we go. 141 06:12.510 --> 06:14.580 It'll stretch across the entire width. 142 06:14.580 --> 06:18.330 But anyways, we want padding of 20%, oh, 20 pixels 143 06:18.330 --> 06:18.990 sorry. 144 06:19.110 --> 06:19.950 So there we go. 145 06:19.950 --> 06:22.500 That's width. The border-radius, 146 06:22.500 --> 06:24.120 I don't like the square borders here. 147 06:24.420 --> 06:26.700 Let's just affect that very, very slightly. 148 06:27.600 --> 06:29.190 We'll make that 5 pixels. 149 06:29.220 --> 06:30.000 How's that? 150 06:30.600 --> 06:32.100 And then let's give this some padding. 151 06:32.250 --> 06:33.600 Also 5 pixels. 152 06:33.600 --> 06:35.100 I can actually zoom out slightly. 153 06:35.400 --> 06:35.970 Yep, 154 06:36.000 --> 06:36.750 how's that? 155 06:37.260 --> 06:37.920 It's coming together. 156 06:37.920 --> 06:38.820 It's coming together. 157 06:38.820 --> 06:39.030 Okay. 158 06:39.030 --> 06:40.050 We've done our inputs. 159 06:40.080 --> 06:41.070 What about our labels? 160 06:41.070 --> 06:42.210 We can do our labels. 161 06:43.370 --> 06:45.420 And let's just give our label some padding. 162 06:45.470 --> 06:49.100 Next, let's target our button. That "Lets go" button 163 06:49.100 --> 06:50.330 is pretty hideous at the moment. 164 06:50.330 --> 06:52.970 Let's give it a width of 30%. 165 06:53.180 --> 06:57.980 Let's put in the center, effect its display property to block. 166 06:58.400 --> 06:59.420 There we go. 167 06:59.480 --> 07:00.890 I also want to give this some padding. 168 07:00.920 --> 07:02.090 5 pixels. 169 07:03.030 --> 07:04.350 Font-size, 170 07:04.380 --> 07:05.760 should we do 100%? 171 07:06.360 --> 07:08.130 Let's give it a nice background color. 172 07:10.330 --> 07:11.250 Like a nice blue. 173 07:11.260 --> 07:12.610 I'm wanting like a nice blue. 174 07:15.590 --> 07:16.910 Yeah, that's nice. 175 07:17.510 --> 07:20.810 Give the actual text a color of white. Border, 176 07:20.840 --> 07:21.710 I hate that 177 07:22.250 --> 07:23.390 well, "hate" is a very strong word, 178 07:23.420 --> 07:26.420 I dislike the default border there, so let's just give it none. 179 07:26.900 --> 07:27.380 Yeah. 180 07:27.410 --> 07:30.770 Much nicer. Um, border-radius 181 07:30.950 --> 07:35.090 again, we just curve those borders ever so slightly. 182 07:35.930 --> 07:36.860 Looks nice. 183 07:37.160 --> 07:39.410 And let's give it a box-shadow just to finish it off. 184 07:48.880 --> 07:49.890 Uh, you know what? 185 07:49.900 --> 07:50.950 Let me give this, 186 07:50.980 --> 07:52.540 what does 40% look like? 187 07:53.590 --> 07:54.830 Yeah, that looks better. 188 07:54.870 --> 07:56.950 At least now the text is fitting in quite nicely. 189 07:58.770 --> 08:01.980 Now I want to target a few pseudo classes. 190 08:02.100 --> 08:07.350 Firstly, when a user hovers over all of these inputs, I want the background color to change to visually 191 08:07.350 --> 08:10.120 let the user know that he or she is hovering over them. 192 08:10.140 --> 08:11.220 Very, very quick. 193 08:11.220 --> 08:20.100 All I want to do is target our div, but I want to target the div when it's in its hover state. 194 08:20.520 --> 08:26.130 And then when this is being hovered over, we want to select the child input element, right? 195 08:26.130 --> 08:32.400 The child combinator CSS is denoted by the greater sign and the child we want to affect its styling 196 08:32.400 --> 08:34.380 is this input element. 197 08:34.470 --> 08:35.760 That's all I've done here. 198 08:36.120 --> 08:43.530 And of course we want to affect its background. And I want it to be a kind of a gray color. 199 08:43.620 --> 08:47.610 243, 243, 243. 200 08:48.130 --> 08:48.330 Right. 201 08:48.330 --> 08:49.410 Should we see if this works? 202 08:49.800 --> 08:51.720 Let's hover our mouse over, and look at that. 203 08:51.750 --> 08:53.100 Very, very cool and intuitive 204 08:53.100 --> 08:53.700 right? 205 08:53.820 --> 08:54.330 I love it. 206 08:54.330 --> 08:55.110 I love it. 207 08:55.590 --> 08:57.710 Why don't we do the same thing for the button? 208 08:57.720 --> 09:01.060 So we grab the button, and we want to affect its hover state. 209 09:01.090 --> 09:03.850 All we want to do is change its background color. 210 09:05.750 --> 09:09.470 And, let's make that 1, 82, 114. 211 09:13.450 --> 09:13.840 There we go. 212 09:13.840 --> 09:15.000 Let's see if that works. 213 09:15.010 --> 09:16.090 And it does. 214 09:16.690 --> 09:18.500 See how easy and quick this is? 215 09:18.520 --> 09:23.860 But the lecture was all about this :required pseudo class. 216 09:24.190 --> 09:31.720 So, let's use the :required pseudo class to style up our form. 217 09:31.750 --> 09:32.920 How do we do this? 218 09:33.100 --> 09:38.500 Well, firstly, let's grab our input element and target its state of required. 219 09:39.350 --> 09:41.900 And remember, we need a selector, 220 09:41.930 --> 09:44.300 the colon, and then the pseudo class. 221 09:44.750 --> 09:46.010 It's this easy. 222 09:46.010 --> 09:48.020 And we've seen many examples of this in the course. 223 09:48.050 --> 09:52.280 Let's just give it a 1 pixel solid border of 224 09:52.730 --> 09:59.540 I don't know, let's do it 223, 20, 13 and 0.85. 225 09:59.570 --> 10:00.590 How is that going to look? 226 10:02.770 --> 10:09.130 So when the page first loads, we know that the first input there is required. 227 10:09.160 --> 10:11.830 Why is last name not red? 228 10:12.430 --> 10:13.840 This is a concern. 229 10:14.050 --> 10:16.060 So let's look at our file here. 230 10:17.820 --> 10:19.030 There we go. 231 10:19.050 --> 10:20.580 Not "aria-required". 232 10:20.820 --> 10:23.080 We just need it to have the "required" attributes. 233 10:23.100 --> 10:24.960 Let's go back to our browser and there we go. 234 10:24.990 --> 10:30.660 When it loads up, you as a user now visually know that these two are required. 235 10:30.780 --> 10:31.770 How awesome. 236 10:31.770 --> 10:32.880 How awesome. 237 10:33.840 --> 10:35.040 Oh, this is fun. 238 10:35.040 --> 10:35.840 This is fun. 239 10:35.850 --> 10:42.810 So we've dealt with targeting the :required pseudo class, but what's really cool is that we can combine 240 10:42.810 --> 10:44.650 pseudo classes. 241 10:44.670 --> 10:51.630 For example, we can style an input that has a required attribute, 242 10:52.510 --> 10:55.090 and that is in focus. 243 10:56.240 --> 10:56.720 What! 244 10:56.750 --> 10:57.810 That's weird, right? 245 10:57.830 --> 10:58.820 But it's very easy. 246 10:58.820 --> 10:59.150 You'll see 247 10:59.180 --> 11:05.070 now. Let's target our input element where it's pseudo class is required, 248 11:05.090 --> 11:10.610 but at the same time, we only want to affect its styling in this case when it has focus. 249 11:10.640 --> 11:11.420 So there we go. 250 11:11.420 --> 11:16.430 We are literally using two pseudo classes. And to prove it to you, let's just give it a border 251 11:17.270 --> 11:21.410 I don't know, 2 pixels solid, and I don't know, 252 11:21.410 --> 11:22.290 should we do orange? 253 11:22.310 --> 11:27.200 I kind of view red is bad, green is good and orange is kind of in an intermediate state. 254 11:27.200 --> 11:29.150 And let's just remove the outline. 255 11:30.160 --> 11:31.330 I don't like the outline. 256 11:31.630 --> 11:33.250 Okay, let's see if this looks good. 257 11:33.430 --> 11:35.980 Let's go to our browser and let's give it focus 258 11:35.980 --> 11:37.900 now. Let's click inside this box. 259 11:38.260 --> 11:39.220 There we go. 260 11:39.250 --> 11:41.140 How awesome is that? 261 11:41.320 --> 11:42.340 That's very cool, 262 11:42.340 --> 11:42.790 right? 263 11:42.820 --> 11:45.400 Of course, it's not affecting the email address field. 264 11:45.400 --> 11:46.180 Do you know why? 265 11:46.420 --> 11:47.050 100%. 266 11:47.050 --> 11:48.490 It's because of this required, isn't it? 267 11:48.520 --> 11:51.100 If we take that required away, go back to our browser. 268 11:51.850 --> 11:56.710 Now it will affect the email field, but we only want to affect those that have the required attribute 269 11:56.710 --> 11:57.220 on them. 270 11:57.340 --> 12:00.400 So there we go, making a lot of sense. 271 12:00.580 --> 12:06.730 The other thing I do want to mention to you, and we have mentioned it in the lecture, is this optional pseudo 272 12:06.730 --> 12:09.470 class. That is available to us. 273 12:09.490 --> 12:10.930 Let me just put the side by side. 274 12:10.960 --> 12:12.920 How do we use this :optional pseudo class? 275 12:12.940 --> 12:15.610 Well, we could ... you see the email address there? 276 12:15.610 --> 12:19.600 We know that that is the only optional element in the form. 277 12:19.600 --> 12:21.760 So let's target that now. 278 12:21.760 --> 12:29.860 But instead of targeting it with using CSS by targeting the type of email, which we could do, let's 279 12:29.860 --> 12:37.390 now target the pseudo class of :optional because we know that is an optional form control, and let's affect 280 12:37.390 --> 12:37.890 its border 281 12:37.900 --> 12:38.110 right? 282 12:38.110 --> 12:44.530 I don't like the default border that the browser provides and let's give it 1 pixel solid silver. 283 12:45.460 --> 12:46.120 We save it. 284 12:46.120 --> 12:46.840 And there we go. 285 12:46.840 --> 12:49.390 You can see that it's updating that email address field. 286 12:49.540 --> 12:54.880 But as I mentioned in the lecture as well, it's kind of pointless in a way because we don't even need 287 12:54.880 --> 12:56.280 to have this optional element. 288 12:56.290 --> 13:00.490 We can just style the default look and feel of all inputs without it. 289 13:00.490 --> 13:03.160 And if you do that, we get the same result. 290 13:03.160 --> 13:04.720 So it seems kind of pointless. 291 13:04.720 --> 13:05.680 But you know what, 292 13:05.710 --> 13:10.270 I guess it doesn't harm to be overly specific when it comes to coding because then it makes it very 293 13:10.270 --> 13:12.490 clear what it is you want to achieve. 294 13:12.520 --> 13:14.980 So here we go. 295 13:15.010 --> 13:16.600 This is a cool form. 296 13:16.600 --> 13:21.940 We're going to be working with it, like I mentioned in a few lectures going forward, and you might 297 13:21.940 --> 13:27.250 be thinking right now, "Clyde, this is an awesome little signup form, very clear and very intuitive". 298 13:27.520 --> 13:29.010 But, I beg to differ. 299 13:29.020 --> 13:31.930 It is a good form, but there are a few problems with it. 300 13:31.930 --> 13:34.330 So let's hop back over to the lecture. 301 13:34.480 --> 13:39.400 Well, let's take a break, hop over back to the lecture and let me explain what I think we could 302 13:39.400 --> 13:41.050 do to improve this form. 303 13:41.800 --> 13:45.350 See you now.