Portada » HTML5 Demostración y Ejemplos » Input type number y números decimales

Input type number y números decimales

Input type number y números decimales. HTML5 define un tipo “number” para los input de un formulario pero por defecto solo admite números enteros. ¿Y cómo hacemos para que el input type number acepte números decimales? Esto es una gran pregunta que estimo que la mayoría de nosotros se encontrara cuando estemos desarrollando una página web o una aplicación web.

Con la llegada del HTML5 la manera de validar formularios se convirtió en algo muy sencillo, anteriormente se hacía mediante JavaScript o Jquery, pero para que incrementar nuestras líneas de código ya que la versión HTML5 ya viene incorporadas esas opciones de validación con una mínima cantidad de líneas de código. Cuando estamos desarrollando un formulario y necesitamos que un input solo acepte datos de tipo numérico lo más rápido y “correcto” en HTML es hacer:

<input name="un_numero_decimal" value="" type="number">

Correcto, con esto logramos que el input solo acepte números mas no texto, tirándonos un error si colocamos texto dentro de este campo. Pero si deseamos ingresar datos con decimales ahí es en donde vienen los problemas, que nosotros con un poco de conocimiento de las etiquetas HTML5 podemos resolver rápidamente.

Entonces, ¿qué está sucediendo aquí? ¿Es un error del navegador? Firefox no falla, esto quiere decir que es un fallo en la programación del nuevo lenguaje HTML5.

Cabe resaltar que en realidad no es un error; el campo (input) de formulario se comporta como se define por el W3C. Campos de entrada numéricos pueden tener atributos adicionales «min» y «step», que limitan el rango de valores permitidos en su entrada.

  • El atributo «min» es bastante obvio: es el valor mínimo su número puede ser.
  • El atributo «step» es menos intuitiva: al jugar con diferentes valores, lo más probable es hacer ejercicio que controla el aumento / disminución al hacer clic en los botones arriba / abajo en el campo.

Input type number y números decimales

Pero con este código nos daremos cuenta muy pronto que no nos deja introducir números decimales del tipo 4.5 ó 5.90. Esto se soluciona favorablemnte y d emaner ainmediata de la siguiente manera:

<input value="" type="number" step="any">

Con esto nuestro input de tipo numerico ya acepta números decimales con total normalidad.

Input type number y números decimales
Input type number y números decimales

Referencias:

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 3

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad