1
00:00:02,210 --> 00:00:05,203
Now that we covered all those base elements and

2
00:00:05,203 --> 00:00:07,770
configurations for these elements,

3
00:00:07,770 --> 00:00:11,420
before we explore validation and showing

4
00:00:11,420 --> 00:00:13,120
the user some feedback,

5
00:00:13,120 --> 00:00:16,408
if some entered input value is incorrect.

6
00:00:16,408 --> 00:00:17,710
Before we do that,

7
00:00:17,710 --> 00:00:19,970
let's have a look at the HTML code

8
00:00:19,970 --> 00:00:21,830
we've got here for this form.

9
00:00:21,830 --> 00:00:24,036
And let's talk about semantics here

10
00:00:24,036 --> 00:00:28,370
because you learn HTML is all about semantics,

11
00:00:28,370 --> 00:00:32,720
and we want to describe our content as good as possible

12
00:00:32,720 --> 00:00:34,940
so that, we, as a developer

13
00:00:34,940 --> 00:00:38,560
always have a good time working with our code,

14
00:00:38,560 --> 00:00:40,210
since it's nicely structured.

15
00:00:40,210 --> 00:00:44,410
And of course also so that users with assistive technologies

16
00:00:44,410 --> 00:00:45,520
and search engines

17
00:00:45,520 --> 00:00:50,180
understand our content as good as possible.

18
00:00:50,180 --> 00:00:52,370
Now for that having a label,

19
00:00:52,370 --> 00:00:54,610
which is connected through the four attribute,

20
00:00:54,610 --> 00:00:56,630
is one of the most important things.

21
00:00:56,630 --> 00:00:59,204
And we are already doing that.

22
00:00:59,204 --> 00:01:01,530
But we can also add more markup

23
00:01:01,530 --> 00:01:05,730
to make this page and this form more meaningful.

24
00:01:05,730 --> 00:01:07,830
For example, we could have an h1 element

25
00:01:07,830 --> 00:01:09,070
above the form

26
00:01:09,070 --> 00:01:12,950
where we set a main heading for the overall page.

27
00:01:12,950 --> 00:01:16,450
Of course, often your form will just be a part

28
00:01:16,450 --> 00:01:17,980
of the overall page

29
00:01:17,980 --> 00:01:20,420
and not as here, the main part,

30
00:01:20,420 --> 00:01:22,650
but nonetheless, having such an H one tag

31
00:01:22,650 --> 00:01:24,910
could make a lot of sense.

32
00:01:24,910 --> 00:01:26,740
So here I'll just say,

33
00:01:26,740 --> 00:01:29,910
demo form because that is what it is.

34
00:01:29,910 --> 00:01:33,660
And of course we can wrap this in a header.

35
00:01:33,660 --> 00:01:35,510
We don't have to, but we can.

36
00:01:35,510 --> 00:01:39,210
And we can put the form into a main element.

37
00:01:39,210 --> 00:01:41,117
Again, that's not mandatory here,

38
00:01:41,117 --> 00:01:43,040
but it doesn't hurt

39
00:01:43,040 --> 00:01:45,331
since we know that main element anyways,

40
00:01:45,331 --> 00:01:48,529
we now make it very clear that the form in this case

41
00:01:48,529 --> 00:01:51,023
is the main part of this page.

42
00:01:51,890 --> 00:01:56,192
But now let's talk about semantics inside of that form.

43
00:01:56,192 --> 00:01:58,320
I got a bunch of inputs here,

44
00:01:58,320 --> 00:02:02,450
and this code is a bit hard to read for us as a developer.

45
00:02:02,450 --> 00:02:04,410
Now, if we have a look at our form,

46
00:02:04,410 --> 00:02:07,100
we could think about different sections,

47
00:02:07,100 --> 00:02:09,520
which we identify in this form.

48
00:02:09,520 --> 00:02:13,230
We could say that we have a section with the core data

49
00:02:13,230 --> 00:02:17,431
about us, maybe our name, the email, and the password.

50
00:02:17,431 --> 00:02:19,480
Then we could have a section

51
00:02:19,480 --> 00:02:22,810
with the extended personal data,

52
00:02:22,810 --> 00:02:25,220
the age and the birth date

53
00:02:25,220 --> 00:02:27,500
and the favorite color maybe.

54
00:02:27,500 --> 00:02:31,910
And then we could have a section with this message.

55
00:02:31,910 --> 00:02:35,250
And then we could have a section with our

56
00:02:35,250 --> 00:02:39,120
verification and contact details,

57
00:02:39,120 --> 00:02:40,815
and last but not least a section

58
00:02:40,815 --> 00:02:43,143
about agreeing to the terms.

59
00:02:44,170 --> 00:02:47,300
And therefore I'll add a couple of sections here,

60
00:02:47,300 --> 00:02:49,850
inside of this form.

61
00:02:49,850 --> 00:02:51,682
I'll add the section element there for

62
00:02:51,682 --> 00:02:56,682
and then move this username label and input in there,

63
00:02:56,770 --> 00:03:01,003
and also moved the email address label and input in there.

64
00:03:01,990 --> 00:03:06,870
And then I'll also move the password label and input

65
00:03:06,870 --> 00:03:09,223
into this section here.

66
00:03:12,940 --> 00:03:16,593
And now every label input combination could also be

67
00:03:16,593 --> 00:03:21,010
included into some wrapper element.

68
00:03:21,010 --> 00:03:21,843
For example,

69
00:03:21,843 --> 00:03:23,900
we could say that this technically,

70
00:03:23,900 --> 00:03:25,206
if we think about it,

71
00:03:25,206 --> 00:03:29,790
is a list of personal details data.

72
00:03:29,790 --> 00:03:32,263
So we could add an unordered list

73
00:03:32,263 --> 00:03:33,960
or an ordered list,

74
00:03:33,960 --> 00:03:36,170
if you think that the order matters here,

75
00:03:36,170 --> 00:03:38,610
but I would say the order is not that important.

76
00:03:38,610 --> 00:03:41,341
And then we have various list items in there

77
00:03:41,341 --> 00:03:45,530
and we move our label input combinations

78
00:03:45,530 --> 00:03:47,940
into those list items.

79
00:03:47,940 --> 00:03:50,070
Again, that's not something you have to do,

80
00:03:50,070 --> 00:03:52,400
but it might improve to semantics

81
00:03:52,400 --> 00:03:54,020
of our form a little bit.

82
00:03:54,020 --> 00:03:55,810
And then it is definitely something

83
00:03:55,810 --> 00:03:57,630
which we could consider doing.

84
00:03:57,630 --> 00:04:00,773
And for demo purposes, I am doing it here.

85
00:04:02,400 --> 00:04:03,650
Now thereafter,

86
00:04:03,650 --> 00:04:07,313
I have second section here,

87
00:04:10,020 --> 00:04:12,550
with our personal details,

88
00:04:12,550 --> 00:04:14,410
like the age.

89
00:04:14,410 --> 00:04:15,243
And again,

90
00:04:15,243 --> 00:04:16,719
I'll have an unordered list in here

91
00:04:16,719 --> 00:04:21,719
and a move my age label input into this first list item.

92
00:04:22,620 --> 00:04:26,900
Then add a second list item with the birth date,

93
00:04:26,900 --> 00:04:28,030
let's say.

94
00:04:28,030 --> 00:04:29,630
Of course, theoretically,

95
00:04:29,630 --> 00:04:32,420
we could calculate the age from the birth date,

96
00:04:32,420 --> 00:04:34,570
but I'll keep the age input field around

97
00:04:34,570 --> 00:04:39,570
so that we also have an example for the number input field.

98
00:04:39,830 --> 00:04:41,480
And then last but not least,

99
00:04:41,480 --> 00:04:45,370
I'll add a list item with my dropdown here,

100
00:04:45,370 --> 00:04:47,240
and it's label.

101
00:04:47,240 --> 00:04:48,123
Like this.

102
00:04:49,480 --> 00:04:51,456
Then we can have another section,

103
00:04:51,456 --> 00:04:55,170
which only has one element in there maybe.

104
00:04:55,170 --> 00:04:56,660
That message here,

105
00:04:56,660 --> 00:04:59,113
because it is just about getting that message.

106
00:05:00,310 --> 00:05:02,650
Now I'll remove that hr element,

107
00:05:02,650 --> 00:05:06,360
because now we don't need that separator anymore.

108
00:05:06,360 --> 00:05:07,193
And instead,

109
00:05:07,193 --> 00:05:08,623
I'll add yet another section

110
00:05:08,623 --> 00:05:12,810
where we talk about this account verification.

