Whaaat!
Why do we have to put all of our form controls in widgets within a <form> element?
Why can't we just put it in, say, a <div> element, or why do we even need a wrapper element in the first
place?
That's what I want to quickly show you now.
By the way, it is very late right now.
In fact, I should be sleeping, and I just I love this so much
thought, you know what,
I'm going to come and film, and teach, because it's what I love to do.
So that's what I'm doing
and that's why I'm in my pajamas.
Apologies for that.
And you can kind of see Gerald in the background,
Gerald my giraffe.
Can you see him?
He's a very cheeky fellow.
Let me just move him here.
There we go.
Anyway.
Back to business.
So what I want to show you, is why do we have to put our form controls within a <form>?
So here we go,
I'm using a Visual Studio Code.
If you've done any of the courses, you know that I love using Visual Studio Code.
And I also use an extension called Live Server.
And I use Live Server just so, funny enough, we can use our computer as a server and we can view our
code in real time on a browser. (swoosh and then music)
Whaaat? What is this Live Server all about?
Why am I using a Live Server?
We'll just take a step back.
Your machine can only understand 1s and 0s.
It can only understand machine code. So anything we display on a computer or a phone has to at some level
be converted to binary.
And what's really awesome is that your browser does this automatically, your browser, whatever you're using,
Safari, Google Chrome, Mozilla, etc, etc. they have inbuilt interpreters that can interpret your
HTML and CSS and render that content onto your screen.
So that's the starting point.
And for that, we don't need a live server,
right.
You could create an HTML document in any format.
You could open up a word document, just save it as a .html, and you can drag that into your browser
and it'll work, right?
But you'll notice if we do that, we get a File protocol extension.
And there are a few problems with that.
The first problem is that the File protocol excludes us using AJAX, and that's a problem because we won't
be allowed to use JavaScript to fetch external content, like images or files, etc, etc.
So that's the first problem with the File protocol.
The second problem with doing it that way, is that every time we change the source file, we have to
then manually reload the browser.
And that, my dear students, is just irritating, especially for you and I when we're coding all the time and
we want to see changes in real time.
And this is exactly why I use the Live Server extension.
It's very easy to install, especially if you're using Visual Studio Code.
You just click on that extension's tab, search for live server and "Bob's your uncle".
It literally is all sorted for you.
What happens in the background, is
that it actually creates websockets and it connects the browser to your Visual Studio Code or your
file
so every time you save that file, the browser automatically refreshes.
That was just a very quick FYI, just in case you're wondering why I use a live server. Hope you found
it useful and, yeah, it's time for me now to jump into these hot pools. Adios.
So let's get into it.
Let's create a file, let's just call test.html.
And what I want to do now is I want to show you one form control, and we're going to get into this a
lot,
but I just want to use an input, right, and we can use a text input for now.
So here we go.
You can see we haven't wrapped it within a <form>. Now, if we actually create a form tag,
remember how I said it is good practice to always have 2 attributes, and that's why this IDE, which is Visual
Studio Code, automatically creates this action attribute.
I'm just going to be a terrible coder, and I'm going to delete it for now.
And within this form element, I want us to now do exactly the same thing.
I want us to create this input with type text.
Now, what I want to do is I want to start up Live Server. Let me just get rid of myself quickly. There we go, and you
can see that our Live Server is at the bottom right.
If I click on that,
"Bob's your uncle"
we literally get a live server.
So, what is this telling us? Well , let me zoom in. We know that the first input text box was not wrapped within a
form and the second one was.
This looks the same, doesn't it?
And yes, it does look the same.
So why do we need to have this wrapper? Why do we need to wrap our input's text box, form control, within
this <form> element?
Well my dear students, what you're missing is the understanding of semantic HTML markup and the DOM.
Realistically, we know we can do whatever we want with HTML5 and beyond, and most browsers will
pretty much parse everything or most things that you type, even though they're not 100% correct.
So the reason we put our form widgets inside a <form> element, is the same reason we insert all of our <li> elements
within a <ul> element.
It's where they belong.
It's semantically correct.
And of course it helps us to define our markup. Parsers, screen readers and other software can better
understand your code when it's semantically correct.
In other words, when your markup has meaning, not just structure.
So that's one reason why you should always use this form element. Reason
number 2, is that we know the form element allows us to define an "action" and a "method" attribute. Basically they
tell the browser what to do with the information when the form is submitted.
And it's good practice to have this in your form, even though sometimes you don't want to use JavaScript.
Remember, AJAX - Asynchronous JavaScript And XML - is not always used, meaning sometimes, you know, those
weird people, switch off JavaScript and that means you cannot rely on using pure AJAX.
So that is the second reason why we should include our form controls within a form element.
And the third and final reason that I can think of right now is that forms are registered properly within
the DOM.
What do I mean by that?
Well, why don't we take a sneak peek. If we go to our browser here, let's inspect this,
let's go to our console, clear everything, and what I want to show you now is that all forms are registered within
our DOM, automatically by the browser. And in order to access that, and you'll know this very well if you've
done my DOM courses, is we access our document object. On that, we've got a property called, believe
it or not, forms. And it returns to us
an HTMLCollection, we open that collection and BOOM ðŸ’¥. There is our form. (sound: congratulations).
And this can be very useful when we want to interact and manipulate forms, data on our page. And when
we don't put our form widgets in a form, obviously it doesn't form part of this collection.
So there we go.
I hope it's starting to make sense.
I hope you understand now why we even need that form element in the first place.
Visually, it does absolutely nothing, just like any container HTML element does nothing.
But behind the scenes, in the background, it is very, very useful.