WEBVTT

0
00:00.350 --> 00:04.940
Very briefly, I want to talk about now another type, this time of number.

1
00:05.540 --> 00:09.560
And you guessed it, it captures numbers.

2
00:09.590 --> 00:10.760
No surprise there.

3
00:10.790 --> 00:16.140
But what you may not know is that it's got 3 very useful attributes.

4
00:16.160 --> 00:21.830
And those attributes are min, max and step.

5
00:22.370 --> 00:26.690
Let's quickly hop over to the coding editor and have a look at these in action.

6
00:27.260 --> 00:31.030
Firstly, how does this input with type number look like?

7
00:31.040 --> 00:32.430
Well, it's very, very simple.

8
00:32.450 --> 00:35.150
Let's just create a HTML file.

9
00:35.270 --> 00:39.890
In here we can have our body, and within our body, let's just create a very simple form.

10
00:39.890 --> 00:44.570
I want to create a form, by the way, because I want to submit the form and I want to show you the

11
00:44.570 --> 00:46.130
client side validation

12
00:46.130 --> 00:48.230
with this number type, it's pretty cool.

13
00:48.260 --> 00:49.880
But anyway, how does it look?

14
00:50.360 --> 00:54.650
Very, very simply, let's just create an input where it's type is set to number.

15
00:54.650 --> 00:58.640
We don't even need a name or an ID. Let's save it, and look at the browser.

16
00:58.640 --> 01:02.610
And there we go. On the face of it, it just looks like input of type text.

17
01:02.610 --> 01:09.480
But if we go now and focus over it, we can see that there are those arrows - the up ⬆ and down ⬇ arrow. And

18
01:09.510 --> 01:12.900
of course we can use our keyboard, up and down.

19
01:12.900 --> 01:15.330
I'm using my keyboard now as we speak.

20
01:15.360 --> 01:17.220
We can go negative and positive.

21
01:17.790 --> 01:18.570
Very, very simple.

22
01:18.570 --> 01:24.600
And you'll notice that the increments or the "step" is set to 1 by default.

23
01:24.600 --> 01:33.300
So we could actually create a comment here saying "by default, the step attribute is set to 1."

24
01:34.480 --> 01:34.840
Right.

25
01:34.840 --> 01:38.210
It's the same as us manually setting step to 1.

26
01:38.230 --> 01:39.490
There is no difference.

27
01:39.730 --> 01:41.950
Okay, so that's the first cool thing I wanted to show you.

28
01:41.980 --> 01:44.380
Next, I want to show you something else.

29
01:44.380 --> 01:48.950
I want to now include all three attributes min, max and step.

30
01:48.970 --> 01:50.290
What do you think is going to happen?

31
01:51.580 --> 01:53.140
Well, let me put a comment here first.

32
01:53.170 --> 02:01.900
When min, max and step are set, some browsers will show a narrower input box.

33
02:01.900 --> 02:05.380
Why do they show a narrow ... a narrower,

34
02:06.130 --> 02:07.750
there we go, a narrower input box.

35
02:07.750 --> 02:13.450
The reason it's a smaller input box is because the width,

36
02:13.450 --> 02:14.500
the width

37
02:15.390 --> 02:18.330
of the widest valid value

38
02:19.330 --> 02:20.170
is limited.

39
02:20.800 --> 02:21.760
That's the reason.

40
02:22.190 --> 02:23.830
So let me show you what I mean.

41
02:23.830 --> 02:25.330
Let's create another input,

42
02:25.360 --> 02:28.000
this type also of number.

43
02:28.510 --> 02:30.850
But now ... I mean we don't need a name,

44
02:30.850 --> 02:38.590
we don't need an ID ... but now I want to set, say, the minimum value of 100, maximum value can be 999.

45
02:38.590 --> 02:41.620
And let's step it up in increments of 5.

46
02:42.310 --> 02:44.110
Look at that on the browser.

47
02:44.590 --> 02:45.940
Isn't that interesting?

48
02:45.940 --> 02:48.520
So we can see it's a smaller input box.

49
02:49.180 --> 02:50.230
How amazing.

50
02:50.230 --> 02:55.090
And if we try and well, let me actually put a submit button,

51
02:55.240 --> 02:59.680
let's just break it up, and then include a button with type submit.

52
03:01.190 --> 03:06.440
If we now try and submit a value of 5, what do you think is going to happen?

53
03:08.380 --> 03:09.130
Well, that's right.

54
03:09.130 --> 03:11.620
The browser does front side validation for us.

55
03:11.620 --> 03:12.520
It's awesome.

56
03:12.760 --> 03:19.000
We've set the minimum of 100 and the browser gives us feedback saying the value must be greater than

57
03:19.000 --> 03:20.140
or equal to 100.

58
03:20.170 --> 03:22.540
How awesome is this, my dear students?

59
03:22.570 --> 03:24.070
It's pretty, pretty cool.

60
03:24.100 --> 03:29.260
The other thing worth mentioning is that when we set the type attribute to number, we cannot write

61
03:29.290 --> 03:30.010
text in here.

62
03:30.010 --> 03:31.990
So I'm trying on my keyboard now.

63
03:31.990 --> 03:32.920
It won't let me.

64
03:32.920 --> 03:34.930
The only thing we can type is numbers.

65
03:34.990 --> 03:36.250
Very, very interesting.

66
03:36.430 --> 03:37.120
So there we go.

67
03:37.120 --> 03:41.110
And obviously the step here is in increments of 5 because that's what we defined.

68
03:41.140 --> 03:46.670
Of course, if we go over 1000 and try and submit that, we also get front side validation.

69
03:46.690 --> 03:47.560
Very, very cool.

70
03:47.560 --> 03:48.670
Very, very intuitive.

71
03:48.700 --> 03:50.110
Let's hop back to the lecture.

72
03:50.470 --> 03:51.010
There you go.

73
03:51.010 --> 03:52.510
Pretty intuitive, right?

74
03:52.960 --> 03:58.990
The first thing you would have noticed is that although it looks like a text field, it does have subtle

75
03:58.990 --> 03:59.590
differences.

76
03:59.590 --> 04:06.880
And here it only allows floating point numbers between the min and max values that you specify.

77
04:06.880 --> 04:13.160
And browsers usually provide some UI component, a spinner, for example, to increase or decrease the

78
04:13.160 --> 04:14.420
value of the control.

79
04:14.420 --> 04:20.180
And just like all the other widgets we've been looking at, there is a UI component specific to phones

80
04:20.180 --> 04:21.020
and tablets.

81
04:21.020 --> 04:25.160
Specifically, when we use the number type, a number keyboard will show up.

82
04:25.420 --> 04:27.080
It'll look something like this.

83
04:28.020 --> 04:30.420
So it does have its place, Right?

84
04:30.420 --> 04:32.770
And we've all seen these keyboards before.

85
04:32.790 --> 04:37.980
But before we move on, I just want to talk about the step in a little bit more detail.

86
04:37.980 --> 04:43.140
We know that you can use the step attribute to set the increment increase or decrease of the number

87
04:43.140 --> 04:43.890
itself.

88
04:43.890 --> 04:44.610
Right?

89
04:44.610 --> 04:52.200
And by default, the number type only validates if the number is an integer. And by default step is set

90
04:52.200 --> 04:52.890
to any.

91
04:52.890 --> 04:56.310
"So Clyde, when should I use this type of number?"

92
04:56.310 --> 05:02.910
Well, let me just say that it really only makes sense when the range of valid or reliable values is

93
05:02.910 --> 05:03.570
limited.

94
05:03.570 --> 05:06.510
For example, a person's age or height.

95
05:06.660 --> 05:13.830
If, on the other hand, the range is too large for incremental increases to make sense, for example,

96
05:13.830 --> 05:17.310
such as zip codes, then another type might be more appropriate.

97
05:17.310 --> 05:23.130
For example, you may want to use the tel type, because in that instance, a numeric keypad will still

98
05:23.130 --> 05:31.750
be shown, but the browser will forego the number spinner UI feature, and that might be entirely a better

99
05:31.750 --> 05:34.960
option when the numbers start getting very large.

100
05:34.960 --> 05:37.960
Hope this has made sense and I'll see you in the next lecture.