Check out a free preview of the full HTML Forms course
The "Input Range" Lesson is part of the full, HTML Forms course featured in this preview video. Here's what you'd learn in this lesson:
Jen demonstrates how to assign a min and max range to a "number" type input.
Transcript from the "Input Range" Lesson
[00:00:00]
>> Jen Kramer: And so, my label has flipped on to another line, here. There are actually little micro arrows in my number field, here, where I can crank this up and down, just by clicking the little arrows. Do you have that?
>> Jen Kramer: Yeah? Okay. Anyone see any issues here? Perfectly happy with this, the way it works?
[00:00:27]
I would like to abduct negative eight people. Anybody happy with that?
>> Speaker 2: Actually, yes.
>> Jen Kramer: Yeah. You like that idea? We do want to abduct negative eight people, after all. By the way, you can also type in this field, so I could have type in that I want to abduct 7.5, 8, 7 people.
[00:00:49]
That's completely legit, too. Okay? I could also just say, how many people would you like abducted, George? Poor George, man, we're really picking on him today.
>> Jen Kramer: All right? So, remember, just because the the arrows are there doesn't mean anybody has to use them. They are kind of tiny, and you can still type anything you want in here.
[00:01:10]
But it is possible to constrain those arrows because abducting negative people, despite what Ryan says, abducting negative people, you probably don't really want to do. So there's some other attributes for this. You can have a min, as in a minimum value. So, I want a minimum of one person to be abducted because otherwise, why are you filling out the form?
[00:01:34]
Okay? And a max of 10. We just don't have more room than that, in a lot of these spaceships. So, 10 is gonna be my max. Okay? Yes?
>> Speaker 3: So, I know you can have multiple things with the same ID-
>> Jen Kramer: Uh-huh.
>> Speaker 3: In HTML. What about name, like, if I had another question about-
[00:01:52]
>> Jen Kramer: Every ID has to be unique.
>> Speaker 3: Really?
>> Jen Kramer: IDs are the ones that are unique. Classes, you can have-
>> Jen Kramer: Use one class, many times, but the ID has to be unique for every web page. Now, I could take my qty ID from this page and use it on a different web page, but within this one web page, it has to be used only once.
[00:02:12]
>> Speaker 3: Okay. What about name?
>> Jen Kramer: Name, typically is unique, as well. There's nothing that is required, on the HTML side, but on the programming side, if you had two fields that were called the same name, your script is gonna get confused. Yeah. Okay? Sound good? Okay. So, if we save our form and we take a look at our revised form, you'll see, here, that now I might, and I hit my up arrow.
[00:02:42]
I can only go up to 10. I can only go down to one. And it just so happens to be it's doing it in whole numbers, which is good because we don't want to abduct half people, only whole people. Okay? But once again, you can type anything in that blank that you want.
[00:02:59]
We're gonna need some JavaScript, to double check and make sure that we have entered things correctly. That's the way it's gonna wind up working out.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops