WEBVTT 0 00:00.230 --> 00:02.780 I am super excited this time. 1 00:02.780 --> 00:03.530 For real, 2 00:03.530 --> 00:04.790 for real excited. 3 00:04.790 --> 00:08.690 Because now we're going to be talking about perhaps one of the most important pseudo classes you can 4 00:08.690 --> 00:12.680 target to style forms in a very cool and intuitive way. 5 00:12.710 --> 00:14.570 Can you guess what the pseudo class is? 6 00:14.600 --> 00:16.340 You've seen it many times already. 7 00:17.440 --> 00:18.400 That's right. 8 00:18.400 --> 00:25.510 It is the :required pseudo class. And one of the most basic concepts with regards to client side form 9 00:25.510 --> 00:29.590 validation is whether a form input is required. 10 00:29.590 --> 00:34.930 And by required I just mean does it have to be filled in before the form can be submitted to a server? 11 00:35.470 --> 00:37.420 If it's not required, it's optional. 12 00:37.420 --> 00:37.900 Right? 13 00:37.930 --> 00:45.010 As I mentioned, :required is a pseudo class selector specifically selecting or finding form elements 14 00:45.010 --> 00:46.810 that are required. 15 00:46.840 --> 00:53.890 More specifically, it's used to select form elements that have the required attribute set. 16 00:53.920 --> 00:57.130 Remember, we put this required attribute on a lot of our form controls. 17 00:57.130 --> 00:58.780 It's either there or it's not. 18 00:58.780 --> 01:00.520 So it's a boolean attribute. 19 01:01.180 --> 01:04.040 And it doesn't work in all HTML. 20 01:04.060 --> 01:06.250 It only works on selected elements. 21 01:06.250 --> 01:09.970 It works on textarea, inputs and the select element. 22 01:09.970 --> 01:16.360 And these elements have a required attribute available to us in HTML, which when set, just means that 23 01:16.360 --> 01:20.840 you have to fill in that control before the form will successfully submit. 24 01:20.860 --> 01:21.640 "Okay, Clyde. 25 01:21.670 --> 01:24.220 That's a required pseudo class. 26 01:24.220 --> 01:26.290 But what about if it's not required?" 27 01:26.410 --> 01:33.100 Well then we've got this :optional pseudo class, and this :optional pseudo class only targets input and 28 01:33.100 --> 01:34.150 select elements. 29 01:34.150 --> 01:39.520 And of course it's going to target all the elements that don't have the required attribute set. 30 01:39.520 --> 01:45.160 And one could argue that this could be useful if you want to give optional fields a specific look, 31 01:45.190 --> 01:48.070 maybe slightly less visible than required ones. 32 01:48.070 --> 01:49.570 But hang on. 33 01:50.170 --> 01:52.360 What, what is this, professor? 34 01:52.360 --> 01:52.690 What, 35 01:52.720 --> 01:54.130 what do you want to say? 36 01:55.070 --> 02:00.500 You'll probably not find yourself using the :optional pseudo class very often. 37 02:00.620 --> 02:01.850 Why is that? 38 02:02.000 --> 02:10.460 Well, form controls are optional by default, Clyde, so you could just do your optional styling by default 39 02:10.460 --> 02:14.630 and add styles on top for acquired controls. 40 02:14.660 --> 02:16.250 That is a very good point. 41 02:16.250 --> 02:20.500 So I actually don't see much use of this :optional pseudo class at all. 42 02:20.510 --> 02:24.080 In fact, I don't remember using it even once. 43 02:24.170 --> 02:28.540 I always use required and of course your optional or your default styling you just apply 44 02:28.550 --> 02:29.180 anyway. 45 02:29.210 --> 02:30.770 Thank you very much, Professor. 46 02:32.080 --> 02:33.010 You can go now. 47 02:34.890 --> 02:36.060 So there we go. 48 02:36.090 --> 02:38.820 We've looked at required, we've looked at optional. 49 02:38.820 --> 02:45.030 And before we continue with this lecture, I do want us to hop over to the text editor quickly because 50 02:45.030 --> 02:52.380 I want to build a signup form with you and I want to specifically target the :required pseudo class in 51 02:52.380 --> 02:54.450 order to style it a certain way. 52 02:54.540 --> 02:55.530 Let's do that now.