Es/Elementos de formulario adicionales del HTML5

From Web Education Community Group
Jump to: navigation, search

Introducción

El HTML5 incluye muchas nuevas características para hacer los formularios web más fáciles de crear, más poderosos y consistentes a través de la Web. En este artículo se presenta un breve resumen acerca de algunos de los nuevos controles y funcionalidades de formulario que han sido introducidos.

¿Por qué necesitabamos nuevas características de formulario?

Seamos realistas, los formularios HTML siempre han sido un dolor de cabeza. No es muy divertido etiquetarlos y puede ser complicado aplicarles estilos, especialmente si desea que tengan una apariencia consistente en todos los navegadores y que se ajusten al aspecto general de su sitio. Adicionamente, rellenarlos puede ser frustrante para sus usuarios, aún si los ha creado con mucho cuidado y consideración para hacerlos tan usables y accesibles como sea posible. Crear un buen formulario es más un asunto de limitar los daños que generar experiencias de usuario agradables.

Hace tiempo atrás, cuando el HTML 4.01 se convirtió en una recomendación estable, la web era un lugar mayormente estático. Sí, existía el singular formulario de comentarios o el libro de visitantes, pero generalmente los sitios web estaban allí para que los visitantes simplemente leyeran. Desde entonces, la web ha evolucionado. Para muchas personas, el navegador se ha convertido en una ventana a un mundo de aplicaciones complejas basadas en la web que intentan lograr una experiencia casi similar a la de su computador.

Algunos complejos controles de formulario no nativos, falsificados mediante  JavaScript

Figura 1: Algunos complejos controles de formulario no nativos, falsificados mediante JavaScript.

Para satisfacer la necesidad de controles más sofisticados necesarios para tales aplicaciones, los desarrolladores han estado aprovechando las bibliotecas y entornos de JavaScript (como jQueryUI o YUI). Estas soluciones sin duda han madurado a lo largo de los años, pero en esencia son una solución alternativa para compensar los limitados controles de formulario disponibles en HTML. Éstos "falsifican" los widgets más complejos (como selectores de fecha y controles deslizantes) superponiéndoles etiquetado adicional (no siempre semántico) y una gran cantidad de código JavaScript en la parte superior de las páginas.

HTML5 pretende estandarizar algunos de los controles de formulario mejorados más comunes, desplegándolos de forma nativa en el navegador y obviando la necesidad de estas soluciones alternativas basadas en pesadas de secuencia de comandos.

Introduciendo nuestro ejemplo

Para ilustrar algunas de las nuevas características, este artículo viene con un [ejemplo básico de formulario HTML5]. No tiene la intención de representar un formulario "verdadero" (ya que estaría presionado para encontrar una situación en la que necesite todas las nuevas características en un solo formulario), pero debe darle una idea de como se ven y comportan los diferentes controles.

Nota: la apariencia de los nuevos controles de formulario y los mensajes de validación difiere de navegador en navegador, por lo que debe considerar la aplicación de estilos a sus formularios para que tengan una apariencia razonablemente consistente en los diferentes navegadores.

Nuevos controles de formulario

Como las formularios son la principal herramienta para la introducción de datos en las aplicaciones web y los datos que deseamos recopilar se han vuelto más complejos, ha sido necesario crear un elemento input con más capacidades, para recolectar estos datos con más semántica y una mejor definición, además de permitir un más facil y eficaz manejo de errores y validación.


<input type="number">

El primer nuevo tipo de campo de entrada que analizaremos es type="number":

<input type="number" … >

Este crea un tipo especial de campo de entrada para la introducción de un número. En la mayoría de los navegadores que lo soportan, aparece como un campo de entrada de texto con un control de número, que le permite aumentar o disminuir su valor.

Un campo de entrada de tipo number

Figura 2: Un campo de entrada de tipo number.

<input type="range">

Crear un control deslizante que le permita elegir entre un rango de valores solía ser una propuesta complicada, semánticamente dudosa, pero con el HTML5 es fácil: sólo tiene que utilizar el tipo de campo de entrada range:

<input type="range" … >

Un campo de entrada range

Figura 3: Un campo de entrada range.

Tenga en cuenta que, por defecto, este campo de entrada no suele mostrar el valor seleccionado en el momento actual, o incluso el rango de valores que abarca. Los desarrolladores deben proporcionarlos mediante otros medios; por ejemplo, para mostrar el valor actual, podríamos utilizar un elemento <output> junto con algo de JavaScript para actualizar la representación del control cuando el usuario ha interactuado con el formulario:

<output onforminput="value=weight.value"></output>

<input type="date"> y otros controles de fecha/hora

HTML5 tiene un número de campos de entrada diferentes para crear selectores complejos de fecha/hora; por ejemplo, el tipo de selector de fecha que aparece en prácticamente todo sitio de reserva de vuelo/tren existente. Estos suelen crearse utilizando trucos no semánticos, por lo que es estupendo que ahora tengamos formas estandarizadas fáciles para hacerlo. Por ejemplo:

<input type="date" … >
<input type="time" … >

Estos crean, respectivamente, un selector de fecha totalmente funcional y un campo de entrada de texto que contiene un separador para horas, minutos y segundos (dependiendo del atributo step especificado) que sólo le permite introducir un valor de tiempo.

Campos de entrada date y time

Figura 4: Campos de entrada date y time.

Pero allí no termina todo — hay un número de otros campos de entrada relacionados disponibles:

  • datetime: combina la funcionalidad de los dos que hemos analizado anteriormente, permitiéndole elegir una fecha y una hora.
  • month: le permite elegir un mes, almacenado internamente como un número entre 1-12; aunque los diferentes navegadores pueden proporcionarle mecanismos de selección más elaborados, como una lista desplegable con los nombres de los meses.
  • week: le permite elegir una semana, almacenada internamente en el formato 2010-W37 (semana 37 del año 2010) y elegida mediante un selector de fecha similar a los que ya hemos visto.

<input type="color">

Este campo de entrada muestra un selector de color. La implementación de Opera le permite al usuario elegir entre una selección de colores, introducir valores hexadecimales directamente en un campo de texto o invocar el selector de colores nativo del Sistema Operativo.

un campo de entrada color y los selectores de color nativos de Windows y OS X

Figura 5: un campo de entrada color y los selectores de color nativos de Windows y OS X.

<input type="search">

El campo de entrada search podría decirse que no es nada más que un campo de entrada de texto con un estilo diferente. Los navegadores deberían aplicarle a estos campos de entrada el mismo estilo que a cualquier funcionalidad de búsqueda específica del sistema operativo. Sin embargo, más allá de esta consideración puramente estética, sigue siendo importante tener en cuenta que el etiquetar explícitamente campos de búsqueda abre la posibilidad para los navegadores, ayudas técnicas o rastreadores automatizados, de hacer algo inteligente con estas entradas en el futuro; por ejemplo, un navegador podría, posiblemente, ofrecer al usuario una opción para crear automáticamente una búsqueda personalizada para un sitio específico.

Un campo de entrada search como se ve en Opera en OS X

Figura 6: Un campo de entrada search como se ve en Opera en OS X.

El elemento <datalist> y el atributo list

Hasta ahora hemos estado acostumbrados a utilizar los elementos <select> y <option> para crear listas desplegables de opciones donde nuestros usuarios pueden elegir. Pero, ¿y si quisieramos crear una lista que le permita a los usuarios elegir entre una lista de opciones sugeridas, así como la posibilidad de introducir su propia opción? Esto solía requerir secuencias de comandos complicadas, pero ahora puede simplemente usar el atributo list para conectar un campo de entrada corriente a una lista de opciones, definidas dentro de un elemento <datalist>.


<input type="text" list="misdatos" … >
<datalist id="misdatos">
    <option label="Sr." value="Señor">
    <option label="Sra." value="Señora">
    <option label="Srta." value="Señorita">    
</datalist>

Creación de un campo de entrada con opciones preestablecidas usando datalist

Figure 7: Creación de un campo de entrada con sugerencias usando datalist.

<input type="tel">, <input type="email"> e <input type="url">

