Https://www.codecademy.com/learn/paths/web-development

Read these lines while learning about Number Input in HTML Forms :

“By setting 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 step attribute.”

I didn’t understand the last line. It will be very helpful if somebody explains me this part. :slightly_smiling_face:

Hello @tag9382624324!!

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. :grinning:

1 Like

Here is a picture of the <input> element with and without span…

1 Like

Oh, Thanks @8-bitgaming ! I didn’t think that I’ll be getting such a quick answer. :smile:

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 :

 <section class="patties">
          <label for="amount">How many patties would you like?</label>
          <input type="number" name="amount" id="amount">
        </section>

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.

1 Like