Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
HTML Elements
- 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. - 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. - 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.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up