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

 

 

Anuncios

Acerca de sistemasumma

Blog dedicado a la tecnología y a todos los estudiantes de sistemas, informatica, computación y afines
Esta entrada fue publicada en Lenguajes de aplicaciones y etiquetada , . Guarda el enlace permanente.

2 respuestas a HTML 5 (Formularios 2)

  1. Anónimo dijo:

    eso de id=”edad” por ejemplo para que es???

    Me gusta

    • sistemasumma dijo:

      el atributo id permite darle un nombre o identificador unico a cada etiqueta de html que coloques, como las etiquetas son elementos que colocas en una pagina web, puedes usar el id de la etiqueta para modificarla a traves de codigo javascript, asi por ejemplo podrias hacer un boton que cambie el color de un texto o el fondo de tu pagina, solo por dar unos ejemplos

      Me gusta

¿Qué estas pensando?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s