HTML: Input Number Field

By Xah Lee. Date: . Last updated: .

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

Result:

<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

βˆ‘ JS in Depth
XAH
Buy Xah JavaScript Tutorial
βˆ‘ JS in Depth
XAH

JS Obj Ref

DOM


DOM

Overview

Basic Examples

HTML Input

Web Scripting Examples

Web Scripting Misc

jQuery

node.js