Vistas de página en total

martes, 28 de mayo de 2013

Input text tipo Number con Decimales en HTML5.



Este aporte es un pequeño tip, para el input tipo numérico de HTML5. En el desarrollo de mi trabajo de graduación de la universidad, me encontré con un formulario donde el usuario deberia ingresar números en un campo de texto HTML, para esto es perfecto el nuevo tipo de input que nos trae HTML5, y no es nada mas que la siguiente linea de codigo:


 <input type="number" name="txt_total" id="txt_total"  placeholder="Digite el total"  required  />


Al mismo tiempo podemos especificar el máximo y el mínimo de datos aceptados,  asi como la propiedad requerid, el cual valida el navegador por nosotros que el usuario llene la caja de texto, "SUPER FACIL Y GENIAL". Pero hay un problema ya que muchas veces se necesita ingresar  números decimales. Y recurrimos nueva mente a las propiedades de HTML5, resultando muy simple y fácil solucionar dicho problema. Basta agregar la propiedad "step" que corresponde al incremento en la caja de texto.

<input type="number"  name="txt_total"  id="txt_totalmin="0" max="100" step="0.01"  title="Digite valores numéricos. Ejemplo: 99.99"  required />


EJEMPLO:


Listo!, sumamente sencillo, de hecho HTML5 está hecho para que las cosas que antes eran complicadas , ya no lo sean.

Saludos y mucha suerte! 

1 comentario:

  1. pues cuando trato de escribirlos me los borra, no se cual sea el problema.

    ResponderEliminar