HTML: Input Number Field

By Xah Lee. Date: . Last updated: .

Number Input Example

This is for user to input a number, integer or decimal number.

Result:

Code

<label for="inputNumber98102">Enter a number:</label>
<input type="number" id="inputNumber98102" min="1" max="100" />

<p>Result:
<span id="showBox04998"></span>
</p>

Here's JavaScript code to get the value. 

{
const inputNumber98102 = document.getElementById("inputNumber98102");
const showBox04998 = document.getElementById("showBox04998")

const f_update = (() => { showBox04998.textContent = inputNumber98102.value;});

inputNumber98102.addEventListener ("input", f_update, false);

f_update();
}

Options

value=40
a default value.
step=0.1
increment. In some browsers, you can press up/down arrow to increase/decrease the value

Here's a example of steps 0.1, with min max of 0 to 1.

Convert String to Number

HTML Input tutorial