Como sus nombres lo indican, estos nuevos campos de entrada se refieren a números de teléfono, direcciones de correo electrónico y URLs. Los navegadores los mostrarán como campos de entrada de texto normales, pero señalar claramente qué tipo de texto estamos esperando en estos campos juega un papel importante en la validación de formularios del lado del cliente. Además, en ciertos dispositivos móviles el navegador cambiará su teclado en pantalla para entrada de texto común por sus variantes más relevantes al contexto. Una vez más, es concebible que en el futuro los navegadores aprovecharán mejor estas entradas explícitamente definidas para ofrecer funcionalidades adicionales, como el autocompletado de direcciones de correos electrónicos y números telefónicos basándose ​​en la lista de contactos o la libreta de direcciones del usuario.

Nuevos atributos

Además de nuevos campos de entrada explícitos, el HTML5 define una serie de nuevos atributos para los controles de formulario que ayudan a simplificar algunas tareas comunes y precisar los valores esperados para determinados campos de entrada.

placeholder

Un truco común de usabilidad para los formularios web es tener un contenido predeterminado en los campos de entrada de texto; por ejemplo, para dar sugerencias acerca del tipo de información que esperamos que el usuario introduzca, y que desaparecerá cuando dicho control de formulario reciba el foco del usuario. Aunque esto solía requerir algo de JavaScript (borrar el contenido del campo de formulario al recibir el foco y restablecer el texto predeterminado si el usuario retira el foco del campo sin introducir nada), ahora podemos simplemente utilizar el atributo placeholder:

<input type="text"… placeholder="John Doe">

Un campo de entrada de texto con texto predeterminado

Figura 8: Un campo de entrada de texto con texto predeterminado mediante el uso de placeholder.

autofocus

Otra característica común que anteriormente dependía de secuencias de comandos es la colocación automática del foco en un campo de formulario cuando se carga una página. Esto puede lograrse ahora con el atributo autofocus:

<input type="text" autofocus … >

Tenga en cuenta que no debe tener más de un control de formulario con el atributo autofocus en una misma página. Además, debe utilizar este tipo de funcionalidad con cautela, en situaciones donde un formulario representa la principal área de interés en una página. Una página de búsqueda es un buen ejemplo, siempre que no haya mucho contenido y texto descriptivo, tiene sentido establecer el foco automáticamente en el campo de entrada de texto del formulario de búsqueda.

min y max

Como su nombre sugiere, este par de atributos le permiten establecer un límite inferior y superior para los valores que se pueden introducir en un campo de entrada numérico; por ejemplo, campos de entrada de número, rango (control deslizante), hora o fecha (sí, incluso se puede utilizar para establecer los límites superior e inferior de las fechas, por ejemplo, en un formulario de reserva de vuelos podría limitar el selector de fechas para que sólo permita que el usuario seleccione fechas futuras). Para campos de entrada range, min y max son realmente necesarios para definir los valores que se devuelven cuando se envía el formulario. El código es bastante simple y autoexplicativo:

<input type="number" … min="1" max="10">

step

El atributo step puede utilizarse con un valor de campo de entrada numérico para establecer la precisión de los valores que se pueden ingresar. Por ejemplo, puede que desee que los usuarios introduzcan un tiempo determinado, pero sólo en incrementos de 30 minutos. En este caso, podemos utilizar el atributo step, teniendo en cuenta que para campos de entrada time el valor de este atributo se establece en segundos:

<input type="time" … step="1800">

Nuevos mecanismos de salida

Más allá de los nuevos controles de formulario con los que los usuarios pueden interactuar, HTML5 define una serie de nuevos elementos específicamente destinados a mostrar y visualizar información para el usuario.

<output>

Ya hemos mencionado el elemento <output> cuando hablamos del campo de entrada range. Este elemento sirve como una forma de mostrar el resultado de un cálculo, o más generalmente, para proporcionar una salida explícitamente identificada a una secuencia de comandos (en lugar de simplemente colocar un texto dentro de un span o div al azar). Para hacer aún más explícito a que controles de formulario en particular está vinculado el <output>, podemos, de una manera similar al elemento <label>, pasar una lista de IDs en el atributo opcional for del elemento.

<input type="range" id="ejemplorango" … >
<output onforminput="value=ejemplorango.value" for="ejemplorango"></output>

<progress> y <meter>

