Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Datos de búsqueda

HTML 5: Formularios

Elemento INPUT

Aparecen nuevos tipos de elemento INPUT:

Tipo de INPUT Código HTML
Búsqueda <input type="search">
Numérico <input type="number">
Intervalo <input type="range">
Selección de color <input type="color">
Teléfono <input type="tel">
URL <input type="url">
E-mail <input type="email">
Tiempo y fechas Fecha <input type="date">
Mes <input type="month">
Semana <input type="week">
Hora <input type="time">
Fecha y hora <input type="datetime">
Fecha y hora (local) <input type="datetime-local">

En navegadores antiguos sin soporte de HTML 5 estos nuevos tipos degradan a tipo texto.

No se especifica como deben mostrarse dichos campos en los navegadores, ni tampoco como deben hacer el reporte de errores.

Campo para e-mail

Debe rellenarse con una dirección de correo electrónico correctamente construida.

<input type="email">

Mediante el atributo multiple se permite la introducción de varias direcciones separadas por comas.

<input type="email" multiple>

Posible comportamiento: extracción de los datos desde una libreta de direcciones o desde información de usuario en el dispositivo con el que se accede.

Saber más: input type=email – e-mail address input control (enlace externo, en inglés).

Campo para URL

Debe rellenarse con una URL, que no tiene que ser necesariamente HTTP o HTTPS, también puede ser un ‘mailto:’, ‘tel:’, etc.

<input type="url">

Posible comportamiento: Autocompletado con las direcciones almacenadas en el historial de páginas visitadas del navegador.

Saber más: input type=url – URL input control (enlace externo, en inglés).

Campo para teléfono

Campo para introducción de teléfonos.

<input type="tel">

Posible comportamiento: extracción de los datos desde una libreta de direcciones o desde información de usuario en el dispositivo con el que se accede.

Saber más: input type=tel – telephone-number-input field (enlace externo, en inglés).

Campos de tiempo y fechas

Campo de fecha

Permite la inserción de fechas en formato AAAA-MM-DD.

<input type="date">

Comportamiento del navegador:

  • Opera 11 muestra un calendario para seleccionar la fecha: Captura del comportamiento del campo fecha en Opera 11
  • Chrome 8 muestra flechas que varían el día de uno en uno: Captura del comportamiento del campo fecha en Chrome 8

Campo de prueba de fecha:

El comportamiento que muestra Opera es similar a muchas soluciones existentes mediante Javascript.

Saber más: input type=date – date input control (enlace externo, en inglés).

Campo de hora

Permite la inserción de la hora en formato HH:MM (horas, minutos). No se incluye información de zona horaria.

<input type="time">

Comportamiento en Opera 11 y Chrome 8: Campo con controles que permiten la variación de la hora. Captura de campo de hora en Opera 11 y Chrome 8

Campo de prueba de hora:

Saber más: input type=time – time input control (enlace externo, en inglés).

Campo de fecha y hora

Permite la inserción de fecha y hora en un solo campo (une las funcionalidades de los tipos ‘date’ y ‘time’). Debe permitir la especificación de zona horaria.

<input type="datetime">

Existe un tipo ‘datetime-local’ que permite introducir fecha y hora local, sin especificar la zona horaria.

<input type="datetime-local">

Comportamiento del navegador:

  • Opera 11 muestra la zona horaria en el tipo ‘datetime’, pero no deja cambiarla (se define como hora UTC): Captura del comportamiento del campo fecha y hora en Opera 11
  • Chrome 8 permite la modificación de la zona horaria en el tipo ‘datetime’: Captura del comportamiento del campo fecha y hora en Chrome 8

Campo de prueba de fecha y hora:

Campo de prueba de fecha y hora local:

Campo de mes

Permite la inserción de mes y año en formato AAAA-MM (año, mes).

Resulta de utilidad para especificar caducidad de tarjetas bancarias.

<input type="month">
<input type="month" value="2010-10">

Comportamiento del navegador:

  • Opera 11 muestra un calendario en el que seleccionar el mes: Captura del comportamiento del mes en Opera 11
  • Chrome 8 muestra flechas que varían el mes de uno en uno: Captura del comportamiento del mes en Chrome 8

Campo de prueba de mes:

Saber más: input type=month – year-and-month input control (enlace externo, en inglés).

Campo de semana

Permite la inserción de año y semana en el formato AAAA-WSS (año, semana):

  • Semana 50 del año 2010: 2010-W50
  • Semana 2 del año 2011 (si el número de semana es menor de 10, llevará un cero delante): 2011-W02
<input type="week">
<input type="week" value="2011-W02">

Comportamiento del navegador:

  • Opera 11 muestra un calendario en el que seleccionar la semana: Captura del comportamiento del campo semana en Opera 11
  • Chrome 8 muestra flechas que varían la semana de uno en uno: Captura del comportamiento del campo semana en Chrome 8

Campo de prueba de semana:

Saber más: input type=week – year-and-week input control (enlace externo, en inglés).

Campo de número

Solo acepta valores numéricos, incluyendo números negativos y con decimales, separando los decimales con punto.

<input type="number">
<input type="number" value="30.8">

Comportamiento en Opera 11 y Chrome 8: Campo con controles que permiten la variación del número, de modo predeterminado en intervalos de 1. Captura de campo de número en Opera 11 y Chrome 8

Campo de prueba de número:

Saber más: input type=number – number input control (enlace externo, en inglés).

Campo de intervalo

El funcionamiento es el mismo que el campo de número (type="number"), pero con apariencia de slider.

Evitará el uso de Javascript para dar esta apariencia a los campos.

<input type="range">
<input type="range" value="30" max="100" min="0">
  • Opera 11 muestra un slider para seleccionar el número: Captura del comportamiento del campo intervalo en Opera 11
  • Chrome 8 similar a Opera 11: Captura del comportamiento del campo intervalo en Chrome 8

Campo de prueba de intervalo:

Saber más: input type=range – imprecise number-input control (enlace externo, en inglés).

Otros tipos de campo

Campo para búsqueda

Es similar al campo de tipo texto, con la diferencia de poder ser presentado de modo distinto por el navegador.

<input type="search">

Comportamiento en Safari 5 y Chrome 8: al comenzar a rellenar el campo, aparece un control a la derecha del mismo que permite borrar la búsqueda. Captura de campo de búsqueda en Safari 5 y Chrome 8

Campo de prueba de búsqueda:

Saber más: input type=search – search field (enlace externo, en inglés).

Campo para selección de color

Permite seleccionar un color mediante un cuadro de selección de colores.

El valor del campo deberá ser un color expresado en formato hexadecimal, del mismo modo que en CSS, como puede verse en el ejemplo:

<input type="color">
<input type="color" value="#00a2e8">

Comportamiento en Opera 11: se muestra un cuadro de selección de colores. Captura de campo de selección de color en Opera 11

Campo de prueba de selección de color:

Saber más: input type=color – color-well control (enlace externo, en inglés).

Compartir este artículo:

  • Compartir en del.icio.us
  • Compartir en Technorati
  • Añadir a Google Bookmarks
  • Compartir en Google Buzz

Datos del artículo:

Comentarios de la página

Puedes comentar o hacer trackback desde tu propio sitio web.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Hacer un comentario