Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,410 --> 00:00:02,360
In this video,
2
00:00:02,360 --> 00:00:04,740
we are going to work with form elements
3
00:00:04,740 --> 00:00:07,110
for the very first time.
4
00:00:07,110 --> 00:00:10,860
So this is going to be really interesting and important.
5
00:00:10,860 --> 00:00:13,163
So let's get started here.
6
00:00:14,680 --> 00:00:18,140
But before we work with the actual form elements,
7
00:00:18,140 --> 00:00:22,190
let's first place some other content here in this
8
00:00:22,190 --> 00:00:23,640
CTA textbox.
9
00:00:25,160 --> 00:00:27,083
And first of all, we have,
10
00:00:28,530 --> 00:00:30,263
I think, some paragraph here.
11
00:00:31,410 --> 00:00:32,960
So here, this is the section
12
00:00:32,960 --> 00:00:35,510
where we actually get the instructions.
13
00:00:35,510 --> 00:00:39,581
So create a simple form for users to sign up.
14
00:00:39,581 --> 00:00:42,550
And then here is, like, some text,
15
00:00:42,550 --> 00:00:45,563
and this here, what looks like a heading.
16
00:00:46,680 --> 00:00:47,883
So let's grab this,
17
00:00:49,210 --> 00:00:52,833
and use it as a secondary heading.
18
00:00:53,930 --> 00:00:54,763
So h2.
19
00:00:55,900 --> 00:00:59,177
And so here we will again use the heading-secondary,
20
00:01:03,490 --> 00:01:07,210
but this time without using first the subheading,
21
00:01:07,210 --> 00:01:10,083
because here we do not have enough space for that.
22
00:01:11,140 --> 00:01:12,200
Okay.
23
00:01:12,200 --> 00:01:15,563
And then below that, we have some paragraph.
24
00:01:17,450 --> 00:01:21,723
Let's call it cta-text, where we can then place this.
25
00:01:23,190 --> 00:01:26,683
So basically one final text to try to convince the user.
26
00:01:27,770 --> 00:01:30,200
Now we offer a free sample meal.
27
00:01:30,200 --> 00:01:32,710
Sounds a little bit boring.
28
00:01:32,710 --> 00:01:34,573
So, let's try something else.
29
00:01:35,480 --> 00:01:40,480
Get your first meal for free.
30
00:01:42,850 --> 00:01:44,060
Right?
31
00:01:44,060 --> 00:01:45,733
So let's check that out.
32
00:01:48,040 --> 00:01:50,160
And whenever we change the HTML,
33
00:01:50,160 --> 00:01:53,020
it then jumps back up on the page.
34
00:01:53,020 --> 00:01:56,830
But anyway, here is what we have so far.
35
00:01:56,830 --> 00:01:58,780
And well, first of all,
36
00:01:58,780 --> 00:02:02,870
we need to add some padding here inside of this box.
37
00:02:02,870 --> 00:02:06,630
And then what I can see immediately is that this text here
38
00:02:06,630 --> 00:02:10,170
looks a little bit unnatural on this background color,
39
00:02:10,170 --> 00:02:11,950
and especially this one here.
40
00:02:11,950 --> 00:02:13,320
But even here,
41
00:02:13,320 --> 00:02:16,200
it is complete gray, of course.
42
00:02:16,200 --> 00:02:20,414
And to contrast with this background color is not perfect.
43
00:02:20,414 --> 00:02:22,480
Now we could leave it like this.
44
00:02:22,480 --> 00:02:24,560
It would be no problem at all,
45
00:02:24,560 --> 00:02:26,760
but I want to actually show you something here
46
00:02:26,760 --> 00:02:27,850
that we talked about
47
00:02:27,850 --> 00:02:31,069
in the color design lecture way back.
48
00:02:31,069 --> 00:02:34,860
So what I mean is that we can use a very dark shade
49
00:02:34,860 --> 00:02:39,620
of the background color for the text, basically,
50
00:02:39,620 --> 00:02:43,563
so instead of it being a completely unrelated gray color.
51
00:02:45,330 --> 00:02:46,163
All right.
52
00:02:46,163 --> 00:02:49,033
So let's do that and grab one of these colors here,
53
00:02:49,940 --> 00:02:51,763
and let's maybe try this one.
54
00:02:56,020 --> 00:02:56,973
All right.
55
00:02:57,870 --> 00:03:02,563
So let's set the color here on the CTA text box.
56
00:03:05,530 --> 00:03:08,450
And so then, the CTA text will inherit it,
57
00:03:08,450 --> 00:03:12,000
but not this heading secondary because heading secondary
58
00:03:12,000 --> 00:03:14,133
does actually override that.
59
00:03:16,000 --> 00:03:18,550
So what I'm going to do here is to use the descendant
60
00:03:18,550 --> 00:03:20,593
selector and say,
61
00:03:22,207 --> 00:03:25,677
the heading secondary that is inside of the CTA
62
00:03:29,270 --> 00:03:30,883
should also have that color.
63
00:03:33,630 --> 00:03:34,463
All right.
64
00:03:36,010 --> 00:03:38,010
And now, since we're here,
65
00:03:38,010 --> 00:03:40,583
let's also add some padding here.
66
00:03:44,030 --> 00:03:46,833
So 6.4 REM maybe.
67
00:03:48,880 --> 00:03:49,904
Okay.
68
00:03:49,904 --> 00:03:54,210
We can also dramatically reduce the margin to the bottom
69
00:03:54,210 --> 00:03:56,373
that the default heading secondary has.
70
00:04:00,240 --> 00:04:03,723
So let's say just two or three point to REM,
71
00:04:04,600 --> 00:04:05,823
just like this.
72
00:04:07,890 --> 00:04:12,620
And that already looks a lot better, right?
73
00:04:12,620 --> 00:04:15,190
So it would be quite acceptable like this,
74
00:04:15,190 --> 00:04:19,033
but maybe it is still a tad too dark here.
75
00:04:19,980 --> 00:04:22,230
So I mean like this,
76
00:04:22,230 --> 00:04:26,160
it almost looks like black or still a normal gray.
77
00:04:26,160 --> 00:04:27,710
So let's try the next one here.
78
00:04:31,810 --> 00:04:34,363
So replace that in both places.
79
00:04:35,200 --> 00:04:39,120
And well, maybe before we do that,
80
00:04:39,120 --> 00:04:42,350
let's also increase the font size here
81
00:04:42,350 --> 00:04:46,370
because that will also help it make it look more normal.
82
00:04:46,370 --> 00:04:51,010
So let's actually select the CTA text,
83
00:04:55,570 --> 00:04:58,680
and give it a font size of 1.8 REM
84
00:05:01,490 --> 00:05:04,910
and line height of 1.8, as well.
85
00:05:04,910 --> 00:05:07,440
And we are using this year so many times
86
00:05:07,440 --> 00:05:09,330
the combination of these two
87
00:05:09,330 --> 00:05:13,110
that we could almost make it into its own class.
88
00:05:13,110 --> 00:05:13,943
Right.
89
00:05:15,330 --> 00:05:18,100
But let's not overcomplicate things here.
90
00:05:18,100 --> 00:05:22,080
Just to keep it like this and beautiful.
91
00:05:22,080 --> 00:05:24,200
So this looks really cool, I think.
92
00:05:24,200 --> 00:05:26,240
The color now is nicely integrated
93
00:05:26,240 --> 00:05:28,670
into this background here.
94
00:05:28,670 --> 00:05:31,290
Let's just see if this is also okay
95
00:05:31,290 --> 00:05:33,513
in terms of the color contrast.
96
00:05:36,160 --> 00:05:39,735
So getting this one here for the text
97
00:05:39,735 --> 00:05:43,580
and then the background, well,
98
00:05:43,580 --> 00:05:45,480
it's kind of this one here at the top.
99
00:05:46,320 --> 00:05:47,983
So, let's just try that one.
100
00:05:50,050 --> 00:05:52,230
And yeah, that is pretty good.
101
00:05:52,230 --> 00:05:55,250
And even if it was here a little bit darker,
102
00:05:55,250 --> 00:05:56,650
then we would still be fine.
103
00:05:58,340 --> 00:05:59,890
So that is in short.
104
00:05:59,890 --> 00:06:03,710
And so now here we have a this working beautifully.
105
00:06:03,710 --> 00:06:06,900
Let's just remove some of the space in the top here
106
00:06:06,900 --> 00:06:08,634
because having the big heading here
107
00:06:08,634 --> 00:06:12,180
gives it the impression that there is more space
108
00:06:12,180 --> 00:06:13,770
than there actually is.
109
00:06:13,770 --> 00:06:16,653
So we can reduce that a little bit on the top.
110
00:06:19,270 --> 00:06:20,433
Where?
111
00:06:20,433 --> 00:06:22,053
Ah, right here.
112
00:06:23,130 --> 00:06:26,073
So we can step it down a little bit here.
113
00:06:27,670 --> 00:06:28,910
So the top,
114
00:06:28,910 --> 00:06:33,040
we can go one down to 4.8 REM and then the others,
115
00:06:33,040 --> 00:06:35,493
we leave them at 6.4.
116
00:06:36,560 --> 00:06:37,393
All of them.
117
00:06:40,410 --> 00:06:42,690
Okay, nice.
118
00:06:42,690 --> 00:06:44,970
And so now it's time to actually start working
119
00:06:44,970 --> 00:06:47,400
on that form here.
120
00:06:47,400 --> 00:06:50,540
So again, that's going to be the very first time.
121
00:06:50,540 --> 00:06:53,160
So, let's take care of that now.
122
00:06:53,160 --> 00:06:55,200
So right here, after the text,
123
00:06:55,200 --> 00:06:58,173
we will now introduce the form element.
124
00:06:59,160 --> 00:07:00,610
Now the form on its own
125
00:07:00,610 --> 00:07:03,250
doesn't really look like anything special.
126
00:07:03,250 --> 00:07:07,590
It's really just a box, basically, for the input elements
127
00:07:07,590 --> 00:07:09,053
that we're going to use next.
128
00:07:10,580 --> 00:07:12,610
So we still need to format it.
129
00:07:12,610 --> 00:07:16,323
So let's give it a class of cta-form.
130
00:07:17,520 --> 00:07:19,100
All right.
131
00:07:19,100 --> 00:07:21,393
Let's close down the sidebar here again.
132
00:07:22,720 --> 00:07:26,930
And so now, it's time to start using some real input fields.
133
00:07:26,930 --> 00:07:30,643
And for that, we can use exactly the input element.
134
00:07:31,870 --> 00:07:34,850
So input, and then the most important attribute
135
00:07:34,850 --> 00:07:37,263
that we need to set here is the type.
136
00:07:38,180 --> 00:07:41,110
So VS code automatically gives us here
137
00:07:41,110 --> 00:07:43,840
a couple of different types.
138
00:07:43,840 --> 00:07:47,600
So probably that's actually all the available types,
139
00:07:47,600 --> 00:07:50,370
and the most common one is text.
140
00:07:50,370 --> 00:07:53,060
But you see that we have different types for password,
141
00:07:53,060 --> 00:07:58,060
for numbers, for uploading files, for emails.
142
00:07:58,610 --> 00:08:03,160
And so we're going to use a couple of these as we go here.
143
00:08:03,160 --> 00:08:06,870
But for now, let's use a regular text input field,
144
00:08:06,870 --> 00:08:08,910
which is the most common one.
145
00:08:08,910 --> 00:08:09,743
Okay.
146
00:08:10,610 --> 00:08:12,470
Let's do another one.
147
00:08:12,470 --> 00:08:13,303
Input.
148
00:08:14,860 --> 00:08:16,743
Let's try email now.
149
00:08:18,690 --> 00:08:21,110
Then next, we can also add a button,
150
00:08:21,110 --> 00:08:23,280
and we can do that in two ways.
151
00:08:23,280 --> 00:08:28,280
First, we can use input of the type submit like this,
152
00:08:29,880 --> 00:08:32,743
but I actually prefer to use a regular button.
153
00:08:34,680 --> 00:08:37,470
So if we just use a regular button here,
154
00:08:37,470 --> 00:08:39,360
and then click that button,
155
00:08:39,360 --> 00:08:41,733
the form will automatically be submitted.
156
00:08:42,870 --> 00:08:47,431
So let's just use the one that we already have used before.
157
00:08:47,431 --> 00:08:51,133
And let's say, sign up now.
158
00:08:52,180 --> 00:08:53,680
All right.
159
00:08:53,680 --> 00:08:54,513
Now of course,
160
00:08:54,513 --> 00:08:57,340
when we click on this button here at some point,
161
00:08:57,340 --> 00:08:59,590
then nothing will happen.
162
00:08:59,590 --> 00:09:03,410
So usually, we will need some code on or server
163
00:09:03,410 --> 00:09:07,130
that is standing ready to receive a submitted form.
164
00:09:07,130 --> 00:09:11,159
So with HTML, we can actually only collect the data,
165
00:09:11,159 --> 00:09:14,710
but we cannot, like, send the data anywhere,
166
00:09:14,710 --> 00:09:17,360
and we cannot receive it anywhere.
167
00:09:17,360 --> 00:09:21,220
So with HTML, we can only collect some data,
168
00:09:21,220 --> 00:09:23,870
but we cannot receive it anywhere.
169
00:09:23,870 --> 00:09:25,130
All right.
170
00:09:25,130 --> 00:09:27,430
So really on the HTML side here,
171
00:09:27,430 --> 00:09:31,190
this is just for receiving and for sending the data.
172
00:09:31,190 --> 00:09:32,480
And to send the data,
173
00:09:32,480 --> 00:09:37,204
we can define the action tag here or the action attribute,
174
00:09:37,204 --> 00:09:40,580
and then we can set the URL of the place
175
00:09:40,580 --> 00:09:42,670
where the data should be sent to.
176
00:09:42,670 --> 00:09:43,503
And again,
177
00:09:43,503 --> 00:09:45,410
you would then need some code on your server
178
00:09:45,410 --> 00:09:47,670
that is ready to receive this data,
179
00:09:47,670 --> 00:09:51,270
and which has a URL where you can send it to.
180
00:09:51,270 --> 00:09:54,390
But for now, let's just set it like this.
181
00:09:54,390 --> 00:09:56,630
But actually by the end of the course,
182
00:09:56,630 --> 00:09:58,292
I will show you a great solution
183
00:09:58,292 --> 00:10:01,310
where we can actually make this form work.
184
00:10:01,310 --> 00:10:05,350
So, without having to write any code on or backend.
185
00:10:05,350 --> 00:10:08,170
So, on our server, okay.
186
00:10:08,170 --> 00:10:11,700
But anyway, let's just take a look at what this very,
187
00:10:11,700 --> 00:10:16,600
very simple form looks like in HTML now.
188
00:10:16,600 --> 00:10:17,603
So, in the browser.
189
00:10:19,070 --> 00:10:22,090
So indeed, we have two input forms
190
00:10:22,090 --> 00:10:25,063
where we can write, and we have a button.
191
00:10:26,590 --> 00:10:28,670
And then as we click this here,
192
00:10:28,670 --> 00:10:30,600
you see that we get this warning.
193
00:10:30,600 --> 00:10:32,481
And so that is because the browser knows
194
00:10:32,481 --> 00:10:35,330
that here we should have written an email.
195
00:10:35,330 --> 00:10:38,700
And the reason for that is that in our HTML code,
196
00:10:38,700 --> 00:10:42,329
we defined this as the type of email, right?
197
00:10:42,329 --> 00:10:45,440
And so that is very, very helpful then.
198
00:10:45,440 --> 00:10:48,750
Now here, we can also make a couple of different things.
199
00:10:48,750 --> 00:10:51,943
So for example, we can define a place holder.
200
00:10:53,370 --> 00:10:54,800
So place holder,
201
00:10:54,800 --> 00:10:57,350
and then it is coming as a placeholder
202
00:10:57,350 --> 00:11:01,710
to display a kind of the format of the data that we want.
203
00:11:01,710 --> 00:11:04,093
So let's say John Smith.
204
00:11:04,970 --> 00:11:07,580
Now what many people do here in the placeholder
205
00:11:07,580 --> 00:11:11,470
is to actually give a label to the input.
206
00:11:11,470 --> 00:11:14,250
So instead of writing here, John Smith,
207
00:11:14,250 --> 00:11:18,453
we could write also your name.
208
00:11:20,760 --> 00:11:21,670
Right, and then here,
209
00:11:21,670 --> 00:11:22,959
it would become more obvious
210
00:11:22,959 --> 00:11:26,210
what you need to right here in this field.
211
00:11:26,210 --> 00:11:27,860
Then of course as you write something,
212
00:11:27,860 --> 00:11:29,713
that will override the placeholder.
213
00:11:30,750 --> 00:11:33,950
But again, it is actually a better practice to here,
214
00:11:33,950 --> 00:11:36,930
write the format of the data that you expect,
215
00:11:36,930 --> 00:11:41,273
and write the actual label into the label element.
216
00:11:42,160 --> 00:11:45,392
So in HTML, we do have an actual label element,
217
00:11:45,392 --> 00:11:47,753
which we use exactly for this.
218
00:11:49,010 --> 00:11:52,693
So let's say here, we want the full name.
219
00:11:53,600 --> 00:11:54,980
Okay.
220
00:11:54,980 --> 00:11:58,590
So the label element is actually like a complete element
221
00:11:58,590 --> 00:12:03,140
with a opening tag, a closing tag, and the content.
222
00:12:03,140 --> 00:12:04,530
While the input element,
223
00:12:04,530 --> 00:12:07,710
as you might've noticed, only has the opening tag,
224
00:12:07,710 --> 00:12:09,450
but it has no content.
225
00:12:09,450 --> 00:12:12,793
So that's why it has this closing slash right here.
226
00:12:14,760 --> 00:12:15,810
Okay.
227
00:12:15,810 --> 00:12:17,260
Let's try another label here.
228
00:12:19,441 --> 00:12:23,260
So, email address.
229
00:12:23,260 --> 00:12:27,833
So, let's actually also put a placeholder here,
230
00:12:30,270 --> 00:12:35,270
like me@example.com.
231
00:12:37,488 --> 00:12:39,020
All right.
232
00:12:39,020 --> 00:12:40,470
So, there we go.
233
00:12:40,470 --> 00:12:42,320
We have our label here.
234
00:12:42,320 --> 00:12:45,300
And then besides that we have the input field.
235
00:12:45,300 --> 00:12:47,390
And they are all side by side
236
00:12:47,390 --> 00:12:50,620
because they are all inline elements.
237
00:12:50,620 --> 00:12:51,730
So by default,
238
00:12:51,730 --> 00:12:54,167
all of them will not create a line break,
239
00:12:54,167 --> 00:12:57,960
and will simply be placed one after another.
240
00:12:57,960 --> 00:12:59,190
Great.
241
00:12:59,190 --> 00:13:01,750
Now another thing that we can do with labels,
242
00:13:01,750 --> 00:13:04,840
which is something that maybe you have experienced before
243
00:13:04,840 --> 00:13:08,850
while using the web, is that we can click on them.
244
00:13:08,850 --> 00:13:11,930
And then, the input field that belongs to it
245
00:13:11,930 --> 00:13:13,873
will become active like this.
246
00:13:14,950 --> 00:13:16,660
So that is something very common,
247
00:13:16,660 --> 00:13:19,314
and it makes a lot of sense to implement this.
248
00:13:19,314 --> 00:13:21,113
So let me show you how.
249
00:13:22,920 --> 00:13:25,973
So here in the input, we can define an ID.
250
00:13:27,450 --> 00:13:31,260
So remember way back when we actually used ID
251
00:13:31,260 --> 00:13:34,200
to also select elements in the HTML.
252
00:13:34,200 --> 00:13:36,460
But we can use IDs for other things,
253
00:13:36,460 --> 00:13:40,070
for example, for what I'm going to show you now.
254
00:13:40,070 --> 00:13:42,773
So let's call this one here full name,
255
00:13:46,360 --> 00:13:49,743
and let's call this one here email.
256
00:13:50,640 --> 00:13:53,170
So not a class, but an ID.
257
00:13:53,170 --> 00:13:56,513
And so now, here we can define the for attribute.
258
00:13:57,640 --> 00:14:00,080
So yet another new attribute.
259
00:14:00,080 --> 00:14:02,740
And so that's why learning forms
260
00:14:02,740 --> 00:14:04,270
can be a little bit of work
261
00:14:04,270 --> 00:14:07,223
because there's a lot of new stuff here all at once.
262
00:14:08,220 --> 00:14:09,880
But anyway here now,
263
00:14:09,880 --> 00:14:14,350
we can write that exact ID that we used here.
264
00:14:14,350 --> 00:14:15,183
And so with this,
265
00:14:15,183 --> 00:14:18,633
we basically link this label to this input.
266
00:14:19,750 --> 00:14:20,910
All right.
267
00:14:20,910 --> 00:14:22,830
And here, let's do the same thing.
268
00:14:22,830 --> 00:14:27,830
So, this now is for the element that has the ID of email.
269
00:14:28,493 --> 00:14:31,993
And so again, with this, we linked these two together.
270
00:14:34,320 --> 00:14:39,320
And so now when we click on this label,
271
00:14:40,300 --> 00:14:42,540
then you see how it automatically selected
272
00:14:42,540 --> 00:14:44,420
the corresponding input field,
273
00:14:44,420 --> 00:14:46,913
and the same here with the email address.
274
00:14:48,540 --> 00:14:49,373
Okay.
275
00:14:51,180 --> 00:14:53,573
And now, let me just show you some more here.
276
00:14:54,750 --> 00:14:57,020
Even though we are not going to need them,
277
00:14:57,020 --> 00:15:01,540
but I will still show you how they look like.
278
00:15:01,540 --> 00:15:03,300
For example, the checkbox,
279
00:15:03,300 --> 00:15:08,300
that's a very popular one or also number.
280
00:15:10,240 --> 00:15:13,240
So here, we have a checkbox just as expected,
281
00:15:13,240 --> 00:15:15,610
and then we can also create a label for that.
282
00:15:15,610 --> 00:15:17,330
And then when we click on the label,
283
00:15:17,330 --> 00:15:21,560
it will automatically turn the checkbox on and off.
284
00:15:21,560 --> 00:15:25,240
And here, when we have a number, you see
285
00:15:25,240 --> 00:15:27,550
we have these small arrows here.
286
00:15:27,550 --> 00:15:30,920
And when we try to input a letter, well,
287
00:15:30,920 --> 00:15:32,490
that shouldn't work,
288
00:15:32,490 --> 00:15:35,000
and it doesn't work with most numbers.
289
00:15:35,000 --> 00:15:36,384
But with e, it does work
290
00:15:36,384 --> 00:15:39,563
because that's a special mathematical constant.
291
00:15:42,675 --> 00:15:44,070
All right.
292
00:15:44,070 --> 00:15:46,890
Now let's turn this to off here with comments
293
00:15:46,890 --> 00:15:48,333
and move them down here.
294
00:15:49,440 --> 00:15:52,630
Because next, what I want to do is something different,
295
00:15:52,630 --> 00:15:54,713
which is a select box.
296
00:15:56,530 --> 00:16:00,440
So let's write select like this.
297
00:16:00,440 --> 00:16:03,423
And then in there, we can define multiple options.
298
00:16:05,430 --> 00:16:08,163
So for that, we use the option element.
299
00:16:09,000 --> 00:16:12,010
So more and more elements here.
300
00:16:12,010 --> 00:16:14,520
But anyway, this select here,
301
00:16:14,520 --> 00:16:17,760
I want to use it for the user to tell Omnifood
302
00:16:17,760 --> 00:16:20,170
where they heard about them.
303
00:16:20,170 --> 00:16:23,033
So actually, let's create first a label here.
304
00:16:25,270 --> 00:16:26,743
Oh, that's not what I wanted.
305
00:16:30,350 --> 00:16:35,350
So a label, where did you hear from us?
306
00:16:39,670 --> 00:16:42,263
And again, here, we can give it an ID.
307
00:16:44,290 --> 00:16:46,643
Let's say it, select-where.
308
00:16:47,600 --> 00:16:52,600
And then to connect them, we say for select-where.
309
00:16:55,410 --> 00:16:57,770
So here let's then add a couple of options
310
00:16:59,520 --> 00:17:04,520
like friends and family.
311
00:17:06,610 --> 00:17:09,113
And maybe that content is also here.
312
00:17:10,070 --> 00:17:11,860
No, it's not.
313
00:17:11,860 --> 00:17:14,313
So, I will just come up with it here.
314
00:17:15,760 --> 00:17:17,300
But before I write the next one,
315
00:17:17,300 --> 00:17:19,903
we also need to define a value here.
316
00:17:23,510 --> 00:17:24,590
Okay.
317
00:17:24,590 --> 00:17:27,110
So I will explain a bit later why that is
318
00:17:27,110 --> 00:17:29,620
when we actually submit the form here.
319
00:17:29,620 --> 00:17:33,770
But essentially here, the value of this input field
320
00:17:33,770 --> 00:17:37,330
will very simply be the name that the user writes
321
00:17:37,330 --> 00:17:38,580
into the field
322
00:17:38,580 --> 00:17:40,950
And, the same here for the email.
323
00:17:40,950 --> 00:17:42,190
Now in the select,
324
00:17:42,190 --> 00:17:45,143
the value will then simply be what we write here.
325
00:17:46,840 --> 00:17:49,420
So for example, friends.
326
00:17:49,420 --> 00:17:52,120
And when the user then selects this option here,
327
00:17:52,120 --> 00:17:53,893
then the value will be friends.
328
00:17:55,770 --> 00:17:57,150
Let's just add another one here.
329
00:17:57,150 --> 00:17:58,373
Let's say YouTube.
330
00:18:03,120 --> 00:18:05,223
So, YouTube video.
331
00:18:06,120 --> 00:18:08,943
So, let's see it here on our page very quick.
332
00:18:10,810 --> 00:18:12,930
So here is the select box.
333
00:18:12,930 --> 00:18:15,390
And so if we select this one here,
334
00:18:15,390 --> 00:18:17,570
then the value of this field here
335
00:18:17,570 --> 00:18:19,620
will basically become YouTube.
336
00:18:19,620 --> 00:18:22,510
So the value that we defined on the option element
337
00:18:22,510 --> 00:18:24,820
for this one, right?
338
00:18:24,820 --> 00:18:26,590
And if we choose this one here,
339
00:18:26,590 --> 00:18:30,896
then the value of this input field or of this select element
340
00:18:30,896 --> 00:18:33,223
will become just friends.
341
00:18:34,080 --> 00:18:36,793
So exactly this value, right?
342
00:18:38,170 --> 00:18:41,070
Now the first one here should actually usually
343
00:18:41,070 --> 00:18:43,803
be basically an empty one.
344
00:18:45,270 --> 00:18:47,390
So not class, of course,
345
00:18:47,390 --> 00:18:49,750
but value empty.
346
00:18:49,750 --> 00:18:52,933
Because here we can then write something like,
347
00:18:54,720 --> 00:18:58,150
please choose one option.
348
00:18:58,150 --> 00:19:00,220
And so since the value is empty now,
349
00:19:00,220 --> 00:19:02,490
we are then not allowed to submit the form
350
00:19:02,490 --> 00:19:04,223
with this one here being empty.
351
00:19:06,300 --> 00:19:08,700
Now let's duplicate this here a couple of times.
352
00:19:09,930 --> 00:19:14,780
Let's say we heard from them in a Podcast
353
00:19:14,780 --> 00:19:17,873
or a Facebook ad,
354
00:19:22,960 --> 00:19:25,310
and then also the others option,
355
00:19:25,310 --> 00:19:26,623
which we always have,
356
00:19:28,610 --> 00:19:33,610
and add, and podcast, all right.
357
00:19:35,010 --> 00:19:36,260
Give it a save.
358
00:19:36,260 --> 00:19:40,323
And so here we have all of these, okay.
359
00:19:41,290 --> 00:19:43,330
Oh, and actually, we are allowed
360
00:19:43,330 --> 00:19:45,070
to submit the form,
361
00:19:45,070 --> 00:19:47,530
and that's because there is still more
362
00:19:47,530 --> 00:19:49,700
that I didn't show you yet.
363
00:19:49,700 --> 00:19:52,450
So we can define even another attribute
364
00:19:52,450 --> 00:19:54,050
on these elements here,
365
00:19:54,050 --> 00:19:56,243
which is the required attribute.
366
00:19:57,290 --> 00:20:00,530
So we already have ID, type, placeholder,
367
00:20:00,530 --> 00:20:02,443
and now let's add required.
368
00:20:03,330 --> 00:20:07,610
And this attribute for the first time doesn't need a value.
369
00:20:07,610 --> 00:20:10,383
So it's just required, and that's it.
370
00:20:12,340 --> 00:20:15,490
So, let's add that, well, not to the label,
371
00:20:15,490 --> 00:20:16,543
but to the input.
372
00:20:18,010 --> 00:20:19,810
So, let's make all of them required.
373
00:20:24,750 --> 00:20:28,033
So that works on inputs and also on select.
374
00:20:29,390 --> 00:20:30,223
All right.
375
00:20:32,180 --> 00:20:34,493
So, let's try that now again.
376
00:20:36,190 --> 00:20:38,400
So if we click here now, then it says,
377
00:20:38,400 --> 00:20:39,843
please fill in this field.
378
00:20:41,570 --> 00:20:44,870
So just something, then please fill in this field.
379
00:20:44,870 --> 00:20:47,250
But then when I write it with the wrong format,
380
00:20:47,250 --> 00:20:49,210
it tells me to please include an @.
381
00:20:50,870 --> 00:20:51,893
So I do that.
382
00:20:54,272 --> 00:20:55,880
.com maybe.
383
00:20:55,880 --> 00:20:58,920
And if I try now, then it still doesn't work
384
00:20:58,920 --> 00:21:03,150
because this first default option here is empty.
385
00:21:03,150 --> 00:21:04,180
Remember that?
386
00:21:04,180 --> 00:21:05,690
So the value here was empty,
387
00:21:05,690 --> 00:21:07,480
and so we're not allowed.
388
00:21:07,480 --> 00:21:09,440
But if we then choose something,
389
00:21:09,440 --> 00:21:12,530
then the form will get submitted, basically.
390
00:21:12,530 --> 00:21:15,730
So, it will be sent to this URL right here,
391
00:21:15,730 --> 00:21:16,960
which we defined.
392
00:21:16,960 --> 00:21:18,673
So this empty hash.
393
00:21:21,100 --> 00:21:21,933
Right.
394
00:21:21,933 --> 00:21:23,479
But again, more about that.
395
00:21:23,479 --> 00:21:26,853
So more about this action here, a bit later.
396
00:21:27,900 --> 00:21:28,733
Okay.
397
00:21:29,580 --> 00:21:33,298
Now, right now, the way the form looks is a complete mess,
398
00:21:33,298 --> 00:21:34,790
right?
399
00:21:34,790 --> 00:21:38,740
So everything is just like one after another here,
400
00:21:38,740 --> 00:21:41,070
without any structure at all.
401
00:21:41,070 --> 00:21:44,977
And so what we usually do is to always group the label
402
00:21:44,977 --> 00:21:48,460
and the input together in some div element
403
00:21:48,460 --> 00:21:49,853
or some other container.
404
00:21:52,070 --> 00:21:52,903
All right.
405
00:21:52,903 --> 00:21:57,490
And this one, I think, might not even need a name.
406
00:21:57,490 --> 00:21:59,110
So, a class name.
407
00:21:59,110 --> 00:22:01,663
This is just to group them together a little bit.
408
00:22:05,660 --> 00:22:07,120
Because by doing this,
409
00:22:07,120 --> 00:22:11,450
we will then be able to also group them in that grid,
410
00:22:11,450 --> 00:22:13,970
like I showed you at the beginning.
411
00:22:13,970 --> 00:22:16,030
Well, not like, oh,
412
00:22:16,030 --> 00:22:19,653
actually, we need it all the way down here after the select.
413
00:22:20,600 --> 00:22:24,660
And then let's also actually place this one.
414
00:22:24,660 --> 00:22:27,210
And then this one, the button,
415
00:22:27,210 --> 00:22:29,833
I think, might not need any container.
416
00:22:31,580 --> 00:22:34,540
So that should now look different
417
00:22:34,540 --> 00:22:37,900
because each of them should now be in their own line.
418
00:22:37,900 --> 00:22:38,733
Right.
419
00:22:38,733 --> 00:22:41,080
And so that's because the div, of course,
420
00:22:41,080 --> 00:22:43,370
now created a block level element,
421
00:22:43,370 --> 00:22:45,493
which creates a line break after it.
422
00:22:46,930 --> 00:22:47,910
So here we see again,
423
00:22:47,910 --> 00:22:50,973
the label in action, and it works just fine.
424
00:22:50,973 --> 00:22:54,087
And so now, just before finishing this video,
425
00:22:54,087 --> 00:22:57,890
let's quickly format these four containers
426
00:22:57,890 --> 00:23:00,190
or while these four elements here
427
00:23:00,190 --> 00:23:02,602
into a nice two by two grid.
428
00:23:02,602 --> 00:23:04,323
All right.
429
00:23:05,400 --> 00:23:08,523
So that is the CTA form.
430
00:23:10,780 --> 00:23:12,700
Let's do that maybe here at the very end,
431
00:23:12,700 --> 00:23:16,803
because there will be a lot of styles after this one.
432
00:23:17,859 --> 00:23:19,713
So cta-form.
433
00:23:21,410 --> 00:23:24,793
Display as a grid.
434
00:23:29,720 --> 00:23:33,890
And they should have two equally sized columns, 1fr.
435
00:23:36,055 --> 00:23:39,270
And let's give them two different gaps
436
00:23:39,270 --> 00:23:41,460
because remember many times in the column,
437
00:23:41,460 --> 00:23:43,190
we need a bigger gap.
438
00:23:43,190 --> 00:23:47,830
And so let's do that here as well, 3.2 REM maybe,
439
00:23:47,830 --> 00:23:50,273
and for the rows, one step down.
440
00:23:52,467 --> 00:23:55,990
So that is 2.4 REM.
441
00:23:55,990 --> 00:23:58,060
And then also to create some space between
442
00:23:58,060 --> 00:24:00,103
this paragraph and this form,
443
00:24:01,610 --> 00:24:05,483
let's just add some margin bottom here to this CTA text.
444
00:24:06,530 --> 00:24:09,308
Now we could also have wrapped this entire thing here
445
00:24:09,308 --> 00:24:11,668
again into, like, a header,
446
00:24:11,668 --> 00:24:15,150
but let's not do that right now.
447
00:24:15,150 --> 00:24:16,893
I will just add some margin here.
448
00:24:19,400 --> 00:24:23,270
So a bit more than here after the heading.
449
00:24:23,270 --> 00:24:24,850
So between the heading and the text,
450
00:24:24,850 --> 00:24:27,644
there is 3.2 and let's now increase it
451
00:24:27,644 --> 00:24:31,670
to 4.8, which is the next step.
452
00:24:31,670 --> 00:24:32,573
Okay.
453
00:24:33,830 --> 00:24:35,474
So that is not perfect,
454
00:24:35,474 --> 00:24:38,820
but it is looking a lot better than before.
455
00:24:38,820 --> 00:24:39,800
And so with this,
456
00:24:39,800 --> 00:24:42,080
we will now be able to style all of this
457
00:24:42,080 --> 00:24:43,383
in the next lecture.
32104
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.