HTML 5 (Formularios 2)

A partir de este post usaremos como navegador predeterminado Safary o chrome, esto debido a su mejor compatibilidad con las etiquetas de formularios de HTML 5

Lo primero sera saber que en las imágenes de l post anterior están los nombre de las nuevas etiquetas para formularios en HTML5, así que comencemos a describirlas.

Number

Los input creados con number solo admiten valores  numéricos enteros y crean un cuadro de texto con botones de desplazamiento para cambiar la numeración a través de ellos, para un acceso mas rápido. Los atributos de los number son:

• max: Establece el valor máximo admitido
• min: Establece el valor mínimo admitido
• step: Indica la cantidad en la que se incrementara o decrementara el cuadro number
• requiered: Indica que este campo es obligatorio.

A continuación veamos una imagen de un formulario usando esta nueva clase de input

Date

Los tipos date se usan para ingresar fechas, su apariencia es igual a los number, solo que solo aceptan fechas, veamos un ejemplo de ello:

Datetime

Similar al anterior solo que ademas de la fecha se incluye la hora.

Time

Este es otro picker, solo que este permite seleccionar la hora

Range

Este input crea un control deslizante para seleccionar un valor numérico.

 

A todas las etiquetas input se puede agregar el atributo requiered, con el cual se convierten en obligatorios, con lo cual el formulario no se envía hasta que estén completos, tal y como vemos en la imagen

Otros

Hay otros tipos de input, pero estos son los menos soportados por los navegadores.

• url: para escribir direcciones de paginas web
• mail: para direcciones de correo electrónico
• search: para búsqueda en motores de búsqueda

Como siempre les dejo el enlace al archivo del ejemplo, recuerde que solo podrá verlo correctamente en safari y chrome

http://db.tt/IrJfcuD