12 - FORM (number)

Si necesitamos cargar un valor numérico podemos emplear un input con el siguiente formato:

<input type="number" id="valor" name="valor" min="1" max="10">

Las propiedades min y max definen el valor máximo y mínimo que se puede ingresar.

Problema

Ingresar por teclado un valor numérico comprendido entre 1 y 10.

Solución

<!DOCTYPE HTML>
<html>
    <head>
        <title>Título de la página</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <form action="#">
            <p>Ingrese un valor entre 1 y 10:
            <input type="number" id="valor" name="valor" min="1" max="10">
            </p>
            <p><input type="submit" value="Confirmar"></p>
        </form>
    </body>
</html>

Cuando ejecutamos esta página en Chrome aparece un selector numérico con dos botones que podemos incrementar o disminuir el valor:

La misma funcionalidad esta implementada en Firefox. Microsoft Edge no lo implementa a enero de 2018.