1
00:00:02,450 --> 00:00:04,910
Now that's basically it for forms

2
00:00:04,910 --> 00:00:06,260
and form elements.

3
00:00:06,260 --> 00:00:09,900
And it is a lot of knowledge that we gained in this module.

4
00:00:09,900 --> 00:00:11,760
A lot of key elements,

5
00:00:11,760 --> 00:00:15,260
and especially attributes you learned about.

6
00:00:15,260 --> 00:00:17,320
And speaking of attributes,

7
00:00:17,320 --> 00:00:21,040
there are a couple of last attributes and concepts,

8
00:00:21,040 --> 00:00:23,660
which I want to sum up in this lecture here,

9
00:00:23,660 --> 00:00:26,810
because they also are helpful from time to time.

10
00:00:26,810 --> 00:00:31,490
For example, you can add placeholders to your input fields.

11
00:00:31,490 --> 00:00:34,410
Now what's a place holder? Let's say,

12
00:00:34,410 --> 00:00:39,140
for the name, we want to show the user,

13
00:00:39,140 --> 00:00:41,850
which kind of format we want here,

14
00:00:41,850 --> 00:00:44,740
that we want a first name and a last name.

15
00:00:44,740 --> 00:00:48,350
Then we could add to this placeholder attribute.

16
00:00:48,350 --> 00:00:52,150
And as a value, we set some placeholder text,

17
00:00:52,150 --> 00:00:56,170
which will be shown if the user hasn't entered anything else

18
00:00:56,170 --> 00:00:59,083
like Max Schwarz.

19
00:01:00,630 --> 00:01:03,170
If I save this, this text shows up here

20
00:01:03,170 --> 00:01:05,720
in a light gray color.

21
00:01:05,720 --> 00:01:10,250
Now this is not the same as setting a default value

22
00:01:10,250 --> 00:01:12,960
with the value attribute.

23
00:01:12,960 --> 00:01:14,530
That's not the same.

24
00:01:14,530 --> 00:01:17,750
The value set with the value attribute

25
00:01:17,750 --> 00:01:20,890
will be treated as if the user entered it.

26
00:01:20,890 --> 00:01:25,230
The placeholder value, on the other hand, will be displayed,

27
00:01:25,230 --> 00:01:29,010
but it will not be taken as an entered value.

28
00:01:29,010 --> 00:01:32,340
If I try to submit the form without entering anything

29
00:01:32,340 --> 00:01:34,950
on my own, with just a placeholder,

30
00:01:34,950 --> 00:01:37,250
I will still get the warning here

31
00:01:37,250 --> 00:01:40,620
because I need to enter a custom value first.

32
00:01:40,620 --> 00:01:44,400
Nonetheless, the placeholder can be a good thing to use

33
00:01:44,400 --> 00:01:47,493
to show some extra hint for a given input.

34
00:01:48,340 --> 00:01:51,230
You should not use it as a replacement

35
00:01:51,230 --> 00:01:53,230
for your labels though,

36
00:01:53,230 --> 00:01:56,250
because the placeholder does not have

37
00:01:56,250 --> 00:02:01,240
the same accessibility value as the label has it.

38
00:02:01,240 --> 00:02:04,270
And in addition, it has a disadvantage.

39
00:02:04,270 --> 00:02:09,160
If I comment out this label element here for the email,

40
00:02:09,160 --> 00:02:12,820
for example, and instead I would try to use

41
00:02:12,820 --> 00:02:15,790
the placeholder as a label.

42
00:02:15,790 --> 00:02:19,020
Then, on first sight, it looks like it works

43
00:02:19,020 --> 00:02:21,663
because it shows your email here.

44
00:02:22,530 --> 00:02:24,590
But as soon as I start typing here,

45
00:02:24,590 --> 00:02:26,620
the placeholder disappears.

46
00:02:26,620 --> 00:02:28,380
And the problem with that is that

47
00:02:28,380 --> 00:02:30,320
if it's a more complex form,

48
00:02:30,320 --> 00:02:33,760
I can then easily forget which kind of value

49
00:02:33,760 --> 00:02:36,400
should have been entered here in the first place.

50
00:02:36,400 --> 00:02:38,660
And that's why you should always have a label

51
00:02:38,660 --> 00:02:42,300
as a separate element, which does not disappear

52
00:02:42,300 --> 00:02:44,960
as soon as you start typing.

53
00:02:44,960 --> 00:02:48,470
Only use a placeholder as an additional hint,

54
00:02:48,470 --> 00:02:50,003
which you might want to show.

55
00:02:51,470 --> 00:02:55,050
Now, another useful attribute that is worth knowing

56
00:02:55,050 --> 00:02:58,000
is related to the text area.

57
00:02:58,000 --> 00:03:00,740
There you can set a rows value,

58
00:03:00,740 --> 00:03:02,950
and that will basically influence

59
00:03:02,950 --> 00:03:07,950
how many rows are displayed. How big that text area is.

60
00:03:09,440 --> 00:03:11,820
If I set this to eight, for example,

61
00:03:11,820 --> 00:03:14,500
you'll notice that the text area is way bigger

62
00:03:14,500 --> 00:03:16,670
than it was before.

63
00:03:16,670 --> 00:03:18,210
Now, this does not mean that

64
00:03:18,210 --> 00:03:21,030
only eight rows of text can be entered.

65
00:03:21,030 --> 00:03:24,400
You can still enter more and it will start to scroll.

66
00:03:24,400 --> 00:03:28,550
It just means that eight rows will be displayed by default,

67
00:03:28,550 --> 00:03:31,410
that the height of this text area will be

68
00:03:31,410 --> 00:03:35,253
high enough to accommodate eight rows.

69
00:03:36,750 --> 00:03:39,210
Now, you also maybe noticed,

70
00:03:39,210 --> 00:03:41,910
by accident or because you know it already,

71
00:03:41,910 --> 00:03:44,450
that you can resize this text area.

72
00:03:44,450 --> 00:03:47,250
There is this handle in the bottom right corner,

73
00:03:47,250 --> 00:03:50,380
which you can use to resize this text area.

74
00:03:50,380 --> 00:03:53,170
And while this sometimes can be a nice feature,

75
00:03:53,170 --> 00:03:56,580
it of course can also break your design.

76
00:03:56,580 --> 00:04:00,140
So therefore you can also disable this resizing.

77
00:04:00,140 --> 00:04:02,570
However, not with an attribute,

78
00:04:02,570 --> 00:04:05,730
but instead with a CSS property.

79
00:04:05,730 --> 00:04:10,730
Here, we can select a text area and then set resize to none,

80
00:04:12,580 --> 00:04:15,430
and this will prevent resizing.

81
00:04:15,430 --> 00:04:19,100
Alternatively, you could set it to horizontal or vertical

82
00:04:19,100 --> 00:04:23,030
or both, which is the default, to only allow resizing

83
00:04:23,030 --> 00:04:26,850
in one direction. For example, if I set it to vertical,

84
00:04:26,850 --> 00:04:30,410
then I can only resize to the top and bottom,

85
00:04:30,410 --> 00:04:32,590
but not to the left and right.

86
00:04:32,590 --> 00:04:36,293
And if I set it to none, this cannot be resized at all.

87
00:04:37,310 --> 00:04:38,620
And that's the last feature

88
00:04:38,620 --> 00:04:41,250
which I wanted to highlight here.

89
00:04:41,250 --> 00:04:44,210
Definitely feel free to dive into MDN

90
00:04:44,210 --> 00:04:46,850
to learn all about these elements right now.

91
00:04:46,850 --> 00:04:49,610
Though we will also see many of these elements

92
00:04:49,610 --> 00:04:50,640
throughout this course

93
00:04:50,640 --> 00:04:54,280
as we build multiple forms in various course projects

94
00:04:54,280 --> 00:04:57,330
in this course, but feel free to do so if you want.

95
00:04:57,330 --> 00:04:59,370
And of course, feel free to play around

96
00:04:59,370 --> 00:05:01,410
with the existing form,

97
00:05:01,410 --> 00:05:03,760
which we built here with the different styles

98
00:05:03,760 --> 00:05:08,090
and attributes, and also dive into that challenge,

99
00:05:08,090 --> 00:05:11,440
which I prepared for you and which we are going to explore

100
00:05:11,440 --> 00:05:12,903
in the next lecture now.