Awesome,
welcome back.
And now I do want to code this up with you because I think it's just important to drive home a scenario
where you will split up your form across your entire HTML page.
I know you might be thinking, when would you ever want to do this?
Trust me, every single website, every single client you have will have different needs.
And that's why as developers, we have to have so much flexibility when it comes to code.
Okay.
Anyway, let's start.
So, HTML. I'm going to have a head and style section here because I'm assuming we're going to have to style
something later.
And then let's start.
So let's wrap everything in our body.
Firstly, let's have a heading.
And in here, let's just do a heading.
"Let's use the
form attribute."
Pretty straightforward.
Let's see what it looks like.
There you go.
I'll actually put it here so you can see it as we go on.
How's that?
Now, what I want to do is I want to create our form.
Create form.
It's good to have comments in your code.
Action doesn't matter.
But I just want to be explicit here.
I do want to use a GET request.
I know this is the default, so we didn't have to do it.
But I want to be explicit and I want a GET request because I want to see what fields are being submitted
in this form.
Now I just want a label because it's good, good practice. And we can do a label and call it "animal".
And we can ask the user, "What's your favorite animal?"
We can then have an input of type text.
The name can be fav-animal, and the ID has to match what's on that for attribute, and we named it "animal", remember?
And then of course we need to be able to submit the form.
So let's just do input type of submit.
And the value ...
we don't even need a value.
How's that?
All right.
It's starting to take shape.
And obviously now, what's your favorite animal?
We can call it a warthog 🐗, because, let's face it, it's a cool animal.
When we submit, we can see that what's submitted to the server via a GET request is "fav-animal=warthog".
Right. Nothing untoward, nothing we wouldn't expect.
So that's our form, my dear students.
That's our form.
But let's now leave the form.
So now we are outside of the form.
Let's say we have a paragraph just with some lorem ipsum and then let's break it up with a line.
Okay, let's say we've got a div, say there's nothing in the div, let's give it an ID of "line".
Save this.
What does it look like.
Okay.
So that's what it looks like on the browser.
We can't see a line, and I want a line.
I just want to kind-of show you that we can put a lot of HTML there.
So just view the line as a lot of HTML.
So all I want to do is style that line, so we can actually see it on the screen.
It's going to be very simple.
I just want a border-top, one pixel solid.
There we go.
How does that look?
Let's just give it a width of 50%, and center it.
Yeah, I think that's fine.
I think that's fine.
There we go.
So that's our site so far.
And let me include a comment here.
"Other website designs and sections"
Now what I want to do, is let's now create a fieldset HTML element, but it's outside of our
form, remember?
But we still want it to be part of the form.
And what I mean by this, is that when we submit that button at the top, you know, what's your favorite
animal? Submit. If the user has filled in the information below, I want that to be submitted alongside with
it.
And we could have actually reversed this.
We could have asked for the favorite animal and only put the Submit button at the bottom, which would
make more intuitive sense.
But this is just an example.
I just want you to understand how it works.
Okay.
So I'm not too worried about the UI experience.
So let's include another fieldset element here,
right.
This is how it looks like on the browser as we build it.
Yep.
I want a legend, you guessed it.
Tell us more about your favorite
animal.
Right.
Because we're continuing on from the top
question - what is your favorite animal?
So here, we could have a label for eat.
What does it eat?
And of course it needs an associated input, doesn't it?
It can be type text.
Its name can be fav-food.
Its ID has to be "eat" - it has to match that for value.
And then I just want to break it up,
break it up. And should we do one more?
Let's do one more.
Label for name.
What is the name of your animal?
And of course it needs an input type, of text.
The name can be fav-name.
The ID has to match the for, which we've given as name.
Let's save this.
Whew, I know we're doing a lot.
We're doing a lot.
This is what I want to show you.
Let's just look at our browser.
Firstly, if we say here, the warthog eats grass and the name of the warthog is Wally
and what's your favorite animal,
warthog.
What is the default approach if the user clicks submit?
What do you think would happen?
Well, 100% correct ✅.
It's not going to submit the below information because as far as the browser is concerned, this bottom
fieldset has NOTHING to do with the form
right.
Another way to prove this to you, is if we inspect this, not to view page source ... if we inspect this
element,
okay, let's go to the console. And let's grab our fieldset element. And let's define it in a variable
called field,
right?
If you've done my DOM course, you'll know exactly how this works and what the DOM is.
But I just want to use a method called getElementsByTag() name.
There you go,
getElementsByTag().
We know that the tag name is fieldset, and this returns an HTMLCollection. and we want the first item
in that collection because we only have one fieldset, right? Now,
all I want to do is I want to console.dir() out this fieldset variable.
This is what I want to show you.
If we open it up, and we scroll down, I want to show you what the form attribute is.
Where's "form"?
There it is.
Can you see it?
Form.
It says it's null, right?
It's not associated with any form.
We haven't used the form attribute on fieldset in any way.
That's the first thing I wanted to show you.
The other thing here, just while we are on the on this, um, on this JSON representation format here, look at
this disabled attribute.
Remember we looked at the disabled example? Well, here the disabled attribute is not set, and that's why
it's false.
So pretty cool, right?
Um, yeah.
So let's close this.
Let's go back to our Visual Studio Code, and let's now, on this fieldset element, let's now put this
form attribute.
And this form attribute has to equal the ID of the main form we want it to relate to.
So let's call it main ... mainForm.
How is that?
And if we go to the main form,
we haven't put an ID, have we?
So, as the ID, let's have mainForm. Save this,
let's now inspect this and do exactly the same.
Define the field, and console.dir(),
and here we go.
Let's find that form attribute now.
And I'm just going to search quickly -
it'll be quicker.
It'll be faster.
There you go.
How cool is that?
We found the form, and now it's form
attribute is set to the mainForm.
And if you open that up, obviously it's got the input types and it's got the fieldset that we're talking
about
you know, in this scenario.
So it's really, really useful, really, really cool.
But remember what I said, that even though, you know, for HTML purposes, and for CSS DOM access point of view,
we may want this on the actual fieldset itself, but, it still won't allow us to use the inputs and
associate them with the form.
So, if here we've got warthog.
What does it eat?
Grass.
What is the name?
Wally.
If we submit.
Even though we put that form attribute on the fieldset, it still does not submit all the information!
You can see in the GET request,
only one variable has been submitted.
So, what we have to do is we have to put that form attribute on each individual widget.
So let's scroll down here.
You can see here we've got this form attribute on the fieldset, but that doesn't allow us to send
each input widget, does it?
No.
So we have to go inside the fieldset and on each input, on each input that you want to relate to the
form and send it along with the form,
we have to include this attribute as well.
So I've just done it on both inputs.
This now, my dear student should work.
What's your favorite animal?
Warthog.
What does it eat?
Grass.
What is the name?
Wally.
Let's submit this.
And boom 💥!
How cool is that?
So there you go.
This is just one example where you have a complicated site
maybe, there's a lot going on ...
you ask the user one question at the top, you continue your form later on.
Like I said, we could have, you know, shuffled things around and put the form at the bottom of the
page and associated controls above.
It doesn't matter how you shuffle it all up.
The point that I'm trying to make is that this form attribute, we can put it on this fieldset, but
it doesn't do much.
It doesn't do much
when you come to submit the form. If you want to, you know, have dynamic styling, if you want to
access that fieldset in an easy way, then sometimes putting this form attribute on there does help.
But most of the time what you're going to want to do is you're going to want to put this form attribute
on the individual widgets that you want to relate to the form.
Okay.
Does that make sense?
I know, I know we're going through a lot and sometimes I'm rushing, you know, I'm sorry if I'm going
too quick.
If you have any questions, please post them on Q&A.
But enough said.
We've got a lot to cover, so let's move on.