Estos dos nuevos elementos son muy similares. Ambos muestran un indicador/barra al usuario como resultado. Lo que los distingue es su propósito. Como su nombre sugiere, <progress> tiene el fin de representar una barra de progreso para indicar el porcentaje de finalización de una tarea determinada, mientras que <meter> es un indicador más genérico de una medida escalar o valor fraccionario.

Una barra indicadora de progreso

Figura 9: Una barra indicadora de progreso.

Validación

La validación de formularios es muy importante tanto en el lado cliente, como en el lado servidor, para ayudar a los usuarios reales a evitar y corregir los errores y para evitar que usuarios maliciosos envien datos que pudieran causar daños a nuestra aplicación. Dado que los navegadores pueden ahora tener una idea de qué tipo de valores se esperan para los diversos controles de formulario (ya sea mediante su type, o cualquier límite superior/inferior establecido en valores numéricos, fechas y horas), pueden ofrecer adicionalmente validación de formulario nativa; otra tarea tediosa, que, hasta ahora, requería que los desarrolladores crearan resmas de JavaScript o utilizaran algún script/biblioteca de validación ya existente.

Nota: para que los controles de formulario sean validados, necesitan tener un atributo name, ya que sin el no serán enviados como parte del formulario.

required

Uno de los aspectos más comunes de la validación de formularios es la implementación de campos obligatorios, no permitiendo que un formulario sea enviado hasta que ciertas piezas de información hayan sido introducidas. Esto puede hacerse ahora simplemente añadiéndole el atributo required a un elemento input, select o textarea.

<input type="text" … required>

La validación en lado cliente de Opera en acción, mostrando un error para un campo requerido que ha sido dejado vacío

Figura 10: La validación en lado cliente de Opera en acción, mostrando un error para un campo requerido que ha sido dejado vacío.

type y pattern

Como hemos visto, los desarrolladores ahora pueden especificar los tipos de entradas que esperan en sus campos de formulario. En lugar de simplemente definir campos de entrada de texto, los desarrolladores pueden crear de forma explícita campos de entrada para cosas como números, direcciones de correo electrónico y URLs. Como parte de su validación en el lado cliente, los navegadores pueden ahora comprobar que los datos introducidos por el usuario en estos campos más específicos coinciden con la estructura prevista. En esencia, los navegadores evalúan los valores de la entrada en base a un patrón integrado que define como deben ser las entradas válidas en esos tipos de entrada y le advertirá al usuario cuando su entrada no coincida con los criterios.


Mensaje de error de Opera para direcciones de correo-e inválidas en un campo de entrada email

Figura 11: Mensaje de error de Opera para direcciones de correo-e inválidas en un campo de entrada email.

Para otros campos de entrada de texto que, no obstante, deban seguir una cierta estructura (por ejemplo, formularios de inicio de sesión donde los nombres de usuario sólo puedan contener una secuencia específica de letras minúsculas y números), los desarrolladores pueden utilizar el atributo pattern para especificar su propia expresión regular personalizada.

<input type="text" … pattern="[a-z]{3}[0-9]{3}">

Soporte en los navegadores

En el escritorio, Opera actualmente tiene la implementación más completa de los nuevos tipos de entrada y la validación nativa del lado cliente, pero el soporte está en en la hoja de ruta de todos los otros navegadores más importantes también, por lo que no pasará mucho tiempo antes de que podamos aprovechar estas nuevas herramientas poderosas en nuestros proyectos. Pero ¿y qué sucede con las versiones antiguas de los navegadores?

Por diseño, los navegadores que no entienden los nuevos tipos de entrada (como date o number) simplemente recurrirán a tratarlos como entradas de texto estándar; no tan fáciles de usar como sus contrapartes avanzadas de HTML5, pero al menos permiten que un formulario sea rellenado.

Resumen

Esto concluye nuestro tutorial acerca de los elementos adicionales de formulario presentes en el HTML5.

Nota: Este material fue publicado originalmente en http://dev.opera.com, disponible como Nuevas características de formulario del HTML5 (inglés), escrito por Patrick Lauke y Christian Heilmann y publicado bajo la licencia Atribución-No comercial-Compartir Igual de Creative Commons 3.0.