1 00:00:07,120 --> 00:00:08,290 In this video. 2 00:00:08,290 --> 00:00:11,710 Let's talk about option groups. 3 00:00:12,520 --> 00:00:15,940 We are still under HTML forms. 4 00:00:16,210 --> 00:00:19,390 So what are option groups? 5 00:00:19,780 --> 00:00:25,330 Well, as you move on, we are improving some of the concept. 6 00:00:25,510 --> 00:00:34,120 In the previous video, we talked about third set, which can be used to improve using the redo button 7 00:00:34,120 --> 00:00:35,800 and then the checkboxes. 8 00:00:36,390 --> 00:00:45,450 And for the option groups, we can use also to improve the options that we want the user to choose a 9 00:00:45,450 --> 00:00:46,440 value from. 10 00:00:46,770 --> 00:00:49,520 So let me show you where we can improve. 11 00:00:49,530 --> 00:00:54,780 Back to this example for the single and then the multiple select. 12 00:00:54,900 --> 00:00:57,300 And I have open it as that. 13 00:00:57,720 --> 00:01:05,610 So let's say that we want the user also to choose from other options, for example, favorite colors. 14 00:01:06,000 --> 00:01:09,840 Are we going to add as color over here? 15 00:01:09,870 --> 00:01:10,710 Let me see. 16 00:01:10,710 --> 00:01:14,870 Red and provide red here with this one. 17 00:01:14,880 --> 00:01:16,570 Everything works fine. 18 00:01:16,590 --> 00:01:20,860 But as you can see, these data are not related. 19 00:01:20,880 --> 00:01:26,400 We have programming languages and we have color in the mix, so we need to avoid this. 20 00:01:26,670 --> 00:01:34,890 And one solution is we can create different single select option for favorite colors. 21 00:01:35,400 --> 00:01:45,450 And let's say that we have four data that is favorite programming languages, favorite color, hobbies 22 00:01:45,450 --> 00:01:46,800 and others. 23 00:01:47,010 --> 00:01:52,020 Are we going to create single select for each of these? 24 00:01:52,740 --> 00:01:54,570 Well, we can do that. 25 00:01:54,720 --> 00:01:58,020 But in programming, we call something dry. 26 00:01:58,050 --> 00:01:58,750 D. 27 00:01:58,770 --> 00:01:59,920 R y. 28 00:01:59,940 --> 00:02:00,660 Meaning? 29 00:02:00,660 --> 00:02:03,240 Don't repeat yourself. 30 00:02:03,990 --> 00:02:09,570 As we move on, I will show you how we can make our code more readable. 31 00:02:09,600 --> 00:02:18,870 But for the meantime, let's follow the normal flow or the basic flow for us to understand the concept. 32 00:02:19,350 --> 00:02:28,140 So we are going to use what is called option groups to improve, avoiding creating multiple single select 33 00:02:28,140 --> 00:02:30,510 like why the multiple select? 34 00:02:30,630 --> 00:02:38,430 I'm going to create one file and I'll call it as field set dot HTML. 35 00:02:39,830 --> 00:02:45,620 And as always scaffold and use food set. 36 00:02:47,840 --> 00:02:50,180 And I'm going to provide each one. 37 00:02:50,180 --> 00:02:51,590 As for what set? 38 00:02:52,840 --> 00:02:59,260 And let me underline it as that's and comment as field set. 39 00:02:59,290 --> 00:03:01,720 Let me open it in the browser. 40 00:03:03,050 --> 00:03:14,660 So the logic here is we are going to allow a user to submit different data that is favorite programming 41 00:03:14,660 --> 00:03:19,880 languages or favorite color or favorite foods. 42 00:03:20,150 --> 00:03:21,020 Let's see. 43 00:03:21,290 --> 00:03:25,460 So the first one is we bring in the label. 44 00:03:26,710 --> 00:03:30,310 And I would say select your favorite. 45 00:03:30,610 --> 00:03:38,500 As you can see here that I'm not specifying, for example, select your favorite color or favorite programming 46 00:03:38,500 --> 00:03:41,050 languages or favorite hobby. 47 00:03:41,470 --> 00:03:44,140 Going to be general concept here. 48 00:03:44,500 --> 00:03:51,880 So the next one is we bring in what is called the select and let's remove all these ones. 49 00:03:53,390 --> 00:04:00,650 And inside we are going to provide what is called option group. 50 00:04:01,070 --> 00:04:04,010 So here as option group. 51 00:04:04,880 --> 00:04:09,630 And for the option group, we are going to provide a label. 52 00:04:09,650 --> 00:04:18,079 The label is going to be the data we want the user to choose from, let's say, color. 53 00:04:18,810 --> 00:04:23,240 And inside we are going to provide the colors. 54 00:04:23,250 --> 00:04:25,830 So it's going to be options. 55 00:04:26,100 --> 00:04:28,020 And I would say red. 56 00:04:29,940 --> 00:04:33,840 And let me add more colors. 57 00:04:34,050 --> 00:04:36,810 And I will say yellow. 58 00:04:37,630 --> 00:04:39,580 And yellow here. 59 00:04:42,000 --> 00:04:43,590 And pink. 60 00:04:43,950 --> 00:04:47,250 I will say pink also here. 61 00:04:47,400 --> 00:04:49,920 Save it and let's have a look. 62 00:04:50,340 --> 00:04:57,350 As you can see, we have the label, but the label is being grayed out. 63 00:04:57,360 --> 00:04:58,470 We cannot select. 64 00:04:58,470 --> 00:05:01,050 So it's like a title for this. 65 00:05:01,050 --> 00:05:05,280 And let's say I want to create for programming languages. 66 00:05:05,280 --> 00:05:08,520 I'm going to create another option group. 67 00:05:08,640 --> 00:05:17,250 So for this, I can see favorite color and I'm going to copy everything inside the select for the next 68 00:05:17,250 --> 00:05:17,730 data. 69 00:05:17,730 --> 00:05:22,920 And I will say, Favorite hobby or let me say favorite. 70 00:05:23,810 --> 00:05:25,700 Fruit or fruit. 71 00:05:26,780 --> 00:05:30,110 So here as fruit. 72 00:05:30,980 --> 00:05:31,790 Do you get it? 73 00:05:31,820 --> 00:05:32,390 Yeah. 74 00:05:32,660 --> 00:05:36,290 And I'm going to change this one to orange. 75 00:05:39,070 --> 00:05:41,680 And here as arranged. 76 00:05:43,060 --> 00:05:45,280 And let me copy this. 77 00:05:45,820 --> 00:05:47,860 Replace with this one. 78 00:05:47,890 --> 00:05:51,370 Change this one to banana. 79 00:05:53,580 --> 00:06:01,260 And change this one to Strawberry or I need to change this one to Strawberry also. 80 00:06:01,530 --> 00:06:01,920 All right. 81 00:06:01,920 --> 00:06:03,680 So this one, let's see. 82 00:06:03,690 --> 00:06:07,530 As you can see, we have the color and we have the fruit. 83 00:06:07,530 --> 00:06:11,640 And I can add one more option group. 84 00:06:12,340 --> 00:06:14,140 So this one going to be. 85 00:06:15,090 --> 00:06:18,270 Languages and I'm speaking. 86 00:06:19,030 --> 00:06:22,450 In respect to programming languages. 87 00:06:25,440 --> 00:06:25,620 Right. 88 00:06:25,620 --> 00:06:29,080 Stats and JavaScript. 89 00:06:29,100 --> 00:06:30,420 Our best friend. 90 00:06:34,080 --> 00:06:41,160 And I provide Node.js, which is not a programming language, but instead it is a JavaScript runtime 91 00:06:41,160 --> 00:06:43,620 and I would say Python. 92 00:06:44,460 --> 00:06:46,120 So let's see the effect. 93 00:06:46,140 --> 00:06:49,560 Now, as you can see, this is what we have. 94 00:06:50,260 --> 00:06:54,970 The last concept I want to show you is called data lists. 95 00:06:55,000 --> 00:06:57,190 Let's continue on in the next video.