Preview
Video Player
00:00
00:00
Select Menus
6:40A 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.
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