Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,390 --> 00:00:04,920
Now, let's structure our form so that it looks like a proper contact form.
2
00:00:05,400 --> 00:00:09,900
So let's, again, add a horizontal rule to divide the top part from the bottom.
3
00:00:10,530 --> 00:00:15,030
And then in our form, we want a label that says your name
4
00:00:15,150 --> 00:00:18,240
and then after that, we're going to get rid of this color,
5
00:00:18,780 --> 00:00:22,140
but we do want that line break. And then we've got a label that says
6
00:00:22,140 --> 00:00:25,710
password. Maybe we should ask them for your email.
7
00:00:26,160 --> 00:00:28,470
Maybe that'll help us get back in touch with them.
8
00:00:29,340 --> 00:00:34,080
And instead of password input type, we're going to change that to email.
9
00:00:34,470 --> 00:00:39,450
And to do that, I have to use something that's not actually an input. Instead,
10
00:00:39,480 --> 00:00:42,300
it's an HTML element called text area.
11
00:00:42,450 --> 00:00:47,450
So let's add a label first and let's say your message. And text area has two
12
00:00:50,490 --> 00:00:52,260
attributes that are really important.
13
00:00:52,740 --> 00:00:56,010
One is the number of rows and the other one's the number of columns.
14
00:00:56,370 --> 00:01:01,370
So rows determine how tall your text area should be and columns determine how
15
00:01:03,060 --> 00:01:05,550
wide it should it be on your webpage.
16
00:01:06,930 --> 00:01:11,610
I'm going to stick to maybe 10 rows and 30 columns.
17
00:01:12,590 --> 00:01:14,630
But if we hit save,
18
00:01:14,840 --> 00:01:18,110
you'll see that it's actually something that you can modify.
19
00:01:18,500 --> 00:01:22,250
And I'm sure you've seen these text fields all over the internet anywhere where
20
00:01:22,250 --> 00:01:23,780
you have to put in a long answer.
21
00:01:24,050 --> 00:01:27,140
You'll get something that looks like a box and you've got these few lines in the
22
00:01:27,140 --> 00:01:27,973
right corner
23
00:01:28,250 --> 00:01:32,570
and what you can do is you can click and drag it to make that text field as large or
24
00:01:32,570 --> 00:01:34,490
as small as you want it to be.
25
00:01:34,970 --> 00:01:39,380
But the default or the starting position is defined by the developer.
26
00:01:40,880 --> 00:01:42,200
It's looking a little bit messy,
27
00:01:42,200 --> 00:01:46,850
let's add a few more line breaks so that we can space things out a little bit and
28
00:01:46,850 --> 00:01:49,460
make it look a little bit more appealing. All right.
29
00:01:49,460 --> 00:01:52,850
So that looks a little bit nicer. I know it's still very bare-bones,
30
00:01:52,880 --> 00:01:54,860
but at least it's starting to take shape.
31
00:01:55,370 --> 00:02:00,370
Now, the only problem is that at the moment when you hit the submit button,
32
00:02:00,950 --> 00:02:04,520
what it does is that it'll take you back to your homepage.
33
00:02:05,090 --> 00:02:07,880
And the reason is because when we created our form,
34
00:02:08,360 --> 00:02:13,360
it has this attribute called action i.e. what should happen when you click
35
00:02:13,910 --> 00:02:16,130
submit. And at the moment,
36
00:02:16,130 --> 00:02:20,960
the action is simply take the user to the index.html page
37
00:02:21,260 --> 00:02:23,180
and that is of course our homepage.
38
00:02:23,780 --> 00:02:26,540
Now without knowing anything about CSS or JavaScript,
39
00:02:26,810 --> 00:02:31,160
we can't actually get very deep into understanding what the method or the action
40
00:02:31,160 --> 00:02:34,970
means, but you kinda want it to have some basic functionality, right?
41
00:02:35,180 --> 00:02:38,570
Because otherwise, it doesn't make any sense to anybody who's going on to our
42
00:02:38,570 --> 00:02:41,510
website. And even though this is our first website,
43
00:02:41,750 --> 00:02:45,980
it doesn't mean that it can't function or, or do something very simple.
44
00:02:46,460 --> 00:02:51,460
So what I'm going to do is I'm going to change the form action to a mail to.
45
00:02:53,150 --> 00:02:57,140
And what mail tos do is that when you press the submit button,
46
00:02:57,380 --> 00:02:59,710
they'll open up your default mail client,
47
00:02:59,720 --> 00:03:04,210
so that could be mail on Mac or it might go into Gmail if you're inside Chrome
48
00:03:04,630 --> 00:03:09,630
and it puts in the email address that you specify after the colon here. And the
49
00:03:11,620 --> 00:03:16,620
post in this case simply means that we're going to transfer what the user types
50
00:03:17,020 --> 00:03:20,770
into these input fields into the email client.
51
00:03:21,190 --> 00:03:24,040
If we hit save, I'll show you what it looks like.
52
00:03:24,550 --> 00:03:29,140
So let's go to contact me and let's give my name,
53
00:03:29,560 --> 00:03:30,610
my email,
54
00:03:34,170 --> 00:03:35,580
add my message.
55
00:03:37,770 --> 00:03:39,780
Now, if I hit submit,
56
00:03:40,080 --> 00:03:45,080
you can see that it opens up my mail app and adds a little bit of text into the
57
00:03:45,450 --> 00:03:49,680
body of the email. Now it's not making too much sense right now.
58
00:03:49,860 --> 00:03:51,300
And in order to change that,
59
00:03:51,480 --> 00:03:54,870
we actually have to add a little bit more to our form.
60
00:03:55,110 --> 00:04:00,110
So I'm going to delete this class and I'm going to add another attribute called
61
00:04:01,020 --> 00:04:04,800
encoding type. And this specifies, just as up here
62
00:04:04,800 --> 00:04:08,580
we're specifying that our website is encoded in UTF-8,
63
00:04:08,940 --> 00:04:13,740
we're going to say that the data in our form is encoded in plain text.
64
00:04:13,980 --> 00:04:14,460
So that way
65
00:04:14,460 --> 00:04:18,750
when it launches the mail app you won't have these funny percentage signs and
66
00:04:18,750 --> 00:04:21,510
numbers. Yu'll instead just have plain text.
67
00:04:22,170 --> 00:04:27,170
Now, the other thing we need to add is a value to each of these name attributes
68
00:04:27,750 --> 00:04:32,750
because that's going to identify the data that's inside each of these inputs and
69
00:04:32,970 --> 00:04:37,140
I'll show you what I mean. So let's add the name as your name.
70
00:04:37,860 --> 00:04:40,380
Second one, your email
71
00:04:42,690 --> 00:04:43,523
and
72
00:04:44,100 --> 00:04:47,250
the third one, your message.
73
00:04:48,780 --> 00:04:52,950
All right. Let's hit save and let's go back to our website,
74
00:04:52,950 --> 00:04:56,160
hit refresh and let's try it again.
75
00:04:56,490 --> 00:04:58,170
Now I didn't show you this last time,
76
00:04:58,200 --> 00:05:02,430
but the cool thing about the email text field that we added here by changing the
77
00:05:02,430 --> 00:05:03,030
input type
78
00:05:03,030 --> 00:05:07,890
to email is that it does some basic validation and that means if I type
79
00:05:07,890 --> 00:05:10,650
something like this and I try to hit enter,
80
00:05:10,980 --> 00:05:13,170
now it is a little bit different from browser to browser,
81
00:05:13,620 --> 00:05:18,620
but your browser might tell you that please include an @ sign in your email
82
00:05:18,990 --> 00:05:23,970
address because all email addresses have @ signs, right? And then it says,
83
00:05:23,970 --> 00:05:26,700
please enter a part following the @ sign. All emails
84
00:05:26,700 --> 00:05:31,080
have something after the @ sign. And it says emails
85
00:05:31,440 --> 00:05:33,480
don't contain these weird symbols.
86
00:05:33,480 --> 00:05:37,530
So you're probably not entering a correct email or make sure that you check.
87
00:05:38,070 --> 00:05:42,360
So that's our email. But even though it's not a real email,
88
00:05:42,360 --> 00:05:44,760
it passes those basic validation checks,
89
00:05:45,030 --> 00:05:49,320
but we got all of those validation checks for free just by changing our input
90
00:05:49,320 --> 00:05:52,500
type to email. So it's already a pretty good deal. And later on,
91
00:05:52,500 --> 00:05:55,950
we'll show you how to make that validation a little bit more sophisticated.
92
00:05:56,370 --> 00:06:00,830
But it's already kind of cool that we have that. And then we'll add an email,
93
00:06:00,830 --> 00:06:04,700
so let's say, Hey there again. And now hit submit.
94
00:06:05,060 --> 00:06:10,060
And you can see now because we've added something to that name attribute
95
00:06:10,790 --> 00:06:13,400
where we said your name, your email, your message,
96
00:06:13,670 --> 00:06:16,940
what we added here and here and here.
97
00:06:17,810 --> 00:06:22,810
Now when we submit our form and we post this data that the user has inputted to our
98
00:06:26,180 --> 00:06:27,080
mail client,
99
00:06:27,530 --> 00:06:32,450
then it knows how to classify each bit of the data i.e.
100
00:06:32,660 --> 00:06:34,790
this input should be labeled your name,
101
00:06:35,000 --> 00:06:39,290
this input should be labeled your email and your message should be labeled like
102
00:06:39,290 --> 00:06:42,530
so. So this is a really, really basic little
103
00:06:42,530 --> 00:06:46,700
bit of functionality that we can get without yet understanding about
104
00:06:46,820 --> 00:06:50,690
JavaScript. So once you get to the JavaScript module, um,
105
00:06:50,720 --> 00:06:55,720
we're going to come back and revisit forms and we're going to unleash the full
106
00:06:55,730 --> 00:06:57,710
power of HTML forms.
107
00:06:58,610 --> 00:07:03,530
But for now, this is a neat little bit of functionality that when we publish our
108
00:07:03,530 --> 00:07:04,340
website,
109
00:07:04,340 --> 00:07:08,900
it will still work well enough for anybody who's actually coming on to our
110
00:07:08,900 --> 00:07:13,700
personal website or personal page. Now in the next lesson,
111
00:07:13,730 --> 00:07:17,480
we're going to be launching into our intermediate HTML challenge.
112
00:07:17,780 --> 00:07:21,980
So we're going to be getting you to recreate a web page using all of the things
113
00:07:21,980 --> 00:07:25,430
that you've learned in this module. So for all of that and more,
114
00:07:25,460 --> 00:07:27,650
I'll see you on the next lesson.
10320
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.