1 00:00:02,070 --> 00:00:03,510 Now, the last element, 2 00:00:03,510 --> 00:00:06,650 the last HTML element I want to have a look at 3 00:00:06,650 --> 00:00:08,740 is the dropdown field. 4 00:00:08,740 --> 00:00:10,960 Which is also often a good choice, 5 00:00:10,960 --> 00:00:13,710 if you have multiple values to choose from, 6 00:00:13,710 --> 00:00:15,960 and you will want to give the user a 7 00:00:15,960 --> 00:00:18,320 dropdown instead of radio buttons, 8 00:00:18,320 --> 00:00:21,180 maybe because it's a long list of values 9 00:00:21,180 --> 00:00:24,445 or simply because you prefer a dropdown. 10 00:00:24,445 --> 00:00:29,445 For this let's say right here, after this horizontal line. 11 00:00:29,640 --> 00:00:33,390 We want to render, we want to display such a dropdown. 12 00:00:33,390 --> 00:00:36,300 And we do this with the select element. 13 00:00:36,300 --> 00:00:40,750 So that's yet another new HTML element, 14 00:00:40,750 --> 00:00:44,570 the select element then takes different options. 15 00:00:44,570 --> 00:00:48,340 So it's a bit like the unordered list with the list items 16 00:00:48,340 --> 00:00:51,320 or the ordered list with the list items. 17 00:00:51,320 --> 00:00:53,470 We have a wrapper element, 18 00:00:53,470 --> 00:00:54,770 the select element, 19 00:00:54,770 --> 00:00:57,180 and then some child elements here, 20 00:00:57,180 --> 00:00:58,890 the option elements. 21 00:00:58,890 --> 00:01:02,150 Now the option elements contain the text, 22 00:01:02,150 --> 00:01:04,459 which will be displayed in the dropdown 23 00:01:04,459 --> 00:01:06,710 for the different options. 24 00:01:06,710 --> 00:01:09,710 So let's say here again, with a label, 25 00:01:09,710 --> 00:01:13,170 we want to let the users select a value. 26 00:01:13,170 --> 00:01:16,523 Let's say the favorite color, for whatever reason. 27 00:01:17,410 --> 00:01:22,003 Then here we could have blue as one option, 28 00:01:22,003 --> 00:01:25,580 we can have black as one option, 29 00:01:25,580 --> 00:01:27,770 we can have red as one option, 30 00:01:27,770 --> 00:01:30,003 and whichever other options you want. 31 00:01:31,000 --> 00:01:33,010 Again, we should connect the label with 32 00:01:33,010 --> 00:01:36,010 the for attribute and an ID, 33 00:01:36,010 --> 00:01:37,940 and here I'll save favorite color 34 00:01:39,350 --> 00:01:43,570 and set the ID equal to favorite color. 35 00:01:43,570 --> 00:01:46,020 And if we do that and save this, 36 00:01:46,020 --> 00:01:47,930 we now got this dropdown here, 37 00:01:47,930 --> 00:01:50,896 where we see our different options. 38 00:01:50,896 --> 00:01:55,200 Now drop downs are a bit more difficult to style because 39 00:01:55,200 --> 00:01:57,430 they are more complex because we have 40 00:01:57,430 --> 00:01:59,870 this overlay which opens up, 41 00:01:59,870 --> 00:02:02,740 but we can still apply some basic styling. 42 00:02:02,740 --> 00:02:05,940 And I want to use the same styling as for my other elements. 43 00:02:05,940 --> 00:02:09,630 So I'll not just select input and text area here, 44 00:02:09,630 --> 00:02:12,393 but also the select dropdown. 45 00:02:14,280 --> 00:02:15,880 Not for focusing though, 46 00:02:15,880 --> 00:02:18,163 just for the general styles. 47 00:02:19,350 --> 00:02:23,440 And with that, now we've got this dropdown here. 48 00:02:23,440 --> 00:02:25,500 So now we can select this, 49 00:02:25,500 --> 00:02:28,200 just as with all the other input elements. 50 00:02:28,200 --> 00:02:31,080 We also should give it a name to have this identifier, 51 00:02:31,080 --> 00:02:32,950 which can be used on the server. 52 00:02:32,950 --> 00:02:36,500 And here the name is not added on the options, 53 00:02:36,500 --> 00:02:38,800 but on the select as a whole, 54 00:02:38,800 --> 00:02:40,840 which hopefully makes sense because 55 00:02:40,840 --> 00:02:43,990 we have one option that is selected in the end. 56 00:02:43,990 --> 00:02:45,680 Just as for the radio buttons, 57 00:02:45,680 --> 00:02:48,491 we used the same name for all the buttons here. 58 00:02:48,491 --> 00:02:51,500 We use the same name for all the options, 59 00:02:51,500 --> 00:02:54,110 just not by adding it to all the options. 60 00:02:54,110 --> 00:02:55,910 But since we have this wrapper, 61 00:02:55,910 --> 00:02:59,040 by adding it once to that wrapper as a whole, 62 00:02:59,040 --> 00:03:02,705 and here I'll then have my favorite color, 63 00:03:02,705 --> 00:03:05,973 or whatever identifier you want to use here. 64 00:03:07,430 --> 00:03:09,120 Now, if we save this, 65 00:03:09,120 --> 00:03:11,620 if I select blue here and submit this, 66 00:03:11,620 --> 00:03:13,880 you see favorite color equals blue, 67 00:03:13,880 --> 00:03:15,979 is part of the submitted data. 68 00:03:15,979 --> 00:03:17,211 Now by default, 69 00:03:17,211 --> 00:03:19,800 the value which is submitted here 70 00:03:19,800 --> 00:03:22,380 is the value you have in your option. 71 00:03:22,380 --> 00:03:25,470 If you want to have a difference between what you display to 72 00:03:25,470 --> 00:03:28,373 your users and the machine readable 73 00:03:28,373 --> 00:03:31,023 value that should be sent to a server, 74 00:03:31,023 --> 00:03:35,090 you can add a value attribute to the different options. 75 00:03:35,090 --> 00:03:37,790 And here you could just write blue like this, 76 00:03:37,790 --> 00:03:40,150 and then you could have a lengthier text 77 00:03:40,150 --> 00:03:43,810 of my favorite color is blue here. 78 00:03:43,810 --> 00:03:46,770 Which is typically not what you want to send to a server, 79 00:03:46,770 --> 00:03:50,093 There you want to have short identifiers like this. 80 00:03:52,660 --> 00:03:55,130 So you can set values like this, 81 00:03:55,130 --> 00:03:58,530 and then it's these values which will be sent to a server. 82 00:03:58,530 --> 00:04:00,640 It's what you have between the opening 83 00:04:00,640 --> 00:04:02,630 and closing option tag that will 84 00:04:02,630 --> 00:04:05,060 be displayed to the user though. 85 00:04:05,060 --> 00:04:08,600 So with that, we now see these options, 86 00:04:08,600 --> 00:04:10,830 but if I select my favorite color is blue 87 00:04:10,830 --> 00:04:14,640 and click submit, we see just this blue identifier, 88 00:04:14,640 --> 00:04:16,510 which I entered as a value, 89 00:04:16,510 --> 00:04:18,800 is sent to the server. 90 00:04:18,800 --> 00:04:22,470 And that's this select HTML element, 91 00:04:22,470 --> 00:04:25,760 which is basically an alternative to the radio buttons. 92 00:04:25,760 --> 00:04:27,563 If you want to look at it like this.