0
1
00:00:00,420 --> 00:00:05,910
So now let's structure our form so that it looks like a proper contact form.
1

2
00:00:05,910 --> 00:00:13,260
So let's again add a horizontal rule to divide the top part from the bottom and then in our form we
2

3
00:00:13,260 --> 00:00:18,930
want a label that says your name and then after that we're going to get rid of this color.
3

4
00:00:19,230 --> 00:00:23,310
But we do want that line break and then we've got a label that says password.
4

5
00:00:23,370 --> 00:00:26,630
Maybe we should ask them for your email.
5

6
00:00:26,670 --> 00:00:33,330
Maybe that will help us get back in touch with them. And instead of password input type we're gonna change
6

7
00:00:33,330 --> 00:00:40,680
that email. And to do that and I have to use something that's not actually an input instead it's an HTML
7

8
00:00:40,710 --> 00:00:42,960
element called textarea.
8

9
00:00:42,960 --> 00:00:53,210
So let's add a label first and let's say "Your Message" and textarea has two attributes that are really important.
9

10
00:00:53,220 --> 00:00:56,850
One is the number of rows and the other one is the number of columns.
10

11
00:00:56,850 --> 00:01:05,280
So rows determine how tall your textarea should be and columns determine how wide it should be on your
11

12
00:01:05,280 --> 00:01:07,400
web page.
12

13
00:01:07,450 --> 00:01:13,420
So I'm going to stick to maybe 10 rows and 30 columns.
13

14
00:01:13,420 --> 00:01:20,560
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

15
00:01:20,560 --> 00:01:25,570
these text fields all over the Internet. Anywhere where you have to put in a long answer you'll get something
15

16
00:01:25,570 --> 00:01:29,030
that looks like a box and you've got these few lines in the right corner.
16

17
00:01:29,110 --> 00:01:34,880
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

18
00:01:34,880 --> 00:01:41,300
it to be. But the default or the starting position is defined by the developer.
18

19
00:01:41,730 --> 00:01:43,230
So it's looking a little bit messy.
19

20
00:01:43,260 --> 00:01:49,200
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

21
00:01:49,200 --> 00:01:50,260
bit more appealing.
21

22
00:01:50,280 --> 00:01:50,520
All right.
22

23
00:01:50,550 --> 00:01:52,310
So that looks a little bit nicer.
23

24
00:01:52,320 --> 00:01:56,990
I know it's still very barebones, but at least it's starting to take shape now.
24

25
00:01:57,000 --> 00:02:03,600
The only problem is that at the moment when you hit the submit button, what it does is that it'll take
25

26
00:02:03,600 --> 00:02:06,010
you back to your home page.
26

27
00:02:06,150 --> 00:02:12,360
And the reason is because when we created our form it has this attribute called action.
27

28
00:02:12,360 --> 00:02:19,530
i.e., what should happen when you click submit. And at the moment the action is simply "take the user
28

29
00:02:19,560 --> 00:02:24,630
to the index.html page". And that is, of course, our home page.
29

30
00:02:24,870 --> 00:02:30,420
Now without knowing anything about CSS or JavaScript we can't actually get very deep into understanding
30

31
00:02:30,420 --> 00:02:32,880
what the method or the action means.
31

32
00:02:32,880 --> 00:02:37,770
But you kind of want it to have some basic functionality, right? Because otherwise, it doesn't make any
32

33
00:02:37,770 --> 00:02:40,530
sense to anybody who's going onto our website.
33

34
00:02:40,530 --> 00:02:46,170
And even though this is our first website, it doesn't mean that it can't function or do something
34

35
00:02:46,170 --> 00:02:47,580
very simple.
35

36
00:02:47,580 --> 00:02:56,610
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

37
00:02:56,610 --> 00:03:00,750
when you press the submit button, they'll open up your default mail client.
37

38
00:03:00,780 --> 00:03:08,100
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

39
00:03:08,100 --> 00:03:15,720
address that you specify after the colon here. And the post, in this case, simply means that we're going
39

40
00:03:15,720 --> 00:03:22,380
to transfer what the user types into these input fields into the e-mail client.
40

41
00:03:22,380 --> 00:03:25,530
So if we hit save I'll show you what it looks like.
41

42
00:03:26,070 --> 00:03:28,490
So let's go to contact me.
42

43
00:03:28,650 --> 00:03:30,850
Let's give my name.
43

44
00:03:31,050 --> 00:03:32,480
My email
44

45
00:03:35,680 --> 00:03:39,080
and my message.
45

46
00:03:39,260 --> 00:03:46,910
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

47
00:03:46,910 --> 00:03:48,580
body of the email.
47

48
00:03:48,620 --> 00:03:54,590
Now it's not making too much sense right now and in order to change that, we actually have to add a little
48

49
00:03:54,590 --> 00:03:56,580
bit more to our form.
49

50
00:03:56,630 --> 00:04:04,580
So I'm going to delete this class and I'm going to add another attribute called encoding type. And this
50

51
00:04:04,580 --> 00:04:10,330
specifies, just as up here, we're specifying that our website is encoded in UTF 8.
51

52
00:04:10,460 --> 00:04:16,790
We're going to say that the data in our form is encoded in plain text so that way when it launches the
52

53
00:04:16,790 --> 00:04:23,690
mail app you won't have these funny percentage signs and numbers. You'll instead just have plain text.
53

54
00:04:23,690 --> 00:04:29,960
Now the other thing we need to add is a value to each of these name attributes because that's going
54

55
00:04:29,960 --> 00:04:35,450
to identify the data that's inside each of these inputs. And I'll show you what I mean.
55

56
00:04:35,480 --> 00:04:39,370
So let's add the name as yourName.
56

57
00:04:39,380 --> 00:04:47,270
Second one yourEmail and the third one.
57

58
00:04:47,270 --> 00:04:48,770
yourMessage.
58

59
00:04:50,310 --> 00:04:57,990
All right, let's hit save and let's go back to our website, hit refresh and let's try it again.
59

60
00:04:58,000 --> 00:05:03,310
Now I didn't show you this last time, but the cool thing about the e-mail text field that we added here
60

61
00:05:03,370 --> 00:05:09,370
by changing the input type to e-mail is that it does some basic validation. And that means if I type
61

62
00:05:09,370 --> 00:05:14,650
something like this and I try to hit enter - now it's a little bit different from browser to browser -
62

63
00:05:15,100 --> 00:05:22,000
But your browser might tell you that "please include an @ sign in your email address" because all e-mail
63

64
00:05:22,030 --> 00:05:24,160
addresses have @ signs, right?
64

65
00:05:24,160 --> 00:05:27,610
And then it says "Please enter a part following the @ sign".
65

66
00:05:27,700 --> 00:05:35,620
All emails have something after the @ sign. Then it says emails don't contain these weird symbols, so you're
66

67
00:05:35,620 --> 00:05:39,580
probably not entering a correct email or make sure that you check.
67

68
00:05:39,610 --> 00:05:41,230
So that's our e-mail.
68

69
00:05:41,920 --> 00:05:46,380
But even though it's not a real email it passes those basic validation checks.
69

70
00:05:46,510 --> 00:05:51,940
But we got all of those validation checks for free just by changing our input type to e-mail.
70

71
00:05:51,940 --> 00:05:53,370
So it's already a pretty good deal.
71

72
00:05:53,380 --> 00:05:58,570
And later on, we'll show you how to make that validation a little bit more sophisticated, but it's already
72

73
00:05:58,570 --> 00:05:59,920
kind of cool that we have that.
73

74
00:06:00,880 --> 00:06:02,400
And then we'll add an email.
74

75
00:06:02,410 --> 00:06:10,720
So let's say "Hey there!" again. And now hit submit and you can see, now, because we've added something to
75

76
00:06:10,720 --> 00:06:15,310
that name attribute where we said yourName, yourEmail, yourMessage.
76

77
00:06:15,310 --> 00:06:19,060
What we added here and here and here.
77

78
00:06:19,420 --> 00:06:29,590
Now when we submit our form and we post this data that the users inputted to our mail client, then it
78

79
00:06:29,590 --> 00:06:36,580
knows how to classify each bit of the data i.e. this input should be labeled your name.
79

80
00:06:36,610 --> 00:06:41,110
This input should be labelled your email. And your message should be labelled like so.
80

81
00:06:41,500 --> 00:06:47,620
So this is a really really basic little bit of functionality that we can get without yet understanding
81

82
00:06:47,710 --> 00:06:49,680
about JavaScript.
82

83
00:06:49,690 --> 00:06:56,170
So once you get to the Javascript module we're going to come back and revisit forms and we're going
83

84
00:06:56,170 --> 00:07:00,220
to unleash the full power of HTML forms.
84

85
00:07:00,220 --> 00:07:06,370
But for now, this is a neat little bit of functionality that when we publish our website it'll still
85

86
00:07:06,370 --> 00:07:14,590
work well enough for anybody who's actually coming onto our personal website or personal page. Now in
86

87
00:07:14,590 --> 00:07:15,300
the next lesson.
87

88
00:07:15,310 --> 00:07:19,390
We're going to be launching into our intermediate HTML challenge.
88

89
00:07:19,390 --> 00:07:24,130
So we're going to be getting you to recreate a web page using all of the things that you've learned
89

90
00:07:24,160 --> 00:07:25,410
in this module.
90

91
00:07:25,450 --> 00:07:28,300
So for all of that and more I'll see you on the next lesson.