WEBVTT

0
00:00.520 --> 00:07.570
I want us to talk about this input element in a little bit more detail. Yes, we're going to be diving

1
00:07.570 --> 00:13.570
into a lot more detail later, but we've just created our first input element, and I thought it would

2
00:13.570 --> 00:17.630
be an appropriate time just to give you a bit more knowledge about it.

3
00:18.430 --> 00:19.390
Remember our code,

4
00:20.940 --> 00:23.890
we wrapped everything in a div, and we had a label and an input.

5
00:24.630 --> 00:30.600
The first thing you might have wondered is why do we have this "name" attribute? And that, my dear students

6
00:30.600 --> 00:32.660
is a fantastic question.

7
00:33.390 --> 00:41.130
Conceptually, you can think of an input element as representing a variable that gets sent to the backend

8
00:41.130 --> 00:41.670
server.

9
00:42.120 --> 00:46.410
And the 'name' attribute defines the name of this variable.

10
00:46.980 --> 00:50.910
And the value, of course, is whatever the user has entered into the text field.

11
00:51.380 --> 00:52.290
OK, okay.

12
00:52.290 --> 00:53.210
But what do I mean?

13
00:53.220 --> 00:56.870
Well, let's say the user types in his name and let's say his name is Wally.

14
00:57.690 --> 01:04.110
Remember that we treat this whole input element, its value, as a variable, and we've named the variable

15
01:04.110 --> 01:04.500
"name".

16
01:04.920 --> 01:09.720
I know it's confusing because it's also a name attribute, but the reason we call that name is that

17
01:10.170 --> 01:11.760
this is the name of the user 😵‍💫.

18
01:12.060 --> 01:14.700
So we could have called it "firstname", for example,

19
01:14.700 --> 01:15.890
maybe that would have been more clear.

20
01:15.900 --> 01:17.620
But anyway, we called it 'name'.

21
01:17.730 --> 01:18.990
That's the name of our variable.

22
01:19.380 --> 01:25.950
And when the user inserts his value, call it Wally, that's going to be the value associated with that

23
01:26.070 --> 01:26.640
variable.

24
01:26.940 --> 01:31.420
And of course, as we know, it's most likely going to be sent to a web server.

25
01:31.860 --> 01:32.580
So there we go.

26
01:32.590 --> 01:38.160
I just wanted a very, very brief discussion just to give you a little bit more knowledge on this input

27
01:38.160 --> 01:38.500
element.

28
01:38.520 --> 01:41.570
But we've got a ton more to learn, so let's keep going.