1
00:00:02,070 --> 00:00:05,360
I did mention that this type attribute

2
00:00:05,360 --> 00:00:06,980
would be important.

3
00:00:06,980 --> 00:00:09,860
And indeed, there are different values we can set

4
00:00:09,860 --> 00:00:13,490
for this type attribute and that will then influence

5
00:00:13,490 --> 00:00:16,570
which kind of input is expected from the user.

6
00:00:16,570 --> 00:00:18,330
Now we learned about type text,

7
00:00:18,330 --> 00:00:20,030
which in the end is responsible

8
00:00:20,030 --> 00:00:22,270
for displaying a input field

9
00:00:22,270 --> 00:00:25,340
that wants a single-line of text.

10
00:00:25,340 --> 00:00:28,020
And with single-line, I mean that,

11
00:00:28,020 --> 00:00:30,270
of course the text can be as long

12
00:00:30,270 --> 00:00:32,310
as the user wants it to be.

13
00:00:32,310 --> 00:00:34,930
Unless we as a developer restrict it,

14
00:00:34,930 --> 00:00:36,850
which we're going to learn about later,

15
00:00:36,850 --> 00:00:41,850
but that you can't enter complex multiline text that easily.

16
00:00:43,130 --> 00:00:45,450
And that's the default kind of input field

17
00:00:45,450 --> 00:00:48,560
which you also get if you don't set a type at all.

18
00:00:48,560 --> 00:00:49,530
Though, as I mentioned,

19
00:00:49,530 --> 00:00:52,090
it is recommended that you do set a type

20
00:00:52,090 --> 00:00:54,380
to make it very clear that your intention

21
00:00:54,380 --> 00:00:57,460
is to have this kind of text input field.

22
00:00:57,460 --> 00:01:00,900
Now there are other common types as well though,

23
00:01:00,900 --> 00:01:04,080
for example, to type email.

24
00:01:04,080 --> 00:01:06,780
This also renders a input field

25
00:01:06,780 --> 00:01:09,550
that looks exactly like the other input field,

26
00:01:09,550 --> 00:01:13,520
but an input field that actually wants an email address

27
00:01:13,520 --> 00:01:17,370
and difference here is that if you do visit this website

28
00:01:17,370 --> 00:01:20,010
on a mobile device, for example,

29
00:01:20,010 --> 00:01:23,000
you get a different keyboard that opens up

30
00:01:23,000 --> 00:01:24,790
on that mobile phone.

31
00:01:24,790 --> 00:01:27,210
You get a keyboard optimized

32
00:01:27,210 --> 00:01:29,950
for entering email addresses,

33
00:01:29,950 --> 00:01:31,660
which of course is nice to have

34
00:01:31,660 --> 00:01:34,743
and greatly improves the user experience.

35
00:01:36,150 --> 00:01:39,760
In addition, you will also get some built-in

36
00:01:39,760 --> 00:01:42,520
input validation as you will see in a couple

37
00:01:42,520 --> 00:01:43,760
of minutes.

38
00:01:43,760 --> 00:01:47,380
When a user enters something, which is not considered

39
00:01:47,380 --> 00:01:49,440
to be a correct email address,

40
00:01:49,440 --> 00:01:52,160
the browser will show a warning then, but again,

41
00:01:52,160 --> 00:01:54,030
we'll see this in a couple of minutes

42
00:01:54,880 --> 00:01:57,530
another a useful type of input,

43
00:01:57,530 --> 00:02:00,750
which you can set is the number input.

44
00:02:00,750 --> 00:02:02,510
If you want some number,

45
00:02:02,510 --> 00:02:04,730
let's say an amount to be paid

46
00:02:04,730 --> 00:02:06,360
or any other kind of number

47
00:02:06,360 --> 00:02:10,199
you can set this input type and then you, well,

48
00:02:10,199 --> 00:02:12,320
do you have a input which is optimized

49
00:02:12,320 --> 00:02:14,700
for fetching some number input.

50
00:02:14,700 --> 00:02:16,540
Again on a mobile phone,

51
00:02:16,540 --> 00:02:19,230
an appropriate keyboard will open up,

52
00:02:19,230 --> 00:02:22,240
which makes it easier to enter numbers by focusing

53
00:02:22,240 --> 00:02:23,630
on numbers.

54
00:02:23,630 --> 00:02:26,320
And you've got a couple of other nice features.

55
00:02:26,320 --> 00:02:29,320
In addition, we're going to see this in action soon

56
00:02:29,320 --> 00:02:30,830
as well.

57
00:02:30,830 --> 00:02:33,060
Now another useful type of input

58
00:02:33,060 --> 00:02:35,470
is the password input type.

59
00:02:35,470 --> 00:02:37,390
This is generally the same

60
00:02:37,390 --> 00:02:39,320
as the default input type,

61
00:02:39,320 --> 00:02:43,810
but it obscures, it hides the user input

62
00:02:43,810 --> 00:02:47,690
so that if someone is standing behind that visitor

63
00:02:47,690 --> 00:02:50,770
of your website, that person will not be able

64
00:02:50,770 --> 00:02:52,750
to see what was entered.

65
00:02:52,750 --> 00:02:55,500
And that's of course, the default behavior, you know,

66
00:02:55,500 --> 00:02:58,450
from password fields that you don't see

67
00:02:58,450 --> 00:03:00,633
the value was inserted there.

68
00:03:01,560 --> 00:03:04,010
Now another nice input type,

69
00:03:04,010 --> 00:03:07,260
nice to have is to date input type,

70
00:03:07,260 --> 00:03:10,330
which will display a input field optimized

71
00:03:10,330 --> 00:03:12,200
for entering dates.

72
00:03:12,200 --> 00:03:14,870
For example, in most browsers,

73
00:03:14,870 --> 00:03:18,760
a date picker can be opened once the user clicks

74
00:03:18,760 --> 00:03:21,650
into that input field, hence making it easier

75
00:03:21,650 --> 00:03:23,793
for a user to select a date.

76
00:03:24,830 --> 00:03:26,200
But that's not all.

77
00:03:26,200 --> 00:03:29,400
We also for example, have to type radio

78
00:03:29,400 --> 00:03:31,680
for rendering radio buttons.

79
00:03:31,680 --> 00:03:33,100
And this might sound weird,

80
00:03:33,100 --> 00:03:35,280
but you have definitely seen them before

81
00:03:35,280 --> 00:03:37,150
and you will see them again in a couple

82
00:03:37,150 --> 00:03:38,290
of minutes.

83
00:03:38,290 --> 00:03:42,670
With radio buttons, you can render multiple choices,

84
00:03:42,670 --> 00:03:45,390
where only one choice can be active

85
00:03:45,390 --> 00:03:46,573
at the same time.

86
00:03:47,430 --> 00:03:51,270
We also can render checkboxes with type checkbox

87
00:03:51,270 --> 00:03:52,800
which is a yes no

88
00:03:52,800 --> 00:03:56,630
kind of toggle button where the user can either

89
00:03:56,630 --> 00:03:59,430
check the box or not check it.

90
00:03:59,430 --> 00:04:02,310
You might know that from forums where you agree

91
00:04:02,310 --> 00:04:04,283
to some terms, for example.

92
00:04:05,180 --> 00:04:09,240
Another interesting type is the file type,

93
00:04:09,240 --> 00:04:14,240
which renders a file picker where users can select a file

94
00:04:14,880 --> 00:04:18,399
that then should be uploaded to some server.

95
00:04:18,399 --> 00:04:22,400
In this core section will not be able to upload it yet,

96
00:04:22,400 --> 00:04:25,330
because we're lacking the server side part,

97
00:04:25,330 --> 00:04:27,350
but we can at least have a first look

98
00:04:27,350 --> 00:04:28,663
at this input type.

99
00:04:29,780 --> 00:04:33,250
And there also are a couple of other types,

100
00:04:33,250 --> 00:04:36,380
which you can check out on MDN because those

101
00:04:36,380 --> 00:04:39,230
are types which are not used that often

102
00:04:39,230 --> 00:04:41,870
and which also don't have that great

103
00:04:41,870 --> 00:04:45,400
of a browser support, which means that you might be able

104
00:04:45,400 --> 00:04:47,860
to set that type and it might work

105
00:04:47,860 --> 00:04:51,230
in Chrome, but it doesn't necessarily work the same

106
00:04:51,230 --> 00:04:52,830
in other browsers.

107
00:04:52,830 --> 00:04:54,750
And that's why here I focused

108
00:04:54,750 --> 00:04:58,440
on the most common and well supported types.

109
00:04:58,440 --> 00:05:00,290
And we already got quite a bit

110
00:05:00,290 --> 00:05:02,480
of different types here already.

111
00:05:02,480 --> 00:05:05,080
And of course, therefore, we're now going to take a

112
00:05:05,080 --> 00:05:07,860
closer look at those different types

113
00:05:07,860 --> 00:05:09,293
over the next minutes.