111
00:05:12,810 --> 00:05:15,270
So here I can grab this h2 tag

112
00:05:15,270 --> 00:05:17,690
and all those divs here,

113
00:05:17,690 --> 00:05:18,900
though,

114
00:05:18,900 --> 00:05:21,100
once inserted into the section,

115
00:05:21,100 --> 00:05:24,234
I actually want to replace the divs with list items

116
00:05:24,234 --> 00:05:27,316
and move that into a list as well,

117
00:05:27,316 --> 00:05:30,810
because having list items makes more sense semantically

118
00:05:30,810 --> 00:05:32,650
than having divs.

119
00:05:32,650 --> 00:05:36,110
So let's use LI instead here,

120
00:05:36,110 --> 00:05:39,780
and let's move the other radio buttons

121
00:05:39,780 --> 00:05:41,850
also into this unordered list

122
00:05:43,740 --> 00:05:48,420
and replace the div with LI here as well.

123
00:05:48,420 --> 00:05:50,143
Just like that.

124
00:05:55,350 --> 00:05:56,642
Now we might have another section regarding

125
00:05:56,642 --> 00:05:59,770
those contact details.

126
00:05:59,770 --> 00:06:02,210
And hence here, I'll grab these two divs

127
00:06:03,420 --> 00:06:05,760
and add them into this section

128
00:06:05,760 --> 00:06:06,593
or

129
00:06:06,593 --> 00:06:07,426
to be precise,

130
00:06:07,426 --> 00:06:10,220
revert this and add an unordered list first,

131
00:06:10,220 --> 00:06:15,220
and again, use list items here instead of divs.

132
00:06:15,220 --> 00:06:16,250
So list item,

133
00:06:16,250 --> 00:06:17,450
and list item,

134
00:06:17,450 --> 00:06:19,203
and list item.

135
00:06:21,310 --> 00:06:22,730
And then last but not least,

136
00:06:22,730 --> 00:06:25,993
I'll have one last section here with that,

137
00:06:25,993 --> 00:06:30,330
or the almost last section with that

138
00:06:30,330 --> 00:06:31,703
agree to terms,

139
00:06:32,570 --> 00:06:33,930
label and checkbox.

140
00:06:33,930 --> 00:06:36,350
And here I'll keep that div as a wrapper,

141
00:06:36,350 --> 00:06:39,540
since I have only one input in this section,

142
00:06:39,540 --> 00:06:41,743
having a list makes no sense here.

143
00:06:42,970 --> 00:06:45,100
Now we can also create a separate section

144
00:06:45,100 --> 00:06:46,468
for the button if we want to

145
00:06:46,468 --> 00:06:48,563
and move that in there.

146
00:06:49,460 --> 00:06:52,790
Now we can also add some titles to those sections

147
00:06:52,790 --> 00:06:54,060
if we want to.

148
00:06:54,060 --> 00:06:57,180
And again, I really want to emphasize that none of that

149
00:06:57,180 --> 00:06:58,341
has to be done, but you can do it

150
00:06:58,341 --> 00:07:03,341
if you want to add these extra semantics here

151
00:07:03,430 --> 00:07:04,830
and maybe improve the

152
00:07:04,830 --> 00:07:07,980
overall semantics of your form therefore.

153
00:07:07,980 --> 00:07:09,403
The titles, of course are optional.

154
00:07:09,403 --> 00:07:12,417
If you don't want to display a title in your form,

155
00:07:12,417 --> 00:07:15,340
then you shouldn't add one.

156
00:07:15,340 --> 00:07:19,230
But here we could say your personal details

157
00:07:19,230 --> 00:07:22,200
in the first section as a title,

158
00:07:22,200 --> 00:07:23,940
in the second section,

159
00:07:23,940 --> 00:07:26,010
we then say,

160
00:07:26,010 --> 00:07:30,000
more details because I'm extremely creative here.

161
00:07:30,000 --> 00:07:32,550
Then in the third section,

162
00:07:32,550 --> 00:07:35,570
we could actually omit this h2 tag

163
00:07:35,570 --> 00:07:38,300
since we only have one input here anyways,

164
00:07:38,300 --> 00:07:40,660
and the label describes pretty clearly

165
00:07:40,660 --> 00:07:43,110
what this text area is about.

166
00:07:43,110 --> 00:07:46,010
In the next section, we already have a title.

