Before we get into widgets, I want to talk about this fieldset element in a lot more detail because
on a lot of complex forms, even the one that we looked at on Mailchimp, you're going to be seeing
this element a lot.
Well, firstly, what is the fieldset element?
It's very simple.
It's just a nice way to create groups of widgets that share the same purpose.
So in other words, it's useful for styling and semantic purposes. And because it's used to kind of
give you structure in your form, it helps you and others understand your entire form.
And that's why usually it's very useful when we're dealing with very large, complex forms because it
adds structure.
But this is not all folks.
The legend element is usually used with the fieldset element. And all it does, is it really adds a caption
for the fieldset element.
It adds a label. It adds a heading.
So from my point of view, the fieldset and legend are one good pair.
Awww... and the best part is that any content will fit well within this container.
You don't only have to use it for form widgets.
So just remember, by using the fieldset along with the legend element, you can make your forms more
readable and easier to comprehend.
And this can especially be useful on long forms containing many sections.
"Okay, Clyde, I've got it.
But how does it work?"
Very, very simple.
The basic tag is written like this.
You've got your opening fieldset and your closing tag.
And the legend tag, remember, is used with the fieldset
very often.
You don't have to,
it's only optional.
But if we want to use it, how do we?
Well, the legend should be placed next.
And of course, after the legend, you can place your other HTML elements.
In our case, our form elements, our form widgets.
So that's generally how it looks.
Pretty simple. But what super duper interesting, and a lot of people don't know, is that fieldset does
not have to be used only with forms.
In fact, high level, I can think of three different places
you can use it. You can use it to wrap content, you can use it to wrap images, and you can use it,
of course, to wrap form widgets.
So there we go, very high level.
Let me hop over to the editor and let's see this in action, so you can kind of see what the fieldset and
legend look like.