martes, 23 de octubre de 2012

Formularios en HTML5

En HTML5 uno de los más grandes avances que se an incluido son las nuevas características de los formularios para hacerlos más potentes y útiles para nuestras aplicaciones.



Nuevos inputs de HTML5:

El estándar html4 solo contaba con inputs de tipo text, radio, checkbox, Password, submit, reset y button, aparte de textarea, select, que son también dos tipos de elemento de formulario.

Con la llegada de HTML5, hay soporte para todos los formularios de html4, y ahora tenemos a disposición estos otros formularios:
  • Color: el input de color es usado para campos que tienen un color, lo que hace es generar el numero hexadecimal de un color que le seleccionemos de la paleta de colores. 
  • Date: permite al usuario agregar una fecha. 
  • Datetime: permite al usuario agregar fecha y hora. 
  • Email: este tipo de campo almacena lo que sería una dirección de correo. 
  • Month: es para que el usuario pueda seleccionar mes y año. 
  • Number: con este input el usuario va a colocar números pueden ser enteros o decimales 
  • Range: este tipo de formulario muestra un pequeño campo donde el usuario selección un numero de un rango. 
  • Search: es para campos de búsqueda. 
  • Tel: es para colocar números de teléfonos 
  • Time: para colocar horas y minutos. 
  • url: Para colocar direcciones web. 
  • Week: Para seleccionar semanas del año.
  •  x-webkit-speech: que es un formulario para reconocimiento de vos que solo funciona con chrome.

Los nuevos formularios por supuesto no son soportado por todos los navegadores, solo lo más modernos navegadores empiezan a añadir soporte, aquí si cabe destacar que los navegadores de los teléfonos inteligentes, están sumamente avanzado en este sentido y soportan la mayoría de los campos, inclusive mejor que los navegadores de escritorio. Y muestran un teclado de acuerdo al tipo de input, por ejemplo en tel muestra puros números.

Para los navegadores que no soportan alguno de los formularios no hay problema porque se mostraran simplemente como un tipo text, y después con librerías javascript podemos hacer que funcionen en esos navegadores donde no hay soporte nativo.

Ejemplo de todos los formularios Formularios HTML5
GIT: https://github.com/bomba1990/HTML5-Ejemplos/blob/master/form/form.html

3 comentarios:

  1. Gracias por explicar los detalles!

    ResponderEliminar
  2. amigo estoy ejecunto el ejemplo y no pasa nada, instale el Ultimo firefox

    ResponderEliminar
    Respuestas
    1. hola, es raro. en chrome se ven todos. de todas maneras firefox, no se si tiene soporte para todos los campos.

      Eliminar