Select Menus6:40 with Nick Pettit
A text input isn't ideal for every situation. The select element can be used in cases where the user should pick from a set of predefined options.
- <select> - The select element renders a drop-down menu that contains selectable options. This type of form control is ideal for scenarios where the user must choose one option from a preset list of 5 or more choices.
- <option> - The option element represents one of the choices that a user can choose in a select menu. It should always be nested inside of a select element.
- <optgroup> - The optgroup element wraps one or more option elements and helps to create logical groups. The label attribute specifies the text that the optgroup should display above the nested options.
Sometimes, when you're creating a form, you don't want 0:04 the user to be able to type in text. 0:07 Rather, you might want them to pick from some preset options that you define. 0:10 Let's say that our imaginary web app is targeted 0:15 at people like you, that are students of technology. 0:18 We want to allow people to select from a predefined list of job roles. 0:21 We're going to have a lot of job roles to 0:27 chose from, so any time that you have a list of 0:29 options that's longer than, say, four or five things, it's 0:32 best to go with a select menu because it saves space. 0:36 So, let's take a look at that in code. 0:40 So let's scroll down here, and just under the biography, I'll make some 0:43 space, and, let's first type a label, and I'll say this is a label for. 0:50 [BLANK_AUDIO] 0:58 Job. 1:00 And inside of this label, I'll say, Job role. 1:02 And then after that, I'll type a select element, and I'll give 1:08 it an id of job because we want that to match the label. 1:14 I'll give it a name of user_job and then I'll close the select element. 1:19 Now, by itself, the select element won't do anything. 1:27 This form element actually needs additional elements inside 1:30 of it, exactly like an unordered list element. 1:33 The elements we put inside are called option elements, 1:37 so let's type up some options to choose from. 1:40 So first, type the option element, and I'll give it a value of 1:45 frontend_developer. 1:51 And then inside of the two option tags, we'll type that out. 1:57 We'll say Front-End Developer and I'll just copy 2:02 and paste this a few times because we're just going to change the values here. 2:08 So instead of frontend_developer let's say something like php_developer, and 2:13 then we'll say, python_developer, and we can change these here as well. 2:19 So we'll say PHP Developer and Python Developer. 2:24 And, I've typed a few options here and we're going to type 2:30 several more, but you've probably noticed that I'm using an attribute called value. 2:33 Now, normally when you submit a form to 2:39 server side code, each form element has an associated 2:44 value for text inputs and text areas, that value 2:47 is whatever the user types in to the field. 2:51 However, since we're creating these predefined options, we need to 2:54 specify what the value should look like when it's submitted. 2:58 So, let's type up several more options. 3:02 So, I'll just paste that a few more times and let's say rails_developer 3:07 and we'll come back and change all of the description between the option tags. 3:15 So, we'll say rails_developer. 3:20 I'll say web_designer, and let's add another one. 3:23 I'll say wordpress_developer, and I want to add a 3:30 few mobile roles here, so we'll say, 3:36 android_developer, ios_developer, 3:41 and then mobile_designer. 3:47 And then let's add two more for business and we'll say 3:52 business_owner and freelancer. 3:56 So now we need to change all of the descriptions 4:03 between here, so for rails_developer we'll say, Rails Developer. 4:08 For web_designer, we'll say Web Designer. 4:13 We'll do WordPress, Android, iOS, and then Mobile Designer, 4:19 and then Business Owner, and then finally, Freelancer, 4:31 so we'll save that out. 4:40 Switch over to our form and refresh, and if we scroll down here, you can see that 4:42 we now have this job role label along with the select menu that we just created. 4:47 And this is a good start, but this list is a little bit difficult to read quickly. 4:54 We can organize our list into logical groups with the optgroup element. 5:00 So lets try to organize this list. 5:05 We'll switch back, and first, going to add 5:07 an optgroup element and I'll use the label 5:13 attribute, not the label element and we'll say Web. 5:18 So this will have an associated closing tag and we want to 5:26 wrap all of the web job roles, so let's do that, and we'll indent all of these. 5:31 We want another optgroup, and this time the label will 5:39 be, Mobile, and we'll wrap all of the mobile job roles, 5:43 and then indent these. 5:50 And then finally, we'll have an optgroup for business. 5:51 [SOUND] So let's close that and 5:57 then indent both of these. 6:03 There we go. 6:09 So now if I save that out and switch that back to the browser and refresh, you 6:10 can see that the label attribute we used on 6:16 our optgroup or option groups has been applied here. 6:19 However, those option groups are not selectable. 6:23 We just have the various options grouped underneath each optgroup. 6:29 That's about it for the select element. 6:34 Next, we'll learn about radio buttons. 6:37
You need to sign up for Treehouse in order to download course files.Sign up