So now let's structure our form so that it looks like a proper contact form. 1
So let's again add a horizontal rule to divide the top part from the bottom and then in our form we 2
want a label that says your name and then after that we're going to get rid of this color. 3
But we do want that line break and then we've got a label that says password. 4
Maybe we should ask them for your email. 5
Maybe that will help us get back in touch with them. And instead of password input type we're gonna change 6
that email. And to do that and I have to use something that's not actually an input instead it's an HTML 7
element called textarea. 8
So let's add a label first and let's say "Your Message" and textarea has two attributes that are really important. 9
One is the number of rows and the other one is the number of columns. 10
So rows determine how tall your textarea should be and columns determine how wide it should be on your 11
web page. 12
So I'm going to stick to maybe 10 rows and 30 columns. 13
But if we hit save, you'll see that it's actually something that you can modify. And I'm sure you've seen 14
these text fields all over the Internet. Anywhere where you have to put in a long answer you'll get something 15
that looks like a box and you've got these few lines in the right corner. 16
And what I can do is you can click and drag it to make that text field as large or as small as you want 17
it to be. But the default or the starting position is defined by the developer. 18
So it's looking a little bit messy. 19
Let's add a few more line breaks so that we can space things out a little bit and make it look a little 20
bit more appealing. 21
All right. 22
So that looks a little bit nicer. 23
I know it's still very barebones, but at least it's starting to take shape now. 24
The only problem is that at the moment when you hit the submit button, what it does is that it'll take 25
you back to your home page. 26
And the reason is because when we created our form it has this attribute called action. 27
i.e., what should happen when you click submit. And at the moment the action is simply "take the user 28
to the index.html page". And that is, of course, our home page. 29
Now without knowing anything about CSS or JavaScript we can't actually get very deep into understanding 30
what the method or the action means. 31
But you kind of want it to have some basic functionality, right? Because otherwise, it doesn't make any 32
sense to anybody who's going onto our website. 33
And even though this is our first website, it doesn't mean that it can't function or do something 34
very simple. 35
So what I'm gonna do is, I'm going to change the form action to a "mailto". And what mailtos do is that 36
when you press the submit button, they'll open up your default mail client. 37
So that could be mail on Mac or it might go into gmail if you're inside Chrome and it puts in the e-mail 38
address that you specify after the colon here. And the post, in this case, simply means that we're going 39
to transfer what the user types into these input fields into the e-mail client. 40
So if we hit save I'll show you what it looks like. 41
So let's go to contact me. 42
Let's give my name. 43
My email 44
and my message. 45
Now if I hit submit, you can see that it opens up my mail app and adds a little bit of text into the 46
body of the email. 47
Now it's not making too much sense right now and in order to change that, we actually have to add a little 48
bit more to our form. 49
So I'm going to delete this class and I'm going to add another attribute called encoding type. And this 50
specifies, just as up here, we're specifying that our website is encoded in UTF 8. 51
We're going to say that the data in our form is encoded in plain text so that way when it launches the 52
mail app you won't have these funny percentage signs and numbers. You'll instead just have plain text. 53
Now the other thing we need to add is a value to each of these name attributes because that's going 54
to identify the data that's inside each of these inputs. And I'll show you what I mean. 55
So let's add the name as yourName. 56
Second one yourEmail and the third one. 57
yourMessage. 58
All right, let's hit save and let's go back to our website, hit refresh and let's try it again. 59
Now I didn't show you this last time, but the cool thing about the e-mail text field that we added here 60
by changing the input type to e-mail is that it does some basic validation. And that means if I type 61
something like this and I try to hit enter - now it's a little bit different from browser to browser - 62
But your browser might tell you that "please include an @ sign in your email address" because all e-mail 63
addresses have @ signs, right? 64
And then it says "Please enter a part following the @ sign". 65
All emails have something after the @ sign. Then it says emails don't contain these weird symbols, so you're 66
probably not entering a correct email or make sure that you check. 67
So that's our e-mail. 68
But even though it's not a real email it passes those basic validation checks. 69
But we got all of those validation checks for free just by changing our input type to e-mail. 70
So it's already a pretty good deal. 71
And later on, we'll show you how to make that validation a little bit more sophisticated, but it's already 72
kind of cool that we have that. 73
And then we'll add an email. 74
So let's say "Hey there!" again. And now hit submit and you can see, now, because we've added something to 75
that name attribute where we said yourName, yourEmail, yourMessage. 76
What we added here and here and here. 77
Now when we submit our form and we post this data that the users inputted to our mail client, then it 78
knows how to classify each bit of the data i.e. this input should be labeled your name. 79
This input should be labelled your email. And your message should be labelled like so. 80
So this is a really really basic little bit of functionality that we can get without yet understanding 81
about JavaScript. 82
So once you get to the Javascript module we're going to come back and revisit forms and we're going 83
to unleash the full power of HTML forms. 84
But for now, this is a neat little bit of functionality that when we publish our website it'll still 85
work well enough for anybody who's actually coming onto our personal website or personal page. Now in 86
the next lesson. 87
We're going to be launching into our intermediate HTML challenge. 88
So we're going to be getting you to recreate a web page using all of the things that you've learned 89
in this module. 90
So for all of that and more I'll see you on the next lesson.