I hope you're having as much fun as I am in this course.
I love this stuff ❤️. I am so amped, I love it.
I could do it all day ... and I pretty much do do it all day.
So anyway, what do I want to do in this lecture?
We've been speaking about this action attribute and this action attribute is so important. Seriously.
And that's why I want to spend one more lecture on it.
And typically, the action attribute, as I mentioned, tells your browser where to submit all that form...
data when the user clicks on that submit button. And "usually", not always...
usually, we send that form data...
we tell the browser to send it, to a server.
And this means that often a server side language deals with the form data, like Node.js
for example, or PHP.
And those server side languages, as we just said, will then deal with that form data.
Maybe, for example, you have to verify the user login information, or maybe the server side code...
has to save something to a database.
But my dear students, we have not yet dealt with server side code, have we? No.
And that's why I don't really want us to get into the server side of things now, but I do want to show...
you that it doesn't have to be sent to a server, and we can deal with form data purely on the front end.
It's quite fun, and I want us to now build a form, and I want us to submit the form data to the browser itself...
to front end.
So without further ado, let me jump into the computer, which is just behind this camera, and let's start
coding together.
Whew. Heyyy! Alright.
I'm right here, sitting in front of a computer with you and I want us to code a form, and then I want...
you to learn how to extract that data from the form in your front end and then display it to the screen...
again.
Really fun.
I've just got a blank folder open in Visual Studio Code and all I want to do is create a folder. Let's...
just call it index.html. And let's start coding. Let me zoom in...
so you can just see. And I just want to start off with a standard HTML5 template.
And the title of the document can be "Learning about forms".
Now, all I want to do is create a form and yes, we want an action attribute this time, right.
And remember, the form sends the data either to a server, not always...
we'll see now
that we don't have to do that, but it sends the data to some file that has to process the information.
So let's just call it, for argument's sake, process.html.
And I really want this to be a simple example...
so let's just have one input field...
we can say of type text.
That's all we want.
The name can be fname.
Remember that you have to give a "name" attribute value because when a form sends data somewhere, it sends...
it in key:value pairs...
so you need to make sure that you've defined a variable value, otherwise it won't send it.
We don't even need an ID in this instance.
And of course, then I just want a submit button and we can just have "submit".
If we save this, and we open it up in our browser, let's just see what we see.
Let's just open up Live Server.
There we go. Very very simple. And right now, and this is the example we've been looking at so far...
if I write "Wally" for example, and we click submit, what's going to happen?
100% 💯 right!
We're going to get an error, because the form, it's going to try and send it to this URL called...
process.html. And this process.html just does not exist.
And that's why we get this error.
But as you can see, we still have access to our parameters in the form, in the URL itself. There's our variable...
name, fname, and we've assigned it a value of "Wally".
And this happens because by default, we've submitted this form via a GET method 🤯.
Don't panic, please.
We're going to be talking about the method attribute in the next lectures.
And we're going to be discussing, in a lot of detail, the GET method...
versus the POST. For now,
just realize that by default, all your form information is going to be appended to the URL like this.
"OK, Clyde, that's cool...
but how do I extract that information and then display it onto the page?"
Great question.
So let's hop back into Visual Studio Code. (background music)