I hope you are as excited as I am, because for the first time in this course, I'm going to show you
what AJAX is.
Now, let me be clear.
This course is not about AJAX, and it will take me a very, very long time to really explain what AJAX
is, to show you the XHR object versus the new Fetch API.
I don't want to get into so much detail.
All I want to show you is just a high level overview of what AJAX is, and that it is a real alternative
to submitting form data to a server. Because this is probably going to be quite lengthy,
I just want to start off with the HTML, then we can take a break.
Then in the next lecture we can finish off by coding our PHP file, setting up the server and then coding
our JavaScript, right,
because we've got all those little errors that are going to be displayed.
It's going to be really fun.
I can't wait.
So let's start off with the HTML. Of course,
it's a blank file, right?
You know my style.
So we've got HTML.
We are going to need to include CSS.
I'm not going to put it in a separate CSS file because it's going to be really simple.
I don't want to concentrate on CSS in this lecture.
It's going to look rather ugly, but it's more the back end code that I want you to understand and code
with you, not CSS.
All right.
And then of course, we in our body, this is where we have all of our HTML.
And of course, I want an h1 heading, right.
And this is submitting form to a PHP server.
So why don't we say "Submitting a form to a PHP server !"
This is our h1 heading.
Very, very simple.
Everything else I want wrapped within this form element.
But, do we need an action?
No, because we're going to be using AJAX, so let's remove this action entirely.
This is what's really cool. And I want to now create our form.
I want to wrap each form control within its own div element.
And why don't we give each control its own ID. So, this div can have an ID of usernameWrapper.
And within here we can have a label for username.
Well, let's just call it name.
I'll show you something new here.
And we can ask the user, "What is your cool
username?"
Now we can have an input of type text.
It's very, very simple.
We can give it a name of username.
And remember, this is the name that is submitted to the server.
We're giving our variable name, the name of "username".
The ID has to match the name of that for attribute, which is name.
And that's why I wanted to show you,
it doesn't always have to be one value that's used on the for attribute, the name attribute and the
ID. And let's give this a placeholder:
"make it funky ... "
And that's it.
It really is this simple.
And let's create another form control here asking for the user's favorite food.
So why don't we give it an ID of foodWrapper.
Within here, the label, we can give its for attribute the value of food.
We can ask the user, "What is your favorite food?"
And of course, input type text.
The name that we send to the server can be favFood.
The ID has to match the for attribute's name of food.
And again, let's give this a placeholder of "yum ...".
What I want to do,
you see, we've got two inputs here,
I actually want to give each input a class of input
just to make it very clear.
So, on both inputs, I'm just adding a class of "input".
You'll see how we use that later.
And then finally, we've got a form.
We've got nowhere to submit the form.
So of course let's do a final div.
We don't even need to give that an ID because we're going to have one button on this entire form, which
is a button of type submit, and we can give it a value of "Send my details".
And of course you already know we don't need type of submit, do we?
We could just do this.
But anyway, I like being very explicit.
Let's look on the browser now.
And there we go.
It kind of looks okay.
Like I mentioned, I don't care about the CSS, but in saying that, let me just center everything.
So let's just scroll up here in our file.
Let's target the h1 and the divs.
Let's give it a width of 70%.
How's that?
And now I want it centered.
Let me just show you exactly what I'm doing.
Let's inspect this.
Let's look here at our form.
Can you see if we look at our form element,
it's all pushed to the left.
All our text and all our widgets.
I want it centered. To center that, all we have to do is access the text-align property in CSS.
It is really, really that simple.
Text-align, center.
Right.
It's all we have to do. If we save this, and we look now, it's now centered
okay. But remember, we gave it a width of 70%
so that's why it's kind of not exactly centered. To exactly center it,
I want to affect its margin property, zero auto.
Let's see what that looks like. Now
it's exactly in the center, which is really, really cool.
But you can see they're a bit bunched up to each other.
So why don't we maybe give it a top and bottom margin of 10 pixels?
See that.
There we go.
I think this is fine
for the example I want to show you.
So let me stop here.
We've done our HTML and CSS.
Take a break.
Think about not necessarily the code and the syntax on how to write it, but think about what it is
we need to do.
It's going to be super, super interesting and super fun.
I can't wait and I'll see you in the next lecture.