Before we move on
you know, it may be quite confusing, because I said that one of the benefits of using the form attribute
on <fieldset> is that you can associate it with a form, and it may help you with styling purposes.
Well, yes, I could have just stopped there and moved on, but if you're anything like me, you're
quite curious and you want to know exactly what that means.
So, I know this is going to be quite a bad example, but at least it'll show you how you could use it
should you want to.
So here we go.
Here's the form
we coded up together.
And what if we wanted to style everything a certain colour, but only those things that are related
to our form?
Well, yes, we could go into our file and, you know, put IDs on everything and target everything,
but that's a real nuisance and it's very tedious ðŸ˜«.
So how can we go about doing this in a more efficient way?
Well, we can use the form attribute.
So here you can see, we've put the form attribute on the <fieldset> element.
And the value of that form attribute needs to match the ID of the form.
So if we scroll up, we've got our form,
and there's the ID, "main-form".
Okay, so we've done that.
And as you saw in the lecture, we've also put that form attribute on each input widget.
So now we've associated all these with the main form.
How can we go about styling it very quickly?
Well it's super, super easy.
All we need to do is write a bit of JavaScript.
If you've done my JavaScript course, you know JavaScript is always within <script> tags. And all I want
to do now, is I want to use the elements() method.
And the elements() method or property comes from the HTMLFormElement API.
Okay.
Don't worry about what that is.
It's just something the browser gives us every time you write a form.
Okay, so let me show you what I mean.
Let me just write a comment.
The elements method
returns an HTMLFormControlsCollection
Collection,
listing
all of the form controls contained in the <form> element.
And this is important as well.
It only lists the form controls, the widgets - the input types, effectively in our code here.
So that's important. That first label under the form, will not be selected.
But anyway, let's keep going.
There's our description.
How does this work?
Well, it's very, very simple.
All I want to do is I want to grab all widgets in our form.
In order to do so, let's grab our form.
Let's define a variable called formElements.
And I'm just using JavaScript's `let` keyword.
And I'm going to assign that the value of document.getElementById(),
and we know our form has an ID of `main-form`.
And this is what I mean by using the `elements` method.
We know if we get the form like this, what's going to be returned to us is the form element right,
which is of type HTMLFormElement and there's a method on that, or a property, called elements.
And to prove what this is, let's just console.log() this out to the screen - formElements.
Right.
Let's save this.
Let's go to our browser.
Okay.
Let's inspect this.
Go to the console, and there we go ðŸŽ‰.
We've got an HTMLFormControlsCollection.
And it consists of five items.
How cool is that.
So if you wanted to style all of these, let's say we want to make the color red.
All we need to do is loop through it,
right.
And let's just use a quick `for...of` loop, and we can just say item.
Or we can even call it ... you know what,
let's call it a formWidget of formElements.
And here we can just grab the form widget.
We can set its style, color
to red.
This is just what I wanted to show you.
Let's go back to the browser.
And boom ðŸ’¥!
How awesome is this?
This is just an example, right?
And everything is red.
And this is what I wanted to show you. By using that form attribute,
it kind of gives you more control in terms of styling, especially when we use it on the <fieldset> element.
The usage of that form attribute is a little bit confusing, I'll be honest with you, because if you
want each input element inside the <fieldset> to be associated with the form, you have to use that form
attribute directly on those elements as well.
So there we go.
Hope this makes sense.
Hope you can kind of see, you know, a scenario in which you may use it one day.
But enough said.
Let's move on.