WEBVTT 0 00:00.140 --> 00:06.650 I am super, super excited about this section because here we're going to turn our focus away from actually 1 00:06.650 --> 00:10.310 creating and structuring web forms, to styling forms. 2 00:10.310 --> 00:15.920 And by styling forms, of course, I just mean using CSS and pseudo classes and pseudo elements. 3 00:15.950 --> 00:21.530 We've seen already a lot of examples of using these throughout the course. 4 00:21.770 --> 00:27.200 And I'll just say off the bat that historically styling forms has been rather difficult, and form controls 5 00:27.200 --> 00:31.310 vary greatly in how easy they are to customize with CSS. 6 00:31.310 --> 00:36.140 But the good news, my dear students, is that it's getting a lot easier now because all the browsers 7 00:36.170 --> 00:41.510 are kind of retiring and the modern browsers give us more features to use. 8 00:41.840 --> 00:47.510 So as I mentioned, we've already looked at all the HTML you need to create awesome forms. 9 00:47.510 --> 00:53.090 We started off at the very basics looking at the actual form wrapper itself, and then we turned our 10 00:53.090 --> 00:58.850 attention to the most important and perhaps complex HTML element when it comes to forms, and that is 11 00:58.850 --> 01:00.090 the input element. 12 01:00.090 --> 01:06.000 And of course the type attribute is so unique when it comes to inputs because it defines the look and 13 01:06.000 --> 01:08.070 feel of the widget we are creating. 14 01:08.070 --> 01:11.580 We looked at the default type of text, but that wasn't all, was there? 15 01:11.610 --> 01:15.390 We had password, checkboxes, files, submits, 16 01:15.420 --> 01:16.080 etc 17 01:16.080 --> 01:16.590 etc. 18 01:16.620 --> 01:20.340 There are a ton of them and we did not stop there. 19 01:20.370 --> 01:23.910 We looked at non-input form controls. 20 01:23.940 --> 01:26.850 These are just elements that are commonly used in forms. 21 01:26.850 --> 01:32.370 We looked at the textarea, select, datalist, output elements, and we didn't even stop there. 22 01:32.370 --> 01:37.820 We looked at the progress bars, meter bars, we looked at option elements, optgroup elements ... 23 01:37.830 --> 01:39.330 man, my mind is blown 🤯. 24 01:40.110 --> 01:41.280 We've done a lot. 25 01:41.460 --> 01:48.060 But in this section, as I said, we're going to look at how to use CSS to style your forms. 26 01:48.060 --> 01:55.590 And as I briefly mentioned, form controls do vary greatly in how easy they are to manipulate with CSS. 27 01:55.620 --> 01:57.620 And this is true even today. 28 01:57.630 --> 02:01.710 There are many form controls that are tricky to manipulate with CSS. 29 02:01.740 --> 02:05.240 But if you're anything like me, you want to know why? 30 02:05.250 --> 02:07.740 Why is it difficult to style with CSS? 31 02:07.890 --> 02:09.330 Well, that is a very good question. 32 02:09.330 --> 02:13.440 So let's separate out form controls versus CSS. 33 02:13.620 --> 02:15.280 Firstly, form controls. 34 02:15.300 --> 02:23.190 Form controls were added to HTML in the HTML 2 specification all the way back in 1995. 35 02:23.220 --> 02:32.010 Isn't that old school! CSS, however, wasn't released until late 1996 and it wasn't supported very well 36 02:32.040 --> 02:34.530 by browsers for a few years after that. 37 02:34.530 --> 02:39.600 And this just meant that browsers relied on the underlying operating system to manage and render form 38 02:39.600 --> 02:40.290 controls. 39 02:40.290 --> 02:46.290 And even with CSS available to style, the HTML browser vendors have historically been reluctant to 40 02:46.290 --> 02:51.900 make form controls stylable because they were thinking that users were so accustomed to their visual 41 02:51.900 --> 02:55.040 appearance of their respective platforms. 42 02:55.050 --> 03:01.080 But the good news, as I mentioned, is that time has changed and website owners want form styles that 43 03:01.080 --> 03:08.670 fit in with the overall site design more than ever today, and the web has changed to make this possible. 44 03:08.670 --> 03:12.150 But nevertheless, we still have these nuances even today. 45 03:12.150 --> 03:18.780 So although we've come a long way, we still have the good, the nasty and the bad. 46 03:19.050 --> 03:22.050 What are some of the good form widgets we have? 47 03:22.050 --> 03:27.600 And by the good, I just mean these are elements that can be styled with few if any problems across 48 03:27.600 --> 03:28.590 different platforms. 49 03:28.590 --> 03:32.610 So things like the form, fieldset, some input controls, buttons, labels ... 50 03:32.610 --> 03:35.040 these are very, very easy to style. 51 03:35.070 --> 03:38.760 But of course we don't only have the good, we also have the bad. 52 03:38.790 --> 03:41.040 These elements are more difficult to style. 53 03:41.070 --> 03:45.420 They require more complex CSS and some maybe specific tricks. 54 03:45.420 --> 03:51.000 Things like input where type attribute is set to search, checkboxes, radio buttons, 55 03:51.000 --> 03:56.550 we've seen examples of these in the course where we had to kind of hide the default appearance and create 56 03:56.550 --> 03:58.440 our own new one from scratch. 57 03:58.440 --> 04:02.340 We've seen this and then of course we've got the nasty. 58 04:02.340 --> 04:08.170 Here, these are just elements that really are difficult to style through CSS. 59 04:08.200 --> 04:10.840 These include things like input where its type is set to color. 60 04:10.840 --> 04:16.990 Remember that color picker? We can't really manipulate at all the visual appearance of that color picker. 61 04:17.020 --> 04:22.450 We've got input of type file which is also very, very nasty. Range, select elements, 62 04:22.450 --> 04:24.190 and remember those progress and meter bars? 63 04:24.190 --> 04:27.910 Yes, we can target the, you know, the webkit pseudo classes. 64 04:27.910 --> 04:28.720 Remember those? 65 04:28.720 --> 04:31.510 But it's not well supported across browsers. 66 04:31.510 --> 04:34.930 And for that reason they are nasty to style with CSS. 67 04:34.930 --> 04:41.800 I guess what I'm trying to say is the real problem with the bad and the ugly controls is that they have 68 04:41.800 --> 04:45.490 a very complex structure, and beyond some basic styling, 69 04:45.490 --> 04:49.990 and by basic styling I mean such as changing the width or margin of the control, 70 04:49.990 --> 04:56.710 you generally don't have the ability to style the controls internal components, for example, the 71 04:56.710 --> 04:58.210 date picker calendar. 72 04:58.210 --> 04:59.770 We can't change the actual style of 73 04:59.860 --> 05:00.490 the calendar. 74 05:00.700 --> 05:05.810 Or what about the button on the select element that causes the option list to display? 75 05:05.830 --> 05:10.530 We can't style the look and feel of that button making up those widgets. 76 05:10.540 --> 05:14.480 So you can see why I'm saying these are bad and ugly controls. 77 05:14.500 --> 05:19.960 If you want to thoroughly customize these widgets, you'll have to create your own using HTML, CSS 78 05:19.960 --> 05:21.010 and JavaScript. 79 05:21.040 --> 05:23.600 Anyway, we've got a lot more to cover when it comes to CSS. 80 05:23.620 --> 05:27.910 I just wanted to kind of give a high level summary before we continue. 81 05:27.950 --> 05:29.890 Can't wait to see you in the next lecture.