1
00:00:02,090 --> 00:00:05,253
Now what could be missing in this form here?

2
00:00:06,550 --> 00:00:08,119
Well, if we have a look at it,

3
00:00:08,119 --> 00:00:11,370
we have no idea which kind of value

4
00:00:11,370 --> 00:00:12,820
should be entered here.

5
00:00:12,820 --> 00:00:13,900
In the last lectures,

6
00:00:13,900 --> 00:00:15,870
I sometimes entered a name here.

7
00:00:15,870 --> 00:00:18,070
I sometimes entered anything.

8
00:00:18,070 --> 00:00:20,100
And if we have a look at the code,

9
00:00:20,100 --> 00:00:21,540
the HTML code,

10
00:00:21,540 --> 00:00:24,030
we see that we assigned a name

11
00:00:24,030 --> 00:00:26,370
an identifier of username

12
00:00:26,370 --> 00:00:27,830
for this input.

13
00:00:27,830 --> 00:00:29,060
But that of course,

14
00:00:29,060 --> 00:00:30,320
that's just something we

15
00:00:30,320 --> 00:00:32,030
as a developer see.

16
00:00:32,030 --> 00:00:34,250
If I'm a visitor of this webpage,

17
00:00:34,250 --> 00:00:35,670
I don't see that.

18
00:00:35,670 --> 00:00:38,740
And our visitors typically don't inspect

19
00:00:38,740 --> 00:00:42,360
that content here with the Deftools.

20
00:00:42,360 --> 00:00:45,150
So we wanna give our visitors a hint

21
00:00:45,150 --> 00:00:48,300
about which kind of data should be entered here.

22
00:00:48,300 --> 00:00:51,030
What we're expecting as a value here.

23
00:00:51,030 --> 00:00:51,863
And for this,

24
00:00:51,863 --> 00:00:54,540
we can add labels.

25
00:00:54,540 --> 00:00:58,490
We can add labels with another special HTML element

26
00:00:58,490 --> 00:01:02,430
and that would be the Label element,

27
00:01:02,430 --> 00:01:04,930
which also has an opening and closing tag.

28
00:01:04,930 --> 00:01:06,310
And between those tags

29
00:01:06,310 --> 00:01:08,780
you have your label text.

30
00:01:08,780 --> 00:01:11,830
So here, if we want the name of a user

31
00:01:11,830 --> 00:01:16,610
we could say Your name as a label.

32
00:01:16,610 --> 00:01:18,080
And if I save that,

33
00:01:18,080 --> 00:01:21,590
now that shows up above that input.

34
00:01:21,590 --> 00:01:23,650
And that of course is a very useful hint

35
00:01:23,650 --> 00:01:26,940
which we typically wanna give to our users.

36
00:01:26,940 --> 00:01:30,030
However, from an accessibility perspective,

37
00:01:30,030 --> 00:01:32,950
we're not 100% there yet.

38
00:01:32,950 --> 00:01:35,890
This is visible to visitors of our website.

39
00:01:35,890 --> 00:01:37,650
And it's pretty clear here

40
00:01:37,650 --> 00:01:40,800
that this label refers to this input.

41
00:01:40,800 --> 00:01:44,430
Now, if we had a form with multiple inputs,

42
00:01:44,430 --> 00:01:47,070
it still probably would be obvious

43
00:01:47,070 --> 00:01:49,120
which label belongs to which input

44
00:01:49,120 --> 00:01:51,580
if we just have a look at the page.

45
00:01:51,580 --> 00:01:54,020
But if a blind user, for example,

46
00:01:54,020 --> 00:01:55,590
is visiting this page,

47
00:01:55,590 --> 00:01:58,020
it might not always be clear

48
00:01:58,020 --> 00:02:01,420
which label belongs to which input.

49
00:02:01,420 --> 00:02:05,077
And that's why you can also give your label

50
00:02:05,077 --> 00:02:08,850
the special for attribute.

