Whoo!
I'm super, super excited.
I'm super excited.
Anyway, welcome, welcome, welcome.
Let's start.
See how we go.
I've given you this blank kind of project
starting point.
We've just got a blank styles.css file.
We've got a postcard, which I've just given you.
You can see the width and height is 679x434 pixels.
Bit of a tongue-twister ðŸ˜›.
So that's our postcard.
We've got a blank index file.
And of course, I've got our fonts. And I've given you two formats just to show you how we can use the
format attributes.
We've got woff2 format and the woff format. And these fonts are going to be used for our headings
and a different font for the actual writing of the input text itself.
That's all we've done.
That's all I've got.
It's not complicated.
So let's begin. Let's start with our HTML.
Very simple.
We're going to have a head, because in here we want our styles, right?
A link to our CSS styles and we called it styles.css.
It's all we need in our head section. And of course then we want our body because this is where the meat
lies.
And of course we're creating a form. To create a form,
we wrap it within the form element.
You know this already.
Let me just zoom in slightly.
What I want to do now, is I want to create all the elements of our post card and I want our post card
to be split up in a grid format.
So this is what I want to do.
I first want to define the "to: King Kong".
Right.
And I've put the post card there so you can see what it looks like.
Now I'm thinking grid and the first column.
Let's deal with the first column taking up all rows, and we're going to define how this works in our
CSS.
But what I want here is a div, and I want to give this a div with ID of message.
Within this div we can have a label for message, and here's where the user types their message.
And of course, a label has to be associated with a form control.
Here I want a textarea.
The name is what is sent to the server.
Remember name:value pairs.
Here we can say user_message.
The ID has to match the value of that for attribute, which is message.
We don't need columns and rows.
Don't worry, we're going to affect it
styling in CSS rather.
And that's it.
I mean, that's literally the first column I want this message to take up.
Now I want to deal with the second column.
Which is basically going to be the rest of
our form.
Remember the "to" and "from" and the send button, all of that.
So here I want to wrap, again, another form control in a div, but this time I'm going to give it an ID
of from, not form ... from.
Does that make sense?
And within this div I want to have a label.
It's for attribute can have the name of "name".
From.
Right.
It's making sense.
The input can be of type text.
The name when we submit it to the server can be the user's actual name.
The ID has to match the for attribute's value, which is "name".
Very, very simple.
So there we go.
That's the from section of our form.
Now I want to do the reply
div, we can give it an ID of reply.
A label
we can give its for attribute
I don't know, the value of "mail",
why not?
Reply.
And again, we can have an input of type, but this time not text
right?
Because we want the response to be our email.
It needs to come back to our email when the user or the person you're sending it to responds.
So in this instance, we don't want the type of text, we want the type of email. Very, very simple.
The name that we give when we submit it to the server can be user_email and the ID of course has to
match the value of that for attribute, which is mail.
Very, very simple.
What's the final thing we need?
The final thing we need, my dear students is the submit button.
Again, we can wrap this in a div, we can give it a class of button just to mix things up,
why not?
And here we can have a button of type submit.
We don't have to define its type of submit, because we know that's the default.
But I just want to be explicit here.
Send your message.
And believe it or not, but this is all we have to do.
Let's save this.
Let's open this up in the browser.
And there we go.
How awesome.
This is the content of our entire form.
I know, I know it looks hideous, but all we're going to do in the next lecture is we're going to apply
CSS and we're going to complete the entire form.
How awesome.
Give it a go yourself.
Start applying some CSS, and I'll see you in the next lecture.