WEBVTT 0 00:00.020 --> 00:01.250 What a cool example, right? 1 00:01.250 --> 00:07.180 You can see our form is slowly starting to come together. But, let's talk about it in a bit more detail. 2 00:07.190 --> 00:10.340 The example wasn't terrible, right? 3 00:10.340 --> 00:14.240 The form looked kind of cool, but it wasn't great either. 4 00:14.240 --> 00:15.950 Why wasn't it great? 5 00:15.980 --> 00:18.890 Well, I can think of two reasons. 6 00:19.010 --> 00:21.620 Firstly, we only using color. 7 00:21.620 --> 00:27.860 In other words, we are signalling required versus optional status using color alone. 8 00:27.860 --> 00:30.370 And this isn't good for colorblind people. 9 00:30.380 --> 00:36.410 The second reason why this isn't that great, is that the standard convention on the web for required 10 00:36.410 --> 00:43.460 status, is an asterisks or the word "required" being associated with the controls in question. 11 00:43.460 --> 00:50.570 So then, in order to improve our form, why don't we look at a better example of indicating required 12 00:50.570 --> 00:59.210 fields using not only the :required pseudo class, but it's also going to require us to use generated 13 00:59.210 --> 01:00.380 content! 14 01:00.380 --> 01:05.870 (sound: what) Whaaat? What is generated content? 15 01:05.870 --> 01:11.750 Well generated content is done via us using and targeting pseudo elements. 16 01:11.750 --> 01:18.380 For example, we can use the ::before and ::after pseudo elements along with the content property to make 17 01:18.380 --> 01:25.790 a chunk of content appear before or after the affected element. And you'll often use the ::before and 18 01:25.790 --> 01:28.880 ::after pseudo elements when it comes to styling forms. 19 01:28.880 --> 01:36.380 Just remember though, that the chunk of content you add is not added to the DOM, so this means it's 20 01:36.380 --> 01:38.000 invisible to screen readers. 21 01:38.000 --> 01:43.850 But what's cool about it, is that it is part of the document's styles. Because it's a pseudo element, 22 01:43.880 --> 01:49.280 it can be targeted with styles in the same way that any actual DOM node can. 23 01:49.280 --> 01:55.460 And this is really useful when you want to add a visual indicator to an element such as a label or an 24 01:55.460 --> 02:00.410 icon, but you don't want it to be picked up by assistive technologies. 25 02:00.410 --> 02:02.010 So is this making sense? 26 02:03.480 --> 02:06.240 We looked at the required pseudo class. 27 02:06.270 --> 02:10.530 We discussed the optional - that it isn't really that useful to us. 28 02:10.560 --> 02:16.110 And then we discussed the fact that it's actually not enough just to target the required pseudo class. 29 02:16.140 --> 02:18.600 Often when it comes to forms, we need more. 30 02:18.600 --> 02:25.170 And one of the ways to add more is using generated content through using pseudo elements. 31 02:25.170 --> 02:29.120 So why don't we go back to our form and let's improve our form? 32 02:29.130 --> 02:34.440 In fact, what I want you to do is I want you to use a pseudo element to now add content. 33 02:34.440 --> 02:38.760 Specifically, I want you to add the word "required", give it a nice cool styling 34 02:38.760 --> 02:45.540 so it's very clear to a user that the first name and last name is a required field. 35 02:45.540 --> 02:46.590 Let's give that a go. 36 02:46.590 --> 02:49.110 Let's start improving our signup form.