51
00:02:08,850 --> 00:02:10,509
with the for attribute,

52
00:02:10,509 --> 00:02:13,950
you kind of connect this label to an input.

53
00:02:13,950 --> 00:02:15,220
And to connect it,

54
00:02:15,220 --> 00:02:17,530
you need to give your input an ID.

55
00:02:17,530 --> 00:02:20,570
Now we do have this name identifier

56
00:02:20,570 --> 00:02:24,290
but this only matters for the form submission.

57
00:02:24,290 --> 00:02:26,660
We need an ID attribute

58
00:02:26,660 --> 00:02:29,000
with any value of our choice

59
00:02:29,000 --> 00:02:31,600
to connect a label to that input.

60
00:02:31,600 --> 00:02:36,600
And here we could set ID to username as well,

61
00:02:37,030 --> 00:02:40,280
but you can also use a different identifier here.

62
00:02:40,280 --> 00:02:44,520
You don't have to repeat what you chose for a name.

63
00:02:44,520 --> 00:02:46,940
Here I'll use the same value though

64
00:02:46,940 --> 00:02:48,090
and then here for,

65
00:02:48,090 --> 00:02:48,950
for,

66
00:02:48,950 --> 00:02:50,803
I'll also enter username.

67
00:02:51,800 --> 00:02:54,470
But I'll actually write it without a dash

68
00:02:54,470 --> 00:02:58,430
to make it obvious that this belongs to this ID

69
00:02:58,430 --> 00:03:00,300
and not to this name,

70
00:03:00,300 --> 00:03:03,283
but you could use exactly the same values as well.

71
00:03:04,380 --> 00:03:05,560
Now with that,

72
00:03:05,560 --> 00:03:07,390
visually nothing changes

73
00:03:07,390 --> 00:03:09,380
but for Assistive Technologies

74
00:03:09,380 --> 00:03:11,730
there now is a connection.

75
00:03:11,730 --> 00:03:16,730
And there also is a nice difference for our regular users

76
00:03:16,900 --> 00:03:20,610
who don't use Assistive Technologies as well.

77
00:03:20,610 --> 00:03:23,020
If you now click on that label,

78
00:03:23,020 --> 00:03:26,130
you'll notice that this input is focused.

79
00:03:26,130 --> 00:03:28,100
I did not click into the input,

80
00:03:28,100 --> 00:03:30,110
and yet if I click on that label,

81
00:03:30,110 --> 00:03:33,441
it is focused and I can start typing here.

82
00:03:33,441 --> 00:03:37,670
Now this was not the case without the for attribute.

83
00:03:37,670 --> 00:03:40,200
If we removed this temporarily,

84
00:03:40,200 --> 00:03:42,610
if I click on the label nothing happens.

85
00:03:42,610 --> 00:03:46,100
I can hammer this label and nothing happens.

86
00:03:46,100 --> 00:03:47,950
And that's another neat feature

87
00:03:47,950 --> 00:03:51,210
which you get when you use the for attribute.

88
00:03:51,210 --> 00:03:53,060
By establishing this connection

89
00:03:53,060 --> 00:03:55,650
it is enough if a user clicks that label

90
00:03:55,650 --> 00:03:57,670
to focus that input,

91
00:03:57,670 --> 00:03:59,683
which is a nice little extra.

92
00:04:00,880 --> 00:04:01,910
And now with that,

93
00:04:01,910 --> 00:04:06,540
we got our first input into this first form finished.

94
00:04:06,540 --> 00:04:08,860
Now I wanna come back to some styling

95
00:04:08,860 --> 00:04:12,080
and some special things you should be aware of

96
00:04:12,080 --> 00:04:14,550
when it comes to styling input elements

97
00:04:14,550 --> 00:04:16,010
and Form elements

98
00:04:16,010 --> 00:04:17,230
and then thereafter,

99
00:04:17,230 --> 00:04:20,473
we're going to explore other form elements as well.