167
00:07:46,010 --> 00:07:47,730
And then here

168
00:07:47,730 --> 00:07:50,950
in this section with these contact details,

169
00:07:50,950 --> 00:07:52,095
we could say,

170
00:07:52,095 --> 00:07:55,810
'how should we contact you' as a title.

171
00:07:55,810 --> 00:07:58,400
So as a h2 element.

172
00:07:58,400 --> 00:08:00,330
And then down here in this section,

173
00:08:00,330 --> 00:08:02,240
I'll omit the title again,

174
00:08:02,240 --> 00:08:06,170
because agreeing to the terms is quite straightforward here.

175
00:08:06,170 --> 00:08:10,833
And I also don't need a title here for this button.

176
00:08:12,250 --> 00:08:14,980
With that of course, it now looks very different.

177
00:08:14,980 --> 00:08:17,522
We have all these bullet points for example here,

178
00:08:17,522 --> 00:08:19,990
and I don't want those bullet points.

179
00:08:19,990 --> 00:08:23,630
This age one title also is very hard to read.

180
00:08:23,630 --> 00:08:24,630
And therefore, of course,

181
00:08:24,630 --> 00:08:27,540
we also want to work on this styles again.

182
00:08:27,540 --> 00:08:29,181
For example, on the h1 element,

183
00:08:29,181 --> 00:08:31,660
I'll align the text in the center,

184
00:08:31,660 --> 00:08:35,470
with text align center, and set the color to white,

185
00:08:35,470 --> 00:08:37,633
to make this text easier to read.

186
00:08:38,539 --> 00:08:41,559
And then I also want to target all unordered lists

187
00:08:41,559 --> 00:08:43,000
on this page

188
00:08:43,000 --> 00:08:45,040
and set the list style to null,

189
00:08:45,040 --> 00:08:47,630
to remove these bullet points

190
00:08:47,630 --> 00:08:49,610
and set margin to null and

191
00:08:49,610 --> 00:08:51,700
padding to null as well,

192
00:08:51,700 --> 00:08:53,660
to remove all indentation

193
00:08:53,660 --> 00:08:57,220
so that we have the lists for semantic reasons,

194
00:08:57,220 --> 00:09:01,460
but we don't get any visual effect from these list items.

195
00:09:01,460 --> 00:09:04,274
With that, the form looks basically as it did before,

196
00:09:04,274 --> 00:09:07,860
just with some extra titles in there.

197
00:09:07,860 --> 00:09:10,820
And I would argue that these new elements

198
00:09:10,820 --> 00:09:12,825
and these new titles especially,

199
00:09:12,825 --> 00:09:15,897
did not just improve to semantics off the form,

200
00:09:15,897 --> 00:09:19,010
but actually also make the form a bit easier

201
00:09:19,010 --> 00:09:21,550
to digest as a user as well.

202
00:09:21,550 --> 00:09:23,993
It's now more structured than before.

203
00:09:24,892 --> 00:09:27,792
Now I want to have a separator between

204
00:09:27,792 --> 00:09:32,330
the contact check boxes and the agree to terms check box

205
00:09:32,330 --> 00:09:37,170
and for that here we can bring back this hR element

206
00:09:37,170 --> 00:09:38,580
if we want to.

207
00:09:38,580 --> 00:09:42,280
And that with this, we've got this horizontal line again.

208
00:09:42,280 --> 00:09:46,640
Not a must do, but something you can consider doing here.

209
00:09:46,640 --> 00:09:47,630
And with that,

210
00:09:47,630 --> 00:09:50,560
that form is looking good from a

211
00:09:50,560 --> 00:09:52,220
styling perspective.

212
00:09:52,220 --> 00:09:56,320
And I would say now also from a semantic perspective,

213
00:09:56,320 --> 00:09:59,453
if we have a look at the raw HTML code.

214
00:10:00,630 --> 00:10:02,543
And here we also can really see how

215
00:10:02,543 --> 00:10:07,350
these better semantics also help us as a developer.

216
00:10:07,350 --> 00:10:11,120
Because now if we compare this to the previous form

217
00:10:11,120 --> 00:10:12,080
of this form,

218
00:10:12,080 --> 00:10:15,960
it's way easier to identify the individual input items

219
00:10:15,960 --> 00:10:18,530
and to work on that code.

220
00:10:18,530 --> 00:10:23,363
It's more structured. And that also helps us as a developer.