Read these lines while learning about Number Input in HTML Forms :
type="number" for an
<input> we can restrict what users type into the input field to just numbers (and a few special characters like
+ , and
. ). We can also provide a
step attribute which creates arrows inside the input field to increase or decrease by the value of the
I didn’t understand the last line. It will be very helpful if somebody explains me this part.
Adding the step attribute like so:
<input type="number" step="1">
Will make it so that to arrows will be on the right side of the input box, clicking the top arrow will increase the number by one, and clicking the bottom arrow will decrease the number by 1.
You can change how much the number changes by increasing or decreasing the attributes number:
<input type="number" step="5"
Pushing the arrows on this input will increase or decrease the number by five.
Hopefully this helps.
Here is a picture of the <input> element with and without span…
Oh, Thanks @8-bitgaming ! I didn’t think that I’ll be getting such a quick answer.
But @8-bitgaming, in the later chapters I don’t see the
step attribute, even though the arrows appear at the right end of the number field. This is how the code for the
number input appears in the next exercise :
<label for="amount">How many patties would you like?</label>
<input type="number" name="amount" id="amount">
I tried out myself by omitting the
step attribute in the previously mentioned Number Input exercise and still the the arrows appeared.
Is it really necessary to give the
step attribute for the
number attribute ? Why and how does it appear when the
step attribute is not given ?
I found it will still appear without the step attribute, but is defaulted to 1.
I think it varies between different browsers…
My copy of Crome has hidden arrows that only show up if the cursor is over them, but an older version of Crome I had didn’t show them at all…
Because of this, it is probably good practice to put the step attribute in, so that it will work on any browser.