Índice

Campo de texto con formato numérico

Otro campo nuevo incluido en HTML5 son los contadores numéricos. Estos contadores, que se encuentran frecuentemente en aplicaciones como los procesadores de texto, se usan también en aplicaciones web.

Esta nueva etiqueta <input type="number"> tiene atributos específicos:

min

Indica el valor mínimo del contador.

max

Indica el valor máximo del contador.

step

Determina el incremento del contador cada vez que se hace clic en las flechitas images/plus.png o images/moins.png.

value

Indica el valor inicial del contador.

Ejemplo

<!DOCTYPE html> 
<html lang="es"> 
<head> 
   <title>Html5</title> 
   <meta charset="UTF-8"> 
</head> 
<body> 
<form action=""> 
Numero de artículos (grupos de 2):<br> 
<input type="number" name="q" min="2" max="10" step="2" value="2"> 
</form> 
</body> 
</html>

Al inicio:

images/CAP09IMG29.png

Haciendo clic en las flechitas, el usuario puede aumentar o disminuir el contador.

images/CAP09IMG30.png

Usando el archivo HTML5 que encontrará en el área de descargas, comprobará que el valor inicial es 2, que no es posible descender por debajo del 2 ni superar el valor máximo 10, y que con cada clic en las flechitas se aumenta o se disminuye en 2 unidades el contador (véase el código del ejemplo).

Comentarios

  • A día de hoy, este contador se ha implementado ...