1 00:00:04,560 --> 00:00:07,730 Sometimes, when you're creating a form, you don't want 2 00:00:07,730 --> 00:00:10,240 the user to be able to type in text. 3 00:00:10,240 --> 00:00:15,420 Rather, you might want them to pick from some preset options that you define. 4 00:00:15,420 --> 00:00:18,580 Let's say that our imaginary web app is targeted 5 00:00:18,580 --> 00:00:21,890 at people like you, that are students of technology. 6 00:00:21,890 --> 00:00:27,460 We want to allow people to select from a predefined list of job roles. 7 00:00:27,460 --> 00:00:29,910 We're going to have a lot of job roles to 8 00:00:29,910 --> 00:00:32,550 chose from, so any time that you have a list of 9 00:00:32,550 --> 00:00:36,330 options that's longer than, say, four or five things, it's 10 00:00:36,330 --> 00:00:40,970 best to go with a select menu because it saves space. 11 00:00:40,970 --> 00:00:43,510 So, let's take a look at that in code. 12 00:00:43,510 --> 00:00:50,818 So let's scroll down here, and just under the biography, I'll make some 13 00:00:50,818 --> 00:00:58,139 space, and, let's first type a label, and I'll say this is a label for. 14 00:00:58,139 --> 00:01:00,206 [BLANK_AUDIO] 15 00:01:00,206 --> 00:01:02,081 Job. 16 00:01:02,081 --> 00:01:06,310 And inside of this label, I'll say, Job role. 17 00:01:08,820 --> 00:01:14,180 And then after that, I'll type a select element, and I'll give 18 00:01:14,180 --> 00:01:17,930 it an id of job because we want that to match the label. 19 00:01:19,030 --> 00:01:27,110 I'll give it a name of user_job and then I'll close the select element. 20 00:01:27,110 --> 00:01:30,430 Now, by itself, the select element won't do anything. 21 00:01:30,430 --> 00:01:33,820 This form element actually needs additional elements inside 22 00:01:33,820 --> 00:01:37,450 of it, exactly like an unordered list element. 23 00:01:37,450 --> 00:01:40,830 The elements we put inside are called option elements, 24 00:01:40,830 --> 00:01:45,370 so let's type up some options to choose from. 25 00:01:45,370 --> 00:01:51,506 So first, type the option element, and I'll give it a value of 26 00:01:51,506 --> 00:01:57,340 frontend_developer. 27 00:01:57,340 --> 00:02:02,900 And then inside of the two option tags, we'll type that out. 28 00:02:02,900 --> 00:02:08,700 We'll say Front-End Developer and I'll just copy 29 00:02:08,700 --> 00:02:13,700 and paste this a few times because we're just going to change the values here. 30 00:02:13,700 --> 00:02:19,450 So instead of frontend_developer let's say something like php_developer, and 31 00:02:19,450 --> 00:02:24,880 then we'll say, python_developer, and we can change these here as well. 32 00:02:24,880 --> 00:02:30,180 So we'll say PHP Developer and Python Developer. 33 00:02:30,180 --> 00:02:33,980 And, I've typed a few options here and we're going to type 34 00:02:33,980 --> 00:02:39,419 several more, but you've probably noticed that I'm using an attribute called value. 35 00:02:39,419 --> 00:02:44,330 Now, normally when you submit a form to 36 00:02:44,330 --> 00:02:47,900 server side code, each form element has an associated 37 00:02:47,900 --> 00:02:51,570 value for text inputs and text areas, that value 38 00:02:51,570 --> 00:02:54,730 is whatever the user types in to the field. 39 00:02:54,730 --> 00:02:58,540 However, since we're creating these predefined options, we need to 40 00:02:58,540 --> 00:03:02,980 specify what the value should look like when it's submitted. 41 00:03:02,980 --> 00:03:06,090 So, let's type up several more options. 42 00:03:07,300 --> 00:03:15,280 So, I'll just paste that a few more times and let's say rails_developer 43 00:03:15,280 --> 00:03:20,550 and we'll come back and change all of the description between the option tags. 44 00:03:20,550 --> 00:03:23,857 So, we'll say rails_developer. 45 00:03:23,857 --> 00:03:30,570 I'll say web_designer, and let's add another one. 46 00:03:30,570 --> 00:03:36,250 I'll say wordpress_developer, and I want to add a 47 00:03:36,250 --> 00:03:41,025 few mobile roles here, so we'll say, 48 00:03:41,025 --> 00:03:47,586 android_developer, ios_developer, 49 00:03:47,586 --> 00:03:52,310 and then mobile_designer. 50 00:03:52,310 --> 00:03:56,592 And then let's add two more for business and we'll say 51 00:03:56,592 --> 00:04:03,720 business_owner and freelancer. 52 00:04:03,720 --> 00:04:08,610 So now we need to change all of the descriptions 53 00:04:08,610 --> 00:04:13,775 between here, so for rails_developer we'll say, Rails Developer. 54 00:04:13,775 --> 00:04:16,470 For web_designer, we'll say Web Designer. 55 00:04:19,660 --> 00:04:29,170 We'll do WordPress, Android, iOS, and then Mobile Designer, 56 00:04:31,830 --> 00:04:37,100 and then Business Owner, and then finally, Freelancer, 57 00:04:40,760 --> 00:04:42,360 so we'll save that out. 58 00:04:42,360 --> 00:04:47,230 Switch over to our form and refresh, and if we scroll down here, you can see that 59 00:04:47,230 --> 00:04:54,510 we now have this job role label along with the select menu that we just created. 60 00:04:54,510 --> 00:05:00,050 And this is a good start, but this list is a little bit difficult to read quickly. 61 00:05:00,050 --> 00:05:05,190 We can organize our list into logical groups with the optgroup element. 62 00:05:05,190 --> 00:05:07,650 So lets try to organize this list. 63 00:05:07,650 --> 00:05:13,200 We'll switch back, and first, going to add 64 00:05:13,200 --> 00:05:18,230 an optgroup element and I'll use the label 65 00:05:18,230 --> 00:05:23,590 attribute, not the label element and we'll say Web. 66 00:05:26,220 --> 00:05:31,550 So this will have an associated closing tag and we want to 67 00:05:31,550 --> 00:05:37,140 wrap all of the web job roles, so let's do that, and we'll indent all of these. 68 00:05:39,500 --> 00:05:43,390 We want another optgroup, and this time the label will 69 00:05:43,390 --> 00:05:48,370 be, Mobile, and we'll wrap all of the mobile job roles, 70 00:05:50,690 --> 00:05:51,820 and then indent these. 71 00:05:51,820 --> 00:05:57,855 And then finally, we'll have an optgroup for business. 72 00:05:57,855 --> 00:06:03,974 [SOUND] So let's close that and 73 00:06:03,974 --> 00:06:09,612 then indent both of these. 74 00:06:09,612 --> 00:06:10,523 There we go. 75 00:06:10,523 --> 00:06:16,265 So now if I save that out and switch that back to the browser and refresh, you 76 00:06:16,265 --> 00:06:19,455 can see that the label attribute we used on 77 00:06:19,455 --> 00:06:23,900 our optgroup or option groups has been applied here. 78 00:06:23,900 --> 00:06:27,830 However, those option groups are not selectable. 79 00:06:29,390 --> 00:06:34,920 We just have the various options grouped underneath each optgroup. 80 00:06:34,920 --> 00:06:37,170 That's about it for the select element. 81 00:06:37,170 --> 00:06:39,300 Next, we'll learn about radio buttons.