Here we are, in Visual Studio Code.
I've got an empty folder open called FIELDSET and I've just got one image in this folder, a PNG that I've
just created.
"Forms are awesome and yes, I really do hope you're enjoying this course", and you'll see how we use that
in a second.
So fieldset elements can be used on things other than just forms, and they commonly are.
They are very, very powerful.
So let me show you an example.
Firstly, they can be used to wrap any HTML content.
Let's just call our first file,
fieldset1.
See here we are.
We've got an HTML file, called fieldset1. And I want it to be very, very simple.
Let's just create HTML. Within here,
let's have a body and you guessed it, let's use our fieldset.
And let's have a paragraph and then just some lorem ipsum.
Very, very simple.
Let's go live.
You'll see this on the browser.
Can you see what it's done?
It's given everything a cool looking border, straight out of the box.
How cool is that 😎?
Let's go back here.
What I want to do, is let's just provide a bit of styling.
And let's just reduce the whole width.
I don't want it going across the whole screen.
Okay, let's adjust some margin.
We can center it.
Let's go back.
There we go.
How cool is it?
That's how fieldset
works.
But you may be thinking, what about the legend?
Well, that's a great question.
So let's add the legend.
I don't know.
A Funny Joke.
Let's go back to the browser,
and that's how it looks.
It literally adds that cool caption, that title to your fieldset.
Okay, great.
Clyde.
That's content.
But now the next thing it can wrap are images.
Okay, so how would we go about wrapping an image within a fieldset?
Well, firstly, let's copy and save this file.
But now let's call it fieldset2.
There we go.
Let's get rid of that.
So for a legend, for the title of our image, let's just say "A cool looking form image".
Very simple.
Now, we don't want a paragraph, do we?
We want an image.
The source of the image is in the same directory, and it's called "forms_are_awesome.PNG".
So there we go.
You're going to have a bit of a problem here.
Let me just get rid of the body styling.
Let's go to the browser.
Oh, we are on fieldset1,
let me just change it to fieldset2.
And it's just massive.
So let's just quickly style this and you can see the fieldset in a bit more detail. And often I create
root variables.
It's almost like using variables with CSS.
Very, very good thing to do because it just saves you a ton of time later, especially when sites start
becoming really, really complex.
So I only want this image to be 700 pixels.
I don't want to go crazy with this thing.
What do I want to style next? Well, let's style the fieldset itself.
I want to text-align everything to the center, and I want the width to be the width we defined (i.e. the root variable).
And then I want everything centered.
I think that's it for fieldset.
And then lastly, I just want to affect the image, and I want the image to be a certain width and I want
that width to be the one we defined above.
I think this will look a lot better.
Let's go to the browser.
Much better.
How awesome is this?
You can see we've centered the legend.
A cool looking form,
image, forms are awesome.
Whew. Can you see, or
start to see how useful this fieldset is.
It just really creates a nice feel.
Anyways, the moment you've all been waiting for ...
drumroll 🥁 ... FORMS!
How do we use the fieldset and legend with forms?
Well, very, very easily.
Let's go to our Visual Studio Code
once again, it's copy/paste, and let's call this fieldset3.
Let's get rid of all the styling.
I'm just going to keep it here because we're probably going to have to style something related in here.
Let's delete the fieldset, and let's build a form.
We don't need an action.
We're not sending it anywhere.
And let's say in your form you're asking the user to pick their favorite color.
So this would be a good opportune moment to think about a fieldset, because we're going to group all
the radio controls within one section, within one heading,
right?
So it's a good, good opportunity for fieldset. The legend comes next, as you know, and we're asking the
user for their favorite color.
And now we can start building our form, my dear students.
And because a form is effectively just HTML markup, we have a lot of power, a lot of flexibility in
or as to how we want to build the form.
So here, just to show you something different,
why don't we have paragraph elements. And within the paragraph, each paragraph element, we can insert
our input.
I want this to be of type radio and I know we haven't gone through this yet, but don't worry, we're
going to get into a lot more detail later in the course about what this means, and how it works
but for now, sit back and just see how the fieldset and legend can label everything.
It's very, very cool.
Let's do a label because it's good practice.
This has to be the same as the ID of the input.
So we actually haven't got an ID here.
So let me put an ID in. Let's say this is going to be blue and this can be the color blue that the user
chooses.
Very, very simple.
And all I want to do is copy this entire section and let's paste it.
But instead of it being blue, let's just make it green.
How's that?
And we can do even one more.
Instead of making a green, why don't we make it yellow.
I'm not even going to put a submit button or anything.
I just want to show you what it looks like.
And in styling, the only thing I want to do is I don't want the fieldset stretched across the entire
screen, and that's all happened by default.
So all I want to do is target the fieldset element and I want to set its width
to 50% of the screen.
Very simple.
And then, of course, I always like centering things.
Let's go to the browser.
We are on fieldset3 now, and ... BOOM 💥.
How cool is that?
(sound: Mission Completed)
And you can click on Blue, Green and Yellow. Man, that's cool.
So there you go.
Proof is in the pudding.
We've just seen fieldset has wide ranging uses, and is a very, very useful element for you to know in your
career, but we're not quite done with it.
There are just a few more things I want to discuss about the fieldset element.