So the next thing that we want to do here is introduce the forum tag.
Right now what we have is something we might call a form in English but technically unhitched him out
.
It's not considered a form.
It has just three inputs that are not related.
So remember the point of a form.
It's just a container where we put our inputs.
So yes they can exist individually individually outside of a form and sometimes we will have it.
But if this is one form one packaged up thing that we want to submit together then it makes sense for
us to make a form tag.
So I'm going to go ahead and put this data in the form tag and save it.
And remember in a form there are two attributes we discussed.
There's action which is where the form sends data to.
And then there's also the method which is what HTP method GET or POST.
And just as a refresher that shortcut command slash to get the comment.
OK.
So if he refresh the page nothing will change or it will appear like nothing changes.
There is one really small change.
So if I add some text on here and I don't have the form tag or refresh the page you'll see that everything
is in line as soon as I add the form tag However the form pushes it's a block of Allaman it pushes down
that text to the new line.
So a very minor thing but other than that it looks identical there is functionally a change though my
form.
Now if I refresh the page it actually does something it's not very impressive.
But if I fill out my username and password and I hit submit.
Pay attention right here and you'll see my page actually refreshes my data disappears.
This button to refresh the page is engaged briefly as you can see.
So my form is being sent.
The thing is it's just being sent to the same place where I currently am.
So by default if I don't specify an action it's going to go to the exact same place where I am just
refresh the page.
And if I don't specify a method it's going to be a GET request.
So we could go in and change that.
We could say action and method equal.
And let's change in something else let's do action equals HTP colon slash slash Wikipedia dot com method
would be a GET request or refresh the page let's fill out some data in here.
Fill up my form click submit.
This time it's not going to send the request to the same page I am on to send a request to Wikipedia
and technically this should be Wikipedia.
But they're smart enough that they realize people try and go to dot com all the time and it just redirects
to dot org.
OK so that's a point of action it's where we send data to.
Of course we're not really going to send data to Wikipedia or Google or Facebook from a forum.
We're going to send it to our own server our own back and that we create but we don't have that yet
.
So for now we're just demonstrating that we can we can alter where the data goes by altering the action
.
So I'm going to go ahead and get rid of both of these and just keep it as form where action is going
to refresh the same page that we're on and method is going to be get.
And if you're feeling at all confused with that we will spend a lot lot of time talking about HTP requests
and methods and actions.
So we will get there.
For now this is purely about the front end of making the form.
So there's one other thing I want to talk about here is is that when we actually submit this form the
data is sent along with this request and there's a way for us to see that.
So if we give a name to each piece of data that we want to be sent.
So it's a name attribute.
I'm going to call it user name on the user name and put and then I'm going to say name equals password
on the password input and I save this.
I type in a username the password will be test one two three.
Pay attention up here as I submit this and you'll see I get my data added in this new format that we
haven't seen.
It's called a query string.
Another one of those topics will be devoting a lot more time to and we get to express.
Basically it's a question mark followed by key value pairs separated by ampersands.
So I have a user name which is the name that I set.
Equals resti which is the value from that input password is the name I set.
Equals Test 1 2 3.
So the whole point of this is that we can give names to raw data to our pieces of data so that we can
then retrieve them later.
So of course we wouldn't actually send a password through the Euro.
We don't actually let you know a user any user see the password.
And that's because we use a post request usually rather than a get request.
There are ways of getting around this.
Again this is all for later in the class.
But what's important is that this isn't something I'm showing to you because you'll do it all the time
.
I'm showing it to you because it illustrates the fact that when we type something into a form and give
it some data and they click submit the data is taken out of that form and a request is sent somewhere
.
And in this case it's sent to the exact same place where we already are.
But if we change this to be action and go back to Wikipedia
Wikipedia or we
use name Rusty password test one two three you'll see it takes me to Wikipedia.
And it adds my data here.
So we've successfully sent a request using that form.
And in that request the data was extracted from the username and password fields and then sent along
with the request.
So that's the foundation of all the types of forms that we're going to do.
It's not always a get request but our forms later on are going to extract data out send it somewhere
and then we'll process the data and receive it on the back backend