HTML - attributes - step

revision:


Content

"step" attribute : specifies number intervals for input element syntax some examples


"step" attribute : specifies number intervals for input element

top

The step attribute specifies the legal number intervals for an <input> element.The step attribute can be used on the <input> element.

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

The step attribute can be used together with the "max" and "min" attributes to create a range of legal values.

The step attribute works with the following <input> types: "number", "range", "date", "datetime", "datetime-local", "month", "time" and "week".


syntax

top

<input type=" " step="number">

input type:date; value=1 (day); example: <input type="date" min="2019-12-25" step="1">

input type:month; value=1 (month); example:<input type="month" min="2019-12" step="12">

input type:week; value=1 (week); example:<input type="week" min="2019-W23" step="2"

input type:time; value=60 (seconds); example:<input type="time" min="09:00" step="900">

input type:datetime-local; value=1 (day); example:<input type="datetime-local" min="019-12-25T19:30" step="7">

input type:number; value=1; example:<input type="number" min="0" step="0.1" max="10">

input type:range; value=1; example:<input type="range" min="0" step="2" max="10">


some examples

top
codes:
                    <form style="margin-left:3vw;" action="/action_page.php">                                                               
                        <label for="points">Points:</label>
                        <input type="number" id="points" name="points" step="3">
                        <input type="submit">
                    </form>
                    
                












codes:
                        <input style="margin-left:3vw;" type="date" min="2019-12-25" step="1"><br><br>
                        <input style="margin-left:3vw;" type="month" min="2019-12" step="12"><br><br>
                        <input style="margin-left:3vw;" type="week" min="2019-W23" step="2"><br><br>
                        <input style="margin-left:3vw;" type="time" min="09:00" step="900"><br><br>
                        <input style="margin-left:3vw;" type="datetime-local" min="019-12-25T19:30" step="7"><br><br>
                        <input style="margin-left:3vw;" type="number" min="0" step="0.1" max="10"><br><br>
                        <input style="margin-left:3vw;" type="range" min="0" step="2" max="10">