Original subtitles

Now, let's structure our form so that it looks like a proper contact form.

So let's, again, add a horizontal rule to divide the top part from the bottom.

And then in our form, we want a label that says your name

and then after that, we're going to get rid of this color,

but we do want that line break. And then we've got a label that says

password. Maybe we should ask them for your email.

Maybe that'll help us get back in touch with them.

And instead of password input type, we're going to change that to email.

And to do that, I have to use something that's not actually an input. Instead,

it's an HTML element called text area.

So let's add a label first and let's say your message. And text area has two

attributes that are really important.

One is the number of rows and the other one's the number of columns.

So rows determine how tall your text area should be and columns determine how

wide it should it be on your webpage.

I'm going to stick to maybe 10 rows and 30 columns.

But if we hit save,

you'll see that it's actually something that you can modify.

And I'm sure you've seen these text fields all over the internet anywhere where

you have to put in a long answer.

You'll get something that looks like a box and you've got these few lines in the

right corner

and what you can do is you can click and drag it to make that text field as large or

as small as you want it to be.

But the default or the starting position is defined by the developer.

It's looking a little bit messy,

let's add a few more line breaks so that we can space things out a little bit and

make it look a little bit more appealing. All right.

So that looks a little bit nicer. I know it's still very bare-bones,

but at least it's starting to take shape.

Now, the only problem is that at the moment when you hit the submit button,

what it does is that it'll take you back to your homepage.

And the reason is because when we created our form,

it has this attribute called action i.e. what should happen when you click

submit. And at the moment,

the action is simply take the user to the index.html page

and that is of course our homepage.

Now without knowing anything about CSS or JavaScript,

we can't actually get very deep into understanding what the method or the action

means, but you kinda want it to have some basic functionality, right?

Because otherwise, it doesn't make any sense to anybody who's going on to our

website. And even though this is our first website,

it doesn't mean that it can't function or, or do something very simple.

So what I'm going to do is I'm going to change the form action to a mail to.

And what mail tos do is that when you press the submit button,

they'll open up your default mail client,

so that could be mail on Mac or it might go into Gmail if you're inside Chrome

and it puts in the email address that you specify after the colon here. And the

post in this case simply means that we're going to transfer what the user types

into these input fields into the email client.

If we hit save, I'll show you what it looks like.

So let's go to contact me and let's give my name,

my email,

add my message.

Now, if I hit submit,

you can see that it opens up my mail app and adds a little bit of text into the

body of the email. Now it's not making too much sense right now.

And in order to change that,

we actually have to add a little bit more to our form.

So I'm going to delete this class and I'm going to add another attribute called

encoding type. And this specifies, just as up here

we're specifying that our website is encoded in UTF-8,

we're going to say that the data in our form is encoded in plain text.

So that way

when it launches the mail app you won't have these funny percentage signs and

numbers. Yu'll instead just have plain text.

Now, the other thing we need to add is a value to each of these name attributes

because that's going to identify the data that's inside each of these inputs and

I'll show you what I mean. So let's add the name as your name.

Second one, your email

and

the third one, your message.

All right. Let's hit save and let's go back to our website,

hit refresh and let's try it again.

Now I didn't show you this last time,

but the cool thing about the email text field that we added here by changing the

input type

to email is that it does some basic validation and that means if I type

something like this and I try to hit enter,

now it is a little bit different from browser to browser,

but your browser might tell you that please include an @ sign in your email

address because all email addresses have @ signs, right? And then it says,

please enter a part following the @ sign. All emails

have something after the @ sign. And it says emails

don't contain these weird symbols.

So you're probably not entering a correct email or make sure that you check.

So that's our email. But even though it's not a real email,

it passes those basic validation checks,

but we got all of those validation checks for free just by changing our input

type to email. So it's already a pretty good deal. And later on,

we'll show you how to make that validation a little bit more sophisticated.

But it's already kind of cool that we have that. And then we'll add an email,

so let's say, Hey there again. And now hit submit.

And you can see now because we've added something to that name attribute

where we said your name, your email, your message,

what we added here and here and here.

Now when we submit our form and we post this data that the user has inputted to our

mail client,

then it knows how to classify each bit of the data i.e.

this input should be labeled your name,

this input should be labeled your email and your message should be labeled like

so. So this is a really, really basic little

bit of functionality that we can get without yet understanding about

JavaScript. So once you get to the JavaScript module, um,

we're going to come back and revisit forms and we're going to unleash the full

power of HTML forms.

But for now, this is a neat little bit of functionality that when we publish our

website,

it will still work well enough for anybody who's actually coming on to our

personal website or personal page. Now in the next lesson,

we're going to be launching into our intermediate HTML challenge.

So we're going to be getting you to recreate a web page using all of the things

that you've learned in this module. So for all of that and more,

I'll see you on the next lesson.