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

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

DOM How-To


Web Scripting Overview


HTML Input


Web Scripting Examples


Web Scripting Misc


jQuery


node.js

Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials