1
00:00:02,060 --> 00:00:04,300
Now, regarding the inputs

2
00:00:04,300 --> 00:00:05,850
that we want in this form,

3
00:00:05,850 --> 00:00:08,570
this form has various elements

4
00:00:08,570 --> 00:00:10,410
and also various sections

5
00:00:10,410 --> 00:00:13,563
into which we can group these elements in the end.

6
00:00:14,760 --> 00:00:17,210
For this, you're inside of this form element.

7
00:00:17,210 --> 00:00:19,610
I'll remove this dummy text,

8
00:00:19,610 --> 00:00:21,490
and instead add a new section

9
00:00:21,490 --> 00:00:24,460
with that section element here.

10
00:00:24,460 --> 00:00:26,637
And then add a title where I'll say,

11
00:00:26,637 --> 00:00:29,110
"How can we help you?"

12
00:00:29,110 --> 00:00:32,310
Because after all, it's a contact form.

13
00:00:32,310 --> 00:00:34,670
And then here, we, first of all,

14
00:00:34,670 --> 00:00:39,010
want to get some basic information about the user,

15
00:00:39,010 --> 00:00:41,250
and then, of course, the message

16
00:00:41,250 --> 00:00:43,390
that the user wants to send us,

17
00:00:43,390 --> 00:00:46,720
which answers to question how we can help.

18
00:00:46,720 --> 00:00:51,490
And for this, I'll render a unordered list of inputs,

19
00:00:51,490 --> 00:00:55,700
which are related because they all belong into this section

20
00:00:55,700 --> 00:00:57,860
where every input has a label

21
00:00:57,860 --> 00:01:00,870
and then the input element itself.

22
00:01:00,870 --> 00:01:03,380
And that's, of course, the same pattern

23
00:01:03,380 --> 00:01:05,710
we used in this module.

24
00:01:05,710 --> 00:01:09,123
After all, this is the practice project for this module.

25
00:01:10,170 --> 00:01:11,990
So here for the first input,

26
00:01:11,990 --> 00:01:13,647
we can add a label where we say,

27
00:01:13,647 --> 00:01:16,180
"Your Name," and below that,

28
00:01:16,180 --> 00:01:21,110
add an input of type text with an id of username,

29
00:01:21,110 --> 00:01:24,970
for example, and with a name attribute,

30
00:01:24,970 --> 00:01:26,570
which holds this identifier

31
00:01:26,570 --> 00:01:28,670
that can be extracted on the server

32
00:01:28,670 --> 00:01:30,476
when the form is submitted

33
00:01:30,476 --> 00:01:32,540
(something we'll do later in the course)

34
00:01:32,540 --> 00:01:34,830
which could also be username,

35
00:01:34,830 --> 00:01:36,820
but it can also be a different value.

36
00:01:36,820 --> 00:01:39,343
It doesn't have to be the same as the id.

37
00:01:40,610 --> 00:01:42,340
Now you did learn that labels

38
00:01:42,340 --> 00:01:43,920
should be connected to inputs

39
00:01:43,920 --> 00:01:46,360
with help of that for attribute,

40
00:01:46,360 --> 00:01:49,400
which points at that id of the input

41
00:01:49,400 --> 00:01:51,970
to which the label is related.

42
00:01:51,970 --> 00:01:54,330
So in this case username,

43
00:01:54,330 --> 00:01:56,290
since that's the idea of the input

44
00:01:56,290 --> 00:02:01,290
to which this label belongs, like this.

45
00:02:01,610 --> 00:02:06,610
Then, I'll add another list item here, like this.

46
00:02:07,190 --> 00:02:10,803
And they will basically have the same format.

47
00:02:11,670 --> 00:02:14,700
So I'll copy that label input combination,

48
00:02:14,700 --> 00:02:19,170
but here I want to get the email address of the user.

49
00:02:19,170 --> 00:02:22,180
So we could say, "Your E-Mail Address,"

50
00:02:22,180 --> 00:02:25,013
and the type of the input, therefore is email.

51
00:02:26,180 --> 00:02:28,160
And therefore, of course, the id

52
00:02:28,160 --> 00:02:30,910
and the name value also should be different.

53
00:02:30,910 --> 00:02:35,810
Here we can also use email in all these places,

54
00:02:35,810 --> 00:02:39,023
or any other identifier of your choice.

55
00:02:40,420 --> 00:02:43,050
Then, we also want to get the phone number here,

56
00:02:43,050 --> 00:02:44,710
so I'll copy that list item,

57
00:02:44,710 --> 00:02:47,550
and add another label input pair

58
00:02:47,550 --> 00:02:50,550
where we say, "Your Phone Number,"

59
00:02:50,550 --> 00:02:55,440
and here we can use input type we have not seen thus far.

60
00:02:55,440 --> 00:02:57,750
We haven't covered it up to this point.

61
00:02:57,750 --> 00:03:00,880
And therefore, if you did not use that type,

62
00:03:00,880 --> 00:03:02,710
that's of course, no problem,

63
00:03:02,710 --> 00:03:05,360
but maybe you also saw that type

64
00:03:05,360 --> 00:03:08,760
in the IDE auto-completion or in MDN.

65
00:03:08,760 --> 00:03:10,910
There is the tel type,

66
00:03:10,910 --> 00:03:13,460
which we can also assign to inputs

67
00:03:13,460 --> 00:03:18,460
to display an input, which is optimized for phone numbers.

68
00:03:18,520 --> 00:03:21,410
Which matters especially when we visit

69
00:03:21,410 --> 00:03:24,700
and use this form through a mobile phone.

70
00:03:24,700 --> 00:03:28,310
Then on a smartphone, we will get a keyboard

71
00:03:28,310 --> 00:03:31,240
that makes entering phone numbers easier.

72
00:03:31,240 --> 00:03:33,963
That's why this tel type is important.

73
00:03:35,000 --> 00:03:38,690
And then here we can use phone as an identifier.

74
00:03:38,690 --> 00:03:39,830
And as you see here,

75
00:03:39,830 --> 00:03:43,650
I will always use the same value for name and id,

76
00:03:43,650 --> 00:03:46,483
though you could also use different values.

77
00:03:47,520 --> 00:03:50,770
Now then, I'll add one last list item here,

78
00:03:50,770 --> 00:03:54,000
and that will actually then be the actual message

79
00:03:54,000 --> 00:03:56,280
the user wants to send.

80
00:03:56,280 --> 00:03:59,210
So I'll say, "Your Message," on the label

81
00:03:59,210 --> 00:04:03,200
and target an element, and input element

82
00:04:03,200 --> 00:04:05,040
with an id of message.

83
00:04:05,040 --> 00:04:08,900
But here, I will not use a regular input element,

84
00:04:08,900 --> 00:04:12,340
but instead that text area element,

85
00:04:12,340 --> 00:04:13,900
which is the proper element

86
00:04:13,900 --> 00:04:16,940
for longer text that's entered.

87
00:04:16,940 --> 00:04:20,790
And here you learned that unlike the input element,

88
00:04:20,790 --> 00:04:24,120
the text area element is not self-closing,

89
00:04:24,120 --> 00:04:26,290
it's not a void element.

90
00:04:26,290 --> 00:04:29,560
Instead you have an opening and a closing tag here,

91
00:04:29,560 --> 00:04:32,960
and that is just something you have to remember.

92
00:04:32,960 --> 00:04:34,910
And then we can give this an id

93
00:04:34,910 --> 00:04:38,083
and also a name, of course, like this.

94
00:04:39,050 --> 00:04:42,490
Now with that, I'll then add a second section

95
00:04:42,490 --> 00:04:45,560
in this form because now we got those basics.

96
00:04:45,560 --> 00:04:47,330
We got the basic data.

97
00:04:47,330 --> 00:04:51,410
If you will recall that finished version which we want,

98
00:04:51,410 --> 00:04:53,700
which has showed you in the last lectures,

99
00:04:53,700 --> 00:04:55,510
when I gave you that challenge.

100
00:04:55,510 --> 00:04:59,600
There, we did not just fetch this basic information,

101
00:04:59,600 --> 00:05:03,450
but we also want to find out how the user found us.

102
00:05:03,450 --> 00:05:06,690
And we want to get that reply to that question

103
00:05:06,690 --> 00:05:09,120
with help of a dropdown.

104
00:05:09,120 --> 00:05:11,590
So therefore here in this section,

105
00:05:11,590 --> 00:05:14,947
I'll add another label where I say,

106
00:05:14,947 --> 00:05:17,790
"How did you find us?"

107
00:05:17,790 --> 00:05:20,070
And then I'll not use an input,

108
00:05:20,070 --> 00:05:21,730
not use a text area,

109
00:05:21,730 --> 00:05:24,070
but instead create a dropdown

110
00:05:24,070 --> 00:05:27,320
with help of the select element here.

111
00:05:27,320 --> 00:05:30,520
And then you learned that select works such

112
00:05:30,520 --> 00:05:34,440
that you have various options inside of it.

113
00:05:34,440 --> 00:05:37,840
And every option can have a human-readable text

114
00:05:37,840 --> 00:05:39,800
between the opening and closing tag

115
00:05:39,800 --> 00:05:43,470
and a machine-readable value optionally

116
00:05:43,470 --> 00:05:45,123
with the value attribute.

117
00:05:46,020 --> 00:05:47,970
And here I'll use both.

118
00:05:47,970 --> 00:05:52,170
I'll give this a value attribute where I say search

119
00:05:52,170 --> 00:05:55,630
and a human-readable text of, "Web Search."

120
00:05:55,630 --> 00:05:59,560
And then I'll add another option here,

121
00:05:59,560 --> 00:06:03,723
where I set the value to word of mouth,

122
00:06:05,580 --> 00:06:08,653
and also use "Word of Mouth" here.

123
00:06:09,530 --> 00:06:11,220
And last, but not least,

124
00:06:11,220 --> 00:06:14,230
add another option where I set the value

125
00:06:14,230 --> 00:06:16,570
to other and say, "Other" here,

126
00:06:16,570 --> 00:06:18,293
as a human-readable text.

127
00:06:19,700 --> 00:06:22,430
Now just like the other input elements,

128
00:06:22,430 --> 00:06:24,310
input, and text area,

129
00:06:24,310 --> 00:06:27,020
select also gets a name,

130
00:06:27,020 --> 00:06:29,830
which then would be used on the server site

131
00:06:29,830 --> 00:06:32,000
to extract that selected value

132
00:06:32,000 --> 00:06:35,700
and also an id to select it to the label.

133
00:06:35,700 --> 00:06:40,700
So here I'll just use channel as a name

134
00:06:42,690 --> 00:06:46,130
and also id as a channel,

135
00:06:46,130 --> 00:06:47,580
as an id, I mean,

136
00:06:47,580 --> 00:06:49,950
And for the label, we set the for attribute

137
00:06:49,950 --> 00:06:52,143
and point at channel, therefore.

138
00:06:52,980 --> 00:06:55,720
And that's it for this second section here,

139
00:06:55,720 --> 00:06:58,053
where we did add to this dropdown.

140
00:06:59,020 --> 00:07:02,680
Now we got a couple of other sections left here,

141
00:07:02,680 --> 00:07:05,270
one section with radio buttons

142
00:07:05,270 --> 00:07:08,770
where users can select how we should contact them.

143
00:07:08,770 --> 00:07:11,210
One section with a checkbox,

144
00:07:11,210 --> 00:07:13,130
for accepting the terms.

145
00:07:13,130 --> 00:07:16,120
And then also a section with the buttons.

146
00:07:16,120 --> 00:07:17,623
So let's now tackle that.