Welcome back.
And let's continue talking about the fieldset element.
Remember, it's an easy way to create groups of widgets that share the same purpose.
And this is useful for styling and semantic purposes.
And we've seen how versatile the fieldset element can be.
It doesn't only have to be used with forms.
We've wrapped images in it, we've wrapped other HTML inside of it, and often it's used by developers
in many different scenarios.
And we just saw that often we use the legend element with the fieldset element. And it's not just useful
for visual reasons.
Legend helps for semantic purposes as well.
For example, some screen readers such as Jaws or Nvda, for example, they speak the legend's content
before speaking the label of each control.
And this is useful, right?
Because it's basically telling, you know, a visually impaired user what the group of controls is all
about.
Very, very useful.
There are just two important attributes for the fieldset that I want to quickly mention.
The first is "disabled" and the second is "form" - disabled and form.
What are they all about?
Well, firstly, disabled is very intuitive.
It just turns off all the elements inside of the fieldset element. And disabled controls are rendered
grayed out if visible, and they are blocked from user interaction.
And even more importantly, the values, if any, aren't sent when the form is submitted.
Let me show you how this works.
All right.
How does this disabled attribute work?
Well, I don't want to keep typing up new files with you.
I think it's just going to waste a lot of time.
So here, I've already coded something up.
Very simple.
I've called it fieldset4.
And it's very, very simple.
I've just got two sections in the form.
The one is delivery information, and the other one is subscription information.
Two separate topics,
therefore each are put into its own fieldset tab.
Actually,
you know what?
Before I put disabled, let's just have a look at what this looks like.
Okay.
It's very simple form.
And then at the very bottom, I've just got a submit value.
Right.
Very, very simple.
So let's look what it looks like on the browser.
See here we go.
We've got delivery information, subscription information, and we've got our submit button. Straight
forward.
And right now you can type in your your own email.
Okay, Very simple.
You can toggle the on and off here.
Don't worry about these types.
You know, you can see here, this is an input type of checkbox.
But we're going to be getting into this later in the course.
I don't want you to stress out now with what these all mean.
So right now, just try and ignore all the detail and look at the bigger picture,
and that is what this disabled attribute does.
Okay.
So how does the disabled attribute work?
That's a great question.
Let's say, for example, you might want an entire section to be disabled until something else happens,
until there's a trigger.
And then with JavaScript we can toggle the attribute of disabled on and off, right?
So for now, let's just disable the entire subscription section.
So that's this fieldset here. On this fieldset element itself,
we just have to type the keyword disabled.
Now disabled is a boolean attribute.
This just means it's either there or it's not.
We don't have to assign it a value.
It's not like input "type", for example,
that "type" attribute - that type attribute is not a boolean value.
We have to assign it a value.
You can see for email we've assigned it the value of email.
When it comes to disabled, we just have to put it there and it should work.
You can see on the browser, already it's worked.
It's all disabled.
You can't type an email in here, you can't toggle the checkbox.
There's nothing you can do.
But the top fieldset is enabled.
So, it's a very simple attribute.
I don't think there's much more to it than that.
So let's jump back to the lecture.
Don't you just love looking at examples?
I do.
So, so interesting.
So we've seen the disabled attribute.
Now I just want to talk about this "form" attribute.
What is that all about?
Well, the form attribute gets the values of the ID attributes of a form element, and that will then
be part of the fieldset in HTML.
I know it sounds very, very confusing.
Think of it like this.
Sometimes when you build a form, you don't want it to be all in one place on your page.
Sometimes if you want, you can split a form into different sections on your entire page, and you want
to associate some controls with the main form.
And in order to do so, you have to use this form attribute.
But one very, very important point to note is that the association of a fieldset with a form, right,
when we use that form attribute, it doesn't imply that the controls inside of that fieldset will be
associated to.
So it just means that for each form control that we want to be associated with the main form, that we
have to use this form attribute. Enough blibber-blabber (talk), I know it can seem very confusing.
So let me hop over to Visual Studio Code and let me show you.