WEBVTT

0
00:00.590 --> 00:01.110
Woo hoo!

1
00:01.130 --> 00:07.040
I'm super excited for this section, my dear students and I keep saying that the input is one of the

2
00:07.040 --> 00:14.960
most powerful elements there is, and I think by now you should be starting to intuitively get a feel

3
00:14.960 --> 00:21.110
for why I keep saying it, because there are so many different things we can do with the input type.

4
00:21.260 --> 00:27.140
And in the previous section we spoke about the original input types that have been with us since ...

5
00:27.140 --> 00:31.340
"pa fell off the bus" - that have been around for a very, very long time.

6
00:31.340 --> 00:37.280
And this section is exciting because now it's time to look at the newer input types.

7
00:38.900 --> 00:39.170
"Okay,

8
00:39.170 --> 00:40.400
Clyde. Well, what are they?"

9
00:40.430 --> 00:47.000
At a very high level now,  these are. We're going to be going through each one individually in more detail.

10
00:47.030 --> 00:50.060
But before we do, here's a very, very quick summary.

11
00:50.090 --> 00:51.350
First, let's look at week.

12
00:51.950 --> 00:54.890
Week is just the day control that allows you to pick a week.

13
00:54.890 --> 00:59.360
And by a week I mean a week and a year date.

14
00:59.360 --> 01:00.960
But there's no time zone.

15
01:00.960 --> 01:01.950
There's no time.

16
01:01.950 --> 01:05.940
So that's the week. I'm going to just quickly go through these. Color, 

17
01:06.600 --> 01:07.470
very very intuitive.

18
01:07.500 --> 01:10.410
It allows you to open up a color picker and choose a color.

19
01:10.980 --> 01:18.240
Then we've got the type of date, and believe it or not, that just allows you to pick a date again with

20
01:18.240 --> 01:21.750
no time, and it opens up a date picker on the browser.

21
01:21.780 --> 01:23.580
There's an example that you can see.

22
01:24.120 --> 01:30.810
Then we've got datetime-local and it's similar to the input of type date, the one we saw previously,

23
01:30.810 --> 01:35.340
but this time you do have the ability to add time as well.

24
01:35.340 --> 01:36.450
Pretty cool.

25
01:36.480 --> 01:40.950
Then we've got this cool email type and it looks like input of type text.

26
01:40.980 --> 01:46.500
There's an example you can see on the screen. It looks the same as input type text, but it does have validation

27
01:46.500 --> 01:50.670
rules and triggers the appropriate keyboard for phones.

28
01:51.000 --> 01:58.770
Then we've got month. Again, it lets the user select a month and a year with no time zone. And we've got number.

29
02:00.730 --> 02:05.500
Again, it looks very similar to input type text until you hover over it.

30
02:05.680 --> 02:07.930
You can see those two arrows - up and down.

31
02:07.930 --> 02:14.410
It's a control for entering a number, and it's got default validation, aka you can't enter text,

32
02:14.410 --> 02:19.720
and of course the appropriate number keyboard pops up on a phone when you have this type.

33
02:19.720 --> 02:20.650
So that's number.

34
02:20.680 --> 02:21.750
Then we've got range.

35
02:21.760 --> 02:22.960
Range is pretty cool.

36
02:22.960 --> 02:27.180
It's a control for entering a number where the exact number doesn't really matter.

37
02:27.190 --> 02:32.470
You often see these on property websites, for example, when you're searching within a price range,

38
02:32.560 --> 02:36.370
you can define minimum and maximum values very, very useful.

39
02:36.370 --> 02:37.690
We're going to be seeing that later.

40
02:37.780 --> 02:40.180
Search is another interesting one.

41
02:40.270 --> 02:44.560
It's basically just a text field used to enter a search term.

42
02:44.650 --> 02:50.080
And the major difference between this and the text type, is that there's a delete item that displays that

43
02:50.080 --> 02:51.940
clears the input box.

44
02:52.030 --> 02:53.770
We're going to be seeing that later.

45
02:53.950 --> 03:00.130
Then we've got the type of "tel", and that's just a control used to enter a telephone number.

46
03:00.130 --> 03:03.100
It opens up a telephone keypad on a phone.

47
03:03.370 --> 03:09.030
Then we've got type of time, and that allows the time to be entered.

48
03:09.040 --> 03:10.520
Very, very intuitive.

49
03:10.540 --> 03:13.570
And finally, we've got this URL.

50
03:13.600 --> 03:19.690
Again, it looks like input type text, but it has inbuilt validation rules and a relevant keyboard

51
03:19.690 --> 03:22.120
again will display on a phone.

52
03:22.310 --> 03:23.460
Wow, and there we have it.

53
03:23.470 --> 03:25.510
Those are the newer input types.

54
03:25.510 --> 03:26.740
We've looked at the originals.

55
03:26.770 --> 03:32.470
Now we're looking at the newer types introduced to us by HTML5, and this was a very high level

56
03:32.470 --> 03:34.600
introduction to the different types.

57
03:34.870 --> 03:41.010
But in the next lectures, in the upcoming lectures, let's dig deeper into some of these types.

58
03:41.020 --> 03:41.770
See, you now.