Can you explain this code please???

Question

<input type="number" name="values" min="0" max="30" step="7" value="0" >

Answer 1

It is HTML for an input element that accepts numeric inputs from 0 to 30 but in steps or increments of 7. This means, its arrow buttons will spin through 0, 7, 14, 21, and 28.

Before the user inputs anything, its initial value will be 0.

Here is a breakdown of all the attributes and their impact:
type="number" = the input is for numeric values as apposed to text or dates...
value = initial value
min = the minimum of its accepted numeric range
max = the max of its numeric range. Due to the min and step, a max of 28, 29.. 34 would have the exact same behaviour.
step = the interval between each accepted number.

Answer 2

What do you mean by giving the input 10 or 11?

If you mean the value attribute is 10 or 11, yeah, the initial value will be 10 or 11 instead of 0. That'll change behaviour of the initial value. It won't change how the arrow buttons iterate over 0, 7, 14, 21, 28, though.

A lot of the questions you might have about changes to it could be tested by adding the markup to a simple web page and testing it in a web browser.

Answer 3

Josh Greig
If we give the input 10 or 11, then their behaviour will be same or not.

Answer 4

Hey Josh Greig
Can we change input type???

Answer 5

Yes, you can update the HTML to set type="text" and that'll make the arrow buttons not appear. You'll be free to enter any text and the min, max, step attributes will be ignored. Different type attribute values do different things.

I suggest you write this HTML into a small HTML file, load it in a browser, and see for yourself.

Answer 6

Hey Josh Greig thanks man !