Fieldset & Legend

[00:00:00]
>> Jen Kramer: So so far we've coded our name, our phone number, and email, some information. And you see that at the top here, we actually have a header that says your contact information. This is some information like that. And then we have a second part of the form that's gonna ask about how you'd like to be abducted by aliens.

[00:00:16]
Okay? So this is actually two parts of the form. And one of the things that we can do to set off these two parts of the form, there is actually a tag for this and it's called the field set tag and so let's go ahead and add a field set tag.

[00:00:32]
This will also help with accessibility. It also helps with just understanding the form in general, when you look at the form, you kind of go, you need information and then you need to know about my abduction experience. And so it clearly breaks the form into two chunks as you fill it out, rather than I'm sure you've all seen this, the form, the endless form that just goes on forever and ever and you never know what they're going to ask you next.

[00:00:57]
And it's just kind of a bad experience. So using fields set is a nice way to break up your form into manageable chunks. People kind of know what's coming. So guess what the fields set tag looks like.
>> Jen Kramer: Field set, sweet and it's going to start there right after the forum tag in this case.

[00:01:16]
And where's this field set tag going to end?
>> Speaker 2: At your abduction.
>> Jen Kramer: Just right before our abduction information /fieldset, okay?
>> Jen Kramer: And you can indent everything. What I just did is I highlighted all the stuff from field set to slash field set and then hit my tab key and that indented everything one level, right?

[00:01:43]
Once you have a field set in place, just go ahead and save that. Let's take a quick peek at that. You'll see that puts a nice little box around us.
>> Jen Kramer: Our forum is looking really ugly. I have my name, my phone number and my email address. They are kinda wrapping around once again, no sweat.

[00:02:05]
That's all good. We'll fix it. So the other thing that we like to add with the field set is a label in, sorry, not a label. It's a legend. And the legend is designed to say what this field set is doing here, right? So rather than an h2, we're going to change that tag to legend.

[00:02:26]
Legend, your contact information slash legend.
>> Jen Kramer: And once you get that in place and you refresh, you'll see here there's the words your contact information. And it's there's a little box going around all of your contact information, okay?
>> Speaker 3: So why is that better? What does legend do?

[00:02:50]
>> Jen Kramer: So legend is describing our fieldset. So the fieldset is, this is a group and then we needed sort of a title for the fieldset and that's what the legend tag is doing, serving as that title.
>> Speaker 3: Works hand in hand with field set.
>> Jen Kramer: Works hand in hand with field set.

[00:03:05]
You'll never see legend hanging out there by itself. It's always inside of a field set.
>> Jen Kramer: Good. Why don't you take two minutes now and see if you can do the same thing, field set in legend for the second part of the forum about your abduction experience. Go ahead and set up a field set and a legend tag for about your experience.