Number field...min/max...etc

where are the parts in our curriculum that outline how to make min/max requirements for the number field?..i also need to have a requirement for numbers, not non-numbers…if these requirements are not met, an HTML validation error pops up…I just don’t remember where this was walked through in the lessons

Not sure where they are in the lessons, but it’s literally just

<input type="number" min="0" max="10" />

Where min is your minimum and max is your maximum. It’s a number input, you can’t enter anything except numbers.

You can also specify what to step the values by.

This steps by 1, so if the user enters 5, then clicks the little arrow up, it will go to 6, down will go to 4:

<input type="number" min="0" max="10" step="1"/>

This is the default, so if you don’t include a step attribute the input will behave this way. That also means a user cannot enter decimal numbers by default.

This steps by 0.1, so if the user enters 5, then clicks the little arrow up, it will go to 5.1, down will go to 4.9:

<input type="number" min="0" max="10" step="0.1"/>

This steps by 10, so if the user enters 10, then clicks the little arrow up, it will go to 20, down will go to 0:

<input type="number" min="0" max="100" step="10"/>
1 Like

what about the non-number validation?..if the user enters letters and not numbers, a validation should also appear? is that done?

It doesn’t let you type letters, it’s a number field

1 Like

got it…one more question…where in the curriculum does it talk about creating drop-downs to choose an option?

Well drop down is more of a styling element so it belongs to CSS
Not sure which lesson it is excatly but, if your intrested see link bellow onto how to make one

You mean <select> elements? I can’t see where (or if) they are covered in the curriculum, here is documentation:

1 Like

I’m not sure there is any part of the curriculum that talks about using the select and option elements, or at least I can’t find it either. Which does seem a bit odd considering it is one of the requirements for the form project.

1 Like

I was a bit surprised at that, I thought I’d just missed it when I was searching through the lessons

Perfect! Thank you! Works exactly how what I was looking for.