Preview
Video Player
00:00
00:00
Fieldsets and Legends
3:39Sometimes, certain form controls belong together in a logical grouping. Form controls can be grouped together using fieldsets and then labeled using a legend.
Labels help to organize forms a lot.
0:00
But, we can do better.
0:02
Sometimes, certain form controls belong
together in a logical grouping.
0:04
For example, if our sign up form included
a physical mailing address, we
0:09
would want to make sure all of that data
was visually grouped together.
0:14
In our case, we want to make two groups.
0:18
One for basic information, and one for the
information that will show
0:20
up on a user's profile, after they've
logged into our imaginary app.
0:25
We can do that by wrapping our form
controls in the field set element.
0:30
So let's try that out.
0:35
Just after the h1, I'm going to type
0:37
a fieldset, element, and it will
automatically close.
0:41
But I don't want it to close right there.
0:47
I actually want to wrap, all of these form
elements in a fieldset.
0:51
So I'm going to highlight all of those and
indent them.
0:58
And then I want to add a second fieldset.
1:02
[BLANK_AUDIO]
1:04
And I'll move the closing tag,
1:08
[BLANK_AUDIO]
1:10
Just after our text area.
1:12
And I'll indent that as well.
1:16
We'll leave the button outside of any kind
of fieldsets.
1:19
But all of our other form controls will be
inside one of these two fieldsets.
1:22
So, let's save that out.
1:27
Switch back to the preview, and refresh.
1:29
And as you can see there's now some slight
spacing, and some padding
1:33
and margin adjustments that have been
made,
1:38
based on our fieldsets that we added.
1:40
These two fieldsets created logical
groupings, but
1:43
it would be nice to label them.
1:46
We can do this using the legend element.
1:48
So, let's try that out.
1:52
I'm going to switch over to my work space
here.
1:52
And, just after my fieldset, but just
before the
1:57
first label element, I'm going to type the
legend tag.
2:01
And inside of that, I'm going to say Your
basic info.
2:08
Now, I also want to number each one of
2:14
these sections as if they were steps in a
process.
2:17
So, I'm going to add a span element, just
like that.
2:20
And I'm going to give it the class,
2:26
number, because inside of our CSS, there
is a number class
2:30
that will style whatever is inside of this
span very nicely.
2:36
So I'm going to say this is step 1.
2:40
And then I'll have a space just after my
span.
2:42
And then I'll say, Your basic info.
2:46
And all of that, should go inside of this
legend.
2:49
So, let's copy this line, and let's add it
2:53
to our other field set, and then adjust
what's inside.
2:57
So, this will be step 2.
3:01
And we'll say, Your profile.
3:03
[SOUND] So, let's save that out.
3:07
Switch back to the browser, and refresh
the page.
3:12
And as you can see, we now have these nice
3:16
legends that are labeling each one of our
field sets.
3:19
So we have, Your basic info, and then,
Your profile.
3:23
So, that's great.
3:27
Our form looks a lot more organized now
and we're ready to add more controls.
3:29
When we add form controls from now on,
we'll make sure to label them as we go.
3:34