WEBVTT 0 00:00.080 --> 00:03.170 Welcome back to another awesome lecture. 1 00:03.170 --> 00:09.170 We've spoken about the textarea element, but now I really want to get onto some cool controls and 2 00:09.170 --> 00:12.380 those are known as dropdown controls. 3 00:12.380 --> 00:19.490 And by dropdown I just mean a way for a user to select many different options without taking up much 4 00:19.490 --> 00:21.740 space in the user interface. 5 00:21.770 --> 00:28.490 Taking a step back, HTML has two broad categories or types of dropdown menus. 6 00:28.490 --> 00:36.260 They've got the (1) select box and the (2) autocomplete box. And by autocomplete box we can either use the 7 00:36.260 --> 00:39.590 autocomplete attribute or we can use the datalist element. 8 00:39.590 --> 00:41.800 We're going to be discussing this shortly. 9 00:41.810 --> 00:49.100 For now, just know that in both cases, whether we use a select box or autocomplete box, the interaction 10 00:49.100 --> 00:50.000 is the same. 11 00:50.000 --> 00:57.170 Once the control is activated, the browser displays a list of values the user can select between. 12 00:57.170 --> 00:58.640 But first things first ... 13 00:58.670 --> 01:03.360 let's discuss the select box. And there's an example of how you can create one. 14 01:03.660 --> 01:06.330 As you can see, it's very easy to create. 15 01:06.330 --> 01:13.500 It's created with the <select> element, with one or more <option> elements nested within it, each of which 16 01:13.500 --> 01:16.200 specifies one of its possible values. 17 01:16.200 --> 01:24.300 And if you require it, the default value for the select box can be set using the "selected" attribute 18 01:24.330 --> 01:26.160 on one of the option elements. 19 01:26.160 --> 01:33.570 So what this really practically means is that this option will be pre-selected when the page loads. 20 01:33.570 --> 01:37.140 Let me quickly hop over to the console and show you. You know, the drill, 21 01:37.140 --> 01:40.830 we're just going to start with a blank file here, and we're going to start coding. 22 01:40.830 --> 01:41.120 Okay. 23 01:41.130 --> 01:42.690 I want to wrap it in a form. 24 01:42.690 --> 01:45.540 And how does this select box work? 25 01:45.540 --> 01:45.870 Okay. 26 01:45.870 --> 01:47.340 Well, it's very, very simple. 27 01:47.340 --> 01:53.210 As I said, it's wrapped with an a select element. And let's just get rid of everything else, okay? 28 01:53.220 --> 01:58.200 If we save this and refresh the browser, we can already see the browser's giving us a default kind 29 01:58.200 --> 01:59.250 of selection box. 30 01:59.250 --> 02:00.420 But nothing's in here. 31 02:00.420 --> 02:04.200 So we can toggle it and click it, but nothing really happens. 32 02:04.200 --> 02:04.830 So there we go. 33 02:04.830 --> 02:05.880 That's the select element. 34 02:05.880 --> 02:12.690 And in order to give the user options, we use the option element, right. Here, 35 02:12.690 --> 02:18.000 we can just give options of colors, let's say red, and we can copy this down. 36 02:20.320 --> 02:24.010 And of course we can do pink, blue, 37 02:24.300 --> 02:26.770 I know it's not a color, but let's do some animals, 38 02:26.800 --> 02:29.040 hippo 🦛, leopard 🐆, 39 02:29.680 --> 02:30.250 rhino 🦏. 40 02:30.280 --> 02:31.060 There we go. 41 02:31.060 --> 02:37.600 So you can see that the select box width was adjusted by the browser, because it's got to cater for the 42 02:37.600 --> 02:39.440 largest word in our case, leopard. 43 02:39.460 --> 02:41.860 And you can see they are all our values. 44 02:41.890 --> 02:45.370 Do you remember how we can pre-select one? 45 02:46.350 --> 02:48.600 Let's say we want pink pre-selected. 46 02:48.600 --> 02:49.680 How can we do that? 47 02:49.950 --> 02:54.510 Right now it's just red, because the browser picks the first one in the list and just displays that. 48 02:55.290 --> 02:55.920 Well, that's right. 49 02:55.920 --> 03:01.080 We use the selected attribute. And it's a boolean attribute, meaning it's either there or it's not. 50 03:01.290 --> 03:04.800 Let's just put it on pink, save and then look. 51 03:04.830 --> 03:07.300 The browser automatically selects pink. 52 03:07.320 --> 03:07.980 Pretty cool. 53 03:07.980 --> 03:09.000 Just a bit of FYI. 54 03:09.300 --> 03:10.860 Let's jump back into the lecture. 55 03:11.160 --> 03:11.870 Makes sense. 56 03:11.900 --> 03:12.630 I hope so. 57 03:12.900 --> 03:16.050 There are a few more points I want to make about the select box. 58 03:16.080 --> 03:23.460 The next point I want to make is that the option element can be nested inside an optgroup element. 59 03:23.790 --> 03:25.620 "Well, why would you want to do that, Clyde?" 60 03:25.650 --> 03:31.440 Well, with the optgroup element, you can visually create a group of values. 61 03:31.890 --> 03:37.640 Another thing worth noting with optgroup is that it can only be used with the select element. 62 03:37.650 --> 03:42.840 And like I mentioned, the reason you would want to do this is because the browser sets them visually 63 03:42.840 --> 03:45.180 apart from the other options. 64 03:45.210 --> 03:50.490 Often by being bolded and having them displayed at a different nesting level, so they are less likely 65 03:50.490 --> 03:52.950 to be confused for actual options. 66 03:53.400 --> 03:56.710 But words or words ... let me hop over to the console and quickly show you. 67 03:57.100 --> 04:02.980 As I mentioned in the lecture, we can use this option group element to kind of demarcate headings 68 04:02.980 --> 04:04.330 to our dropdown list. 69 04:04.510 --> 04:10.480 How would we in this instance? We've got colors and we've got animals, so we may want to demarcate 70 04:10.510 --> 04:12.730 one heading for colors, and one for animals. 71 04:12.760 --> 04:14.510 Give it a go and see if you can do it. 72 04:25.030 --> 04:25.220 (music playing) 73 04:29.580 --> 04:30.240 Did you give it a go? 74 04:30.360 --> 04:30.810 I hope so. 75 04:31.050 --> 04:32.010 If not, don't worry, 76 04:32.010 --> 04:33.120 we're going to do it now, together. 77 04:33.150 --> 04:34.260 Let me remove myself 78 04:34.260 --> 04:35.640 so I don't block any code. 79 04:35.670 --> 04:36.570 Bye 👋. 80 04:36.990 --> 04:37.260 Okay. 81 04:37.260 --> 04:38.280 So how do we do this? 82 04:38.460 --> 04:43.680 Well, remember, we need to wrap the options, or nest them, within an optgroup. 83 04:43.680 --> 04:46.410 So let's create an optgroup element. 84 04:46.940 --> 04:50.940 And let's take these three colors, and let's move them within it. 85 04:50.970 --> 04:55.400 Okay, so now we've nested it within an option group. But if we save this, go to the browser and open 86 04:55.400 --> 04:56.870 it up, it's just blank. 87 04:57.200 --> 05:00.170 We get a blank option group 🙈 - that doesn't help us. 88 05:00.290 --> 05:06.500 In order to actually give it a name, we need to assign it a label. And the label for this, because we're 89 05:06.500 --> 05:07.580 dealing with colors 90 05:07.700 --> 05:09.290 I'm just going to say is "colors". 91 05:09.500 --> 05:10.470 Let's refresh. 92 05:10.490 --> 05:11.210 Open it up. 93 05:11.210 --> 05:12.080 And there we go. 94 05:12.080 --> 05:13.420 So we can see it's bolded. 95 05:13.430 --> 05:15.350 The user can't even select colors. 96 05:15.380 --> 05:18.380 They know that it's a heading for the three colors below. 97 05:18.410 --> 05:20.300 I told you, it's not that difficult. 98 05:20.330 --> 05:22.190 Obviously we can do the same option. 99 05:22.190 --> 05:23.720 Option group. 100 05:23.720 --> 05:24.470 Group. 101 05:25.090 --> 05:27.880 And we can bring these three animals in it. 102 05:27.880 --> 05:30.010 So now we've nested it within an option group. 103 05:30.040 --> 05:33.250 We give this a label of animals. 104 05:33.580 --> 05:34.330 How's this? 105 05:34.360 --> 05:40.900 We open it up, and there we go, a much nicer list. Rather than muddling up colors and animals all into 106 05:40.900 --> 05:41.110 one, 107 05:41.110 --> 05:43.270 now we've got demarcated headings. 108 05:43.270 --> 05:44.380 How awesome. 109 05:44.740 --> 05:46.450 Let's keep marching on. 110 05:46.450 --> 05:52.300 The next point want to make is that if the option element has a value attribute, then that value will 111 05:52.300 --> 05:54.070 be sent to the server. 112 05:54.070 --> 05:56.410 But what happens if that value is omitted? 113 05:56.410 --> 06:02.530 Well, in that case, the content of the option element will be sent to the server instead. 114 06:02.530 --> 06:05.500 So the value attribute in a way is not needed, right. 115 06:05.500 --> 06:10.120 But you might find a reason to want to send a shorthand or different value to the server than what is 116 06:10.120 --> 06:11.980 visually shown in the select box. 117 06:11.980 --> 06:14.500 And for that reason you may want to use one. 118 06:14.680 --> 06:17.710 Ooh, I've actually just thought of a cool trick question. 119 06:18.010 --> 06:19.960 Let me hop over to the console and ask you. 120 06:20.170 --> 06:22.930 I just thought of a really cool trick question. 121 06:22.930 --> 06:23.230 Okay. 122 06:23.230 --> 06:24.920 So I thought let me jump back to the console. 123 06:24.920 --> 06:26.390 Let's try and submit this form. 124 06:26.390 --> 06:27.050 Okay, Look here. 125 06:27.050 --> 06:29.540 So we've got our form, we've got our select. 126 06:30.080 --> 06:35.300 Let's say we've got a button here of type submit, submit. 127 06:35.330 --> 06:35.480 Okay. 128 06:35.480 --> 06:36.710 I'm not worried about styling. 129 06:36.710 --> 06:37.730 Let's go to our browser. 130 06:38.490 --> 06:39.360 Let's expand this. 131 06:39.390 --> 06:41.460 Can you see that pink is selected? 132 06:41.580 --> 06:45.730 So it means when we click submit, it should submit in our GET request. 133 06:45.750 --> 06:46.770 But what? 134 06:46.770 --> 06:47.220 Can you see 135 06:47.220 --> 06:48.090 the URL? 136 06:48.120 --> 06:49.380 Nothing is submitted. 137 06:49.410 --> 06:50.070 Why? 138 06:50.100 --> 06:51.270 Can you figure it out? 139 06:52.130 --> 06:53.120 Try and figure it out. 140 06:53.150 --> 06:53.920 Why? 141 06:53.930 --> 06:58.220 You know, if we select hippo, submit, nothing is being submitted. 142 06:58.220 --> 06:58.940 Why? 143 07:00.720 --> 07:02.820 Pause the video, try and figure it out. 144 07:04.210 --> 07:05.230 I'll give you a hint. 145 07:05.260 --> 07:07.150 It's only one attribute that we need. 146 07:08.510 --> 07:09.020 All right. 147 07:09.020 --> 07:09.410 All right. 148 07:09.410 --> 07:10.370 I'll tell you the solution. 149 07:10.370 --> 07:14.540 The answer is we need a name attribute, right? 150 07:14.540 --> 07:19.100 Remember that everything gets sent to a server, and in order to get sent to a server, it has to be 151 07:19.100 --> 07:21.140 sent as name:value pairs. 152 07:21.140 --> 07:27.080 We've omitted the name, so the browser, the server, doesn't know what name, what information it all 153 07:27.080 --> 07:29.450 is, so it kind of sign anything to it. 154 07:29.660 --> 07:31.880 So we just need a name attribute. 155 07:32.810 --> 07:36.950 Let's give it a name of, um, type, for example. 156 07:36.980 --> 07:42.830 Now, if we go to the browser and we submit it works, the type of selection here is pink. 157 07:42.860 --> 07:45.710 The other thing is obviously those value attributes. 158 07:45.710 --> 07:51.230 I mean, pink is being submitted as pink because that's the actual text we have between the tags. 159 07:51.230 --> 07:58.400 But optionally, we could have a value attribute here and it could be funky pink, for example. 160 07:58.980 --> 08:04.620 And if we go to the browser and we submit pink now instead of pink being submitted, the value attribute 161 08:04.620 --> 08:05.700 will be replaced instead 162 08:05.700 --> 08:07.500 and that is, funky pink. 163 08:07.530 --> 08:11.650 I know, I know I'm covering a lot, but I'm having a lot of fun. 164 08:11.670 --> 08:12.510 We are almost done 165 08:12.510 --> 08:14.820 my dear students, thank you so much for sticking with me. 166 08:14.820 --> 08:22.050 The last point I want to make on the select element is ... common attributes are "size" and "multiple". By default, 167 08:22.080 --> 08:29.070 the height of the select box is enough to display a single value, so the optional size attribute provides 168 08:29.070 --> 08:36.240 control over how many options are visible when the select does not have focus - that's the size attribute. 169 08:36.270 --> 08:39.150 Then you can also see I've put there the multiple attribute. 170 08:39.180 --> 08:40.020 What is that? 171 08:40.050 --> 08:46.290 By adding the multiple attribute to the select element, you can allow the user to select multiple or 172 08:46.290 --> 08:47.790 several values. 173 08:47.820 --> 08:48.960 How do they do that? 174 08:48.960 --> 08:52.440 By using the default mechanism provided by the operating system. 175 08:52.440 --> 08:58.750 For example, holding down command or control and clicking multiple values on a desktop. 176 08:58.750 --> 09:00.760 Let me quickly show you. 177 09:00.790 --> 09:01.210 All right. 178 09:01.210 --> 09:01.840 We're back here. 179 09:01.870 --> 09:03.070 You know this code very well. 180 09:03.070 --> 09:06.340 This is the example we've been working through in this lecture. 181 09:06.430 --> 09:08.200 I just want to show you what the size does. 182 09:08.200 --> 09:12.130 So on the select elements itself, we can include an attribute of size. 183 09:12.160 --> 09:18.490 And let's put size of, I don't know, 2. If we go to the browser, we can see now that what's displayed 184 09:18.490 --> 09:21.640 to the user are now not one option, but two. 185 09:21.640 --> 09:23.170 And we can keep going, right? 186 09:23.170 --> 09:26.530 We can display five options if we wanted to. 187 09:27.070 --> 09:27.370 Right? 188 09:27.370 --> 09:27.940 And there we go. 189 09:27.940 --> 09:31.420 It obviously displays the option group label headers as well. 190 09:31.450 --> 09:32.560 Quite interesting. 191 09:32.860 --> 09:34.480 So that's what the size does. 192 09:34.870 --> 09:40.120 And then as I mentioned, we've got this multiple attribute, multiple, which is a boolean attribute. 193 09:40.120 --> 09:41.290 It's either there or it's not. 194 09:41.290 --> 09:44.680 You don't have to assign it anything, you don't have to say equals true. 195 09:45.260 --> 09:49.310 We just include it there on the actual main element. We can go to the browser, 196 09:49.310 --> 09:55.310 and now what's cool is we can maybe select leopard and rhino, and then submit. 197 09:55.310 --> 10:00.290 And you can see if we look at our URL bar, we've got Leopard and Rhino that was submitted. 198 10:00.990 --> 10:01.590 So there we go. 199 10:01.590 --> 10:02.820 That's how it's used. 200 10:03.510 --> 10:06.510 And I think this concludes the lecture. 201 10:06.540 --> 10:10.590 I know we're covering a lot in a short space of time, but I kind of feel you're getting good now. 202 10:10.620 --> 10:14.460 You know, we've we've covered a lot in this course already, and that's why I'm picking up the pace 203 10:14.460 --> 10:14.970 quite a bit. 204 10:15.420 --> 10:19.170 Hope you're having fun and I'll see you in the next lecture where I want to discuss now 205 10:19.170 --> 10:19.800 autocomplete. 206 10:19.830 --> 10:21.630 We've discussed the select box. 207 10:21.690 --> 10:24.390 I want to now talk about autocomplete boxes. 208 10:24.420 --> 10:25.020 See you now.