Working with number inputs
Video: Working with number inputsEmail, URL, and search aren't the only new input types available for us in HTML5. In order to make building applications easier, the input form field now has mechanisms built into it to assist in inputting numeric values, from setting value ranges to choosing specific form controls, the number input type allows for greater control over submitting numeric data. So if you haven't already, go ahead and open up the trails.htm from 05_05 folder and I'm just again going to scroll through my code until I find our form.
Viewers: in countries Watching now:
In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future. Exercise files accompany the course.
- Understanding the history of HTML5
- Using new tags
- Understanding HTML5 semantics
- Coding ID and class attributes in HTML5
- Structuring documents
- Building forms
- Exploring HTML5 native APIs
- Encoding and adding HTML5 video
- Exploring associated technologies such as CSS3
Working with number inputs
Email, URL, and search aren't the only new input types available for us in HTML5. In order to make building applications easier, the input form field now has mechanisms built into it to assist in inputting numeric values, from setting value ranges to choosing specific form controls, the number input type allows for greater control over submitting numeric data. So if you haven't already, go ahead and open up the trails.htm from 05_05 folder and I'm just again going to scroll through my code until I find our form.
So just underneath the URL form input, we are going to place another input type. So I am going to go down the next line and the first thing we are going to do is just put in a label for this. So I am going to enter in a label tag and I am going to say that this label is for a form element called riders that we have not yet entered. Then inside of this label I am going to go ahead and just type in Number of riders. All right, below that we are going to place a new input element. Now for this input element I am just going to go ahead and do the type attribute first.
One of the things I want to talk about is notice that we have a number type and we are going to do that in just a moment, but notice we have the one directly underneath that as well which is range. Now if you use range you're going to get a slider bar in certain browsers and devices. This can allow the user to slide from one value to another. So that can be very handy for some applications. Now we are going to use the number one. So I am going to choose number and just type that in as attribute. Now number input types have some very specific attributes of their own. Let's go ahead and finish out our normal form attributes before we get into those.
So the first thing I am going to do is give it a name attribute of riders and an id attribute of riders as well. So just so we are in sync with everybody else on the page. And then we are going to go ahead and give it a tab index of 60 so that it again falls in sequence with the rest of our form. Now we are going to take a look at some of the specific values that we can set here. Notice for example that we have an attribute named step. Now we are not going to do step, but if you want the form to increment in certain value ranges-- For example, if we had a step of five, the initial value for the number will be 5 and then it would go to 10 and then it would go to 15 and so forth and so on.
So if you want to go ahead and restrict it to certain values, step is a really nice way of doing that. But something that we also have are minimum and maximum values. Now we are not going to set a maximum value, but we could do that by typing in max. If they went riding with a hundred riders, we kind of want to know about that. So we're not going to go ahead and put a maximum value in here. We are however going to do a minimum value. We are going to say you had to have at least one rider on this trail with you. So we are going to go ahead and do a minimum value of 1. That way, depending upon how the form controls are exposed, and in some cases you're just going to get a text box.
In other cases, you're going to get a stepper. So if you get that numeric stepper, it won't allow the user to step it below the number 1, which is nice. It's not restricting what somebody could type in. It's not restricting what they could submit, but it is restricting the form controls that might result from this particular type of form element. Now just after that I am going to type in a default value for this as well. If you wanted to start it off at a certain value, you could go ahead and do that and we are going to start this off at 1 as well, because more than likely it was a single rider, but maybe there were five in the group or ten in the group.
In this case, if it was just one rider, he or she is not going to have to keep typing that in. It will already be in the form element for them. Okay, cool! So now there is our input form element. We are done with that. So we'll go ahead and close that out. Let's save it and let's test it. This is one of the ones where you're going to see a pretty dramatic difference based upon which browser or which device you test this in. So I am going to go ahead and test it first in Chrome. In Chrome if I go down to Number of riders, notice it's already populated to 1, but there is no real form controls. So there is nothing for it to stop me from typing in 0 or even -3.
So I don't have any form controls here and we don't really have any stepping. So Chrome isn't exposing any form controls outside of our normal text field. We see in Safari, we do get a stepper. Notice we cannot go below 1 and unfortunately it won't let us go up either. So although Safari does expose the controls, the controls really aren't doing anything for us. We still have to type those in. So at least with Safari we see the genesis of what these form elements will eventually look like. Let me just try something real quick here guys. This is just for me, this is not for the users. Now if I test this in Firefox, again notice that just like Opera, I just get a normal text field, no exposed controls there whatsoever.
However, if I test this in Opera, notice again we get some form controls, and now those form controls are working. So you'll notice that I can use the actual stepper controls to step up and I can use them to go ahead step down. However, I can't go past one rider. So if I just click down right now, nothing is happening whatsoever and that's the minimum value coming into play. So Opera gives you a little bit more robust set of form controls, but it should give you some idea as to how other devices and browsers in the future will go ahead and represent these numeric steppers. Now having more controls at your disposal is a great thing.
So we are almost done with our form, but I want to talk about one more new form element and we will do that in our next movie when we talk about date pickers.
There are currently no FAQs about HTML5 First Look.