lunes, 5 de octubre de 2015

Los formularios Web en HTML5 - 2 de 2



  • Tipo number

Como su nombre lo indica, el tipo number es sólo válido cuando recibe una entrada numérica. Existen algunos atributos nuevos que pueden ser útiles para este campo:
    • min :El valor de este atributo determina el mínimo valor aceptado para el campo.
    • max :El valor de este atributo determina el máximo valor aceptado para el campo.
    • step :El valor de este atributo determina el tamaño en el que el valor será incrementado o disminuido en cada paso. Por ejemplo, si declara un valor de 5 para step en un campo que tiene un valor mínimo de 0 y máximo de 10, el navegador no le permitirá especificar valores entre 0 y 5 o entre 5 y 10.


Código 6-6. El tipo number.

<input type="number" name="numero" id="numero" min=”0” max=”10” step=”5”>


No es necesario especificar ambos atributos (min y max), y el valor por defecto para step es 1.

  • Tipo range

Este tipo de campo hace que el navegador construya una nueva clase de control que no existía previamente. Este nuevo control le permite al usuario seleccionar un valor a partir de una serie de valores o rango. Normalmente es mostrado en pantalla como una puntero deslizable o un campo con flechas para seleccionar un valor entre los predeterminados, pero no existe un diseño estándar hasta el momento. 
El tipo range usa los atributos min y max estudiados previamente para configurar los límites del rango. También puede utilizar el atributo step para establecer el tamaño en el cual el valor del campo será incrementado o disminuido en cada paso.

Código 6-7. El tipo range.

<input type="range" name="numero" id="numero" min=”0” max=”10” step=”5”>

Podemos declarar el valor inicial utilizando el viejo atributo value y usar Javascript para mostrar el número seleccionado en pantalla como referencia. Experimentaremos con esto y el nuevo elemento <output> más adelante.

  • Tipo date

Este es otro tipo de campo que genera una nueva clase de control. En este caso fue incluido para ofrecer una mejor forma de ingresar una fecha. Algunos navegadores muestran en pantalla un calendario que aparece cada vez que el usuario hace clic sobre el campo. El calendario le permite al usuario seleccionar un día que será ingresado en el campo junto con el resto de la fecha. Un ejemplo de uso es cuando necesitamos proporcionar un método para seleccionar una fecha para un vuelo o la entrada a un espectáculo. Gracias al tipo date ahora es el navegador el que se encarga de construir un almanaque o las herramientas necesarias para facilitar el ingreso de este tipo de datos.

Código 6-8. El tipo date.

<input type="date" name="fecha" id="fecha">

La interface no fue declarada en la especificación. Cada navegador provee su propia interface y a veces adaptan el diseño al dispositivo en el cual la aplicación está siendo ejecutada. Normalmente el valor generado y esperado tiene la sintaxis año-mes-día.

  • Tipo week

Este tipo de campo ofrece una interface similar a date, pero solo para seleccionar una semana completa. Normalmente el valor esperado tiene la sintaxis 2011-W50 donde 2011 es al año y 50 es el número de la semana.

Código 6-9. El tipo week.

<input type="week" name="semana" id="semana">

  • Tipo month

Similar al tipo de campo previo, éste es específico para seleccionar meses. Normalmente el valor esperado tiene la sintaxis año-mes.

Código 6-10. El tipo month.

<input type="month" name="mes" id="mes">

  • Tipo time

El tipo de campo time es similar a date, pero solo para la hora. Toma el formato de horas y minutos, pero su comportamiento depende de cada navegador en este momento. Normalmente el valor esperado tiene la sintaxis hora:minutos:segundos, pero también puede ser solo hora:minutos.

Código 6-11. El tipo time.

<input type="time" name="hora" id="hora">

  • Tipo datetime

El tipo de campo datetime es para ingresar fecha y hora completa, incluyendo la zona horaria.

Código 6-12. El tipo datetime.

<input type="datetime" name="fechahora" id="fechahora">


  • Tipo datetime-local

El tipo de campo datetime-local es como el tipo datetime sin la zona horaria.

Código 6-13. El tipo datetime-local.

<input type="datetime-local" name="tiempolocal" id="tiempolocal">

  • Tipo color

Además de los tipos de campo para fecha y hora existe otro tipo que provee una interface predefinida similar para seleccionar colores. Normalmente el valor esperado para este campo es un número hexadecimal, como #00FF00.

Código 6-14. El tipo color.

<input type="color" name="micolor" id="micolor">

Ninguna interface fue especificada como estándar en HTML5 para el tipo de campo color, pero es posible que una grilla con un conjunto básico de colores sea adoptada e incorporada en los navegadores.



Espero haber ayudado en algo. Hasta la próxima oportunidad!








4 comentarios:

  1. Respuestas
    1. Hola Univo oriente, gracias por la visita y el aporte de tu comentario!
      Los mejores deseos! Hasta cualquier momento!

      Eliminar
  2. Suuper. No conocia toda esas nuevas caracteristicas del input object.

    ResponderEliminar
    Respuestas
    1. Hola Joel Ramos, gracias por la visita y el aporte de tu comentario!
      Siempre nuevas funciones o sintaxis aparecen para beneficio de todos!! :)
      Éxitos! Hasta cualquier instante!

      Eliminar