Very briefly, I want to talk about now another type, this time of number.
And you guessed it, it captures numbers.
No surprise there.
But what you may not know is that it's got 3 very useful attributes.
And those attributes are min, max and step.
Let's quickly hop over to the coding editor and have a look at these in action.
Firstly, how does this input with type number look like?
Well, it's very, very simple.
Let's just create a HTML file.
In here we can have our body, and within our body, let's just create a very simple form.
I want to create a form, by the way, because I want to submit the form and I want to show you the
client side validation
with this number type, it's pretty cool.
But anyway, how does it look?
Very, very simply, let's just create an input where it's type is set to number.
We don't even need a name or an ID. Let's save it, and look at the browser.
And there we go. On the face of it, it just looks like input of type text.
But if we go now and focus over it, we can see that there are those arrows - the up ⬆ and down ⬇ arrow. And
of course we can use our keyboard, up and down.
I'm using my keyboard now as we speak.
We can go negative and positive.
Very, very simple.
And you'll notice that the increments or the "step" is set to 1 by default.
So we could actually create a comment here saying "by default, the step attribute is set to 1."
Right.
It's the same as us manually setting step to 1.
There is no difference.
Okay, so that's the first cool thing I wanted to show you.
Next, I want to show you something else.
I want to now include all three attributes min, max and step.
What do you think is going to happen?
Well, let me put a comment here first.
When min, max and step are set, some browsers will show a narrower input box.
Why do they show a narrow ... a narrower,
there we go, a narrower input box.
The reason it's a smaller input box is because the width,
the width
of the widest valid value
is limited.
That's the reason.
So let me show you what I mean.
Let's create another input,
this type also of number.
But now ... I mean we don't need a name,
we don't need an ID ... but now I want to set, say, the minimum value of 100, maximum value can be 999.
And let's step it up in increments of 5.
Look at that on the browser.
Isn't that interesting?
So we can see it's a smaller input box.
How amazing.
And if we try and well, let me actually put a submit button,
let's just break it up, and then include a button with type submit.
If we now try and submit a value of 5, what do you think is going to happen?
Well, that's right.
The browser does front side validation for us.
It's awesome.
We've set the minimum of 100 and the browser gives us feedback saying the value must be greater than
or equal to 100.
How awesome is this, my dear students?
It's pretty, pretty cool.
The other thing worth mentioning is that when we set the type attribute to number, we cannot write
text in here.
So I'm trying on my keyboard now.
It won't let me.
The only thing we can type is numbers.
Very, very interesting.
So there we go.
And obviously the step here is in increments of 5 because that's what we defined.
Of course, if we go over 1000 and try and submit that, we also get front side validation.
Very, very cool.
Very, very intuitive.
Let's hop back to the lecture.
There you go.
Pretty intuitive, right?
The first thing you would have noticed is that although it looks like a text field, it does have subtle
differences.
And here it only allows floating point numbers between the min and max values that you specify.
And browsers usually provide some UI component, a spinner, for example, to increase or decrease the
value of the control.
And just like all the other widgets we've been looking at, there is a UI component specific to phones
and tablets.
Specifically, when we use the number type, a number keyboard will show up.
It'll look something like this.
So it does have its place, Right?
And we've all seen these keyboards before.
But before we move on, I just want to talk about the step in a little bit more detail.
We know that you can use the step attribute to set the increment increase or decrease of the number
itself.
Right?
And by default, the number type only validates if the number is an integer. And by default step is set
to any.
"So Clyde, when should I use this type of number?"
Well, let me just say that it really only makes sense when the range of valid or reliable values is
limited.
For example, a person's age or height.
If, on the other hand, the range is too large for incremental increases to make sense, for example,
such as zip codes, then another type might be more appropriate.
For example, you may want to use the tel type, because in that instance, a numeric keypad will still
be shown, but the browser will forego the number spinner UI feature, and that might be entirely a better
option when the numbers start getting very large.
Hope this has made sense and I'll see you in the next lecture.