Formularios

Los formularios son herramientas web en las que los usuarios pueden ingresar datos, los cuales pueden ser enviados a una base de datos o aplicados en el lado del usuario (por ejemplo configuraciones de la página); básicamente son elementos HTML en los que el usuario puede ingresar datos los cuales pueden ser empleados o almacenados por la página. En los formularios, los datos ingresados con frecuencia son validados para corroborar que cumplen con los requerimientos o características del caso de uso; no hay que olvidar que los elementos HTML únicamente aportan la estructura a la página, por ello es que todo lo relacionado con funcionalidad (envío de datos, validaciones etc.) son realizados empleando JavaScript, a su vez al igual que el resto de la página suelen ser decorados con estilos CSS, por lo tanto en estos elementos es muy común que las tres tecnologías sean incorporadas.

Label

Este elemento define los encabezados de los elementos del formulario; la función de este es plenamente de accesibilidad, tanto para usuarios comunes como para los motores de lectura. Un elemento "label" se debe vincular con el elemento al que este hace referencia; al vincularlo correctamente, los motores de lectura pueden funcionar de una forma más entendible para sus usuarios.

Para vincularlo con el elemento controlador se utiliza el atributo "for" con un valor igual al atributo "id" del controlador al que este hace referencia; por lo tanto, el valor de "for" en el label y del "id" del controlador deben ser el mismo. Como tal, a la hora de expresarlo en código existen dos formas de estructurarlo:

1. La primera se trata de estructurar el "label" e "input" como dos elementos separados.

   

2. La segunda forma consta de anidar el "input" dentro del elemento "label".

   

Nota: sea cual sea la forma en la que se estructure en código, siempre es recomendable que se vinculen los elementos mediante el "for" y el "id", para asegurar que todos los motores de lectura lo interpreten adecuadamente.

Una ventaja de vincular correctamente los label con su respectivo widget es que al hacerse un clic sobre este automáticamente se activa el widget; esto es muy útil para el diseño y accesibilidad del formulario. El siguiente es tanto un ejemplo de uso así como del código en cuestión:

I like cherry

Incluir varios label

En la mayoría de los casos, pese a que se puede hacer, esto no es muy recomendable ya que los motores de lectura no interpretan bien esto; sin embargo, existe una forma de ejecutar esto de forma adecuada: consiste en anidar una etiqueta "span" dentro de "label" como se puede ver a continuación:

Pudiesen darse casos como este en el que sea necesario o conveniente el incorporar más de un "label" para ayudar a los motores de lectura a interpretar adecuadamente el "label"; por ejemplo, este es un código estructurado correctamente ya que se usa el atributo "aria-label" en el cual su valor siempre es leído por estos (importante recordar que el * representa que el campo es obligatorio).

Nota: Este tipo de prácticas son necesarias ya que los motores de lectura tienen formas definidas de describir los símbolos; por ejemplo, al * lo describen como estrella, por lo tanto en este caso estructuramos el valor contextual del símbolo para su adecuada interpretación.

Nota: El resultado de la interpretación de un motor de lectura puede variar dependiendo de cuál se utilice, sin embargo esta es la forma más clara de estructurar el código.

Estructura de un formulario

Como ya se ha visto en ejemplos anteriores, es muy común e incluso recomendable el no utilizar únicamente elementos especializados para estructurarlos; por ejemplo, es muy común el uso de listas ("ul", "ol", "li") para estructurarlos, así como elementos "p", títulos y subtítulos (h1, h2, h3...) e incluso se recomienda el utilizar contenedores como "div" o "section" para estructurar el formulario en secciones.

Básicamente, estructurar un formulario consiste en hallar una estructura que le permite al desarrollador crear formularios accesibles y utilizables por todo tipo de usuarios. Una de las únicas recomendaciones es estructurarlo de forma que cada sección separada en funcionalidad debe estar contenida en un contenedor propio con elementos de conjunto de campo para incluir los botones de opción.

Atributos básicos

Los elementos de entrada de texto son los widgets más básicos de un formulario; permiten que el usuario ingrese texto en ellos. Por defecto, estos elementos únicamente soportan texto sin formato (negrita, cursiva, etc.), por lo que todos los elementos que soporten texto enriquecido son personalizados con la implementación de CSS y de JavaScript.

Algunos atributos comunes en los elementos de entrada de texto son:

• Readonly: En elementos en los que se aplique este atributo, el valor de entrada no podrá ser modificado por el usuario; a su vez, el valor de este será enviado junto a los datos provistos por el usuario.
• Disabled: Este atributo directamente desactiva el widget, por lo que no se podrá modificar el valor inicial de este elemento; a su vez, el valor de este no será enviado junto a los datos ingresados por el usuario.
• Placeholder: El valor de este atributo es el valor de entrada del elemento en cuestión.
• Size: Define el tamaño físico del cuadro de texto.
• Maxlength: Define la cantidad máxima de caracteres que recibirá el elemento de texto.
• Spellcheck: Activa la función de corrección de ortografía del navegador (si es que este lo soporta).

Algunos atributos comunes en los elementos de un formulario son:

• Autofocus: Este atributo define que el elemento en el que se aplique tendrá el foco de entrada cuando se carga la página. Solo un elemento asociado a un formulario puede usar este atributo, su valor por defecto es "false".
• Disabled: Desactiva un elemento para que el usuario no pueda interactuar con este; su valor por defecto es "false".
• Form: Este atributo vincula un elemento externo con un formulario del mismo documento; para hacerlo correctamente el valor del atributo debe ser igual al "id" del formulario al que se desea vincular el elemento. Esta relación funciona incluso si el elemento se encuentra anidado dentro de un formulario diferente.
• Name: El nombre del elemento se envía junto con los datos del formulario.
• Value: Define el valor inicial del elemento.

Input

La etiqueta "input" se trata del elemento de entrada de datos; en este elemento el atributo más importante con diferencia es "type". Este elemento cuenta con multitud de valores; la característica más resaltante del elemento "input" es que puede cambiar su forma según el valor del atributo "type". Este elemento se utiliza para crear la mayoría de los widgets de un formulario.

Formas del elemento "Input"

• Text: Traducido como campos de texto de una sola línea; para definir esta forma el valor del atributo "type" tiene que ser "text". Otra forma de lograr que el input tome esta forma es ignorar el atributo "type" por completo, ya que este es el valor predefinido del input.

  Nota: Este valor también se utilizará en caso de que el navegador desconozca el valor del atributo "type".

  

  Nota: La limitación de un campo de texto de una sola línea es que cualquier salto de línea que se ingrese será eliminado al momento de enviar los datos.

• Password: En esta forma de "input" se visualiza un cuadro de texto con la particularidad de que el texto ingresado en este no es visible; permanece oculto representado por puntos o asteriscos. En sí, esta es la única característica distintiva de esta forma de "input", la cual es únicamente una función de la interfaz de usuario ya que en sí no incluye ningún tipo de característica de seguridad adicional en los datos ni en el envío de estos.

  Para la seguridad, lo más recomendable es subir la página (al menos la de login) en un servicio HTTPS, ya que este tipo de conexión web cifra los datos antes de ser enviados. Si de otra manera la página se encontrara en un formato con conexión HTTP, los datos serían enviados sin encriptar, lo que los expondría a poder ser interceptados por terceros.

  Para definir la utilización de este tipo de "input" el valor del atributo "type" tiene que ser igual a "password".

  

  Nota: Los navegadores reconocen la implementación de un campo de contraseña y tienen notificaciones que alertarán a los usuarios si están por enviar un formulario que no cumple con los requerimientos de seguridad adecuados o no incluyen conexiones HTTPS.

• Hidden: Traducido como "contenido oculto", un input de tipo "hidden" consiste en un elemento oculto para los usuarios; por lo tanto, nunca se mostrará en pantalla ni mucho menos el usuario podrá enfocarse en este. Este elemento no solo puede almacenar datos sino que estos son enviados junto a la información del formulario.

  Ya que el usuario nunca interactuará con este elemento, su valor puede ser definido a través de JavaScript. Es importante tener en cuenta que, al tratarse de un elemento oculto, este no debe estar vinculado a ningún "label" y, por lo mismo, ya que no se muestra en pantalla es importante definir los atributos "name" y "value".

  

• Checkbox: Este tipo de "input" se define con el valor "checkbox" en el atributo "type" y se trata de un elemento verificable, lo que significa que su estado puede cambiar dependiendo de si se encuentra verificado o no. Otra característica es que al enviarse el formulario únicamente se envían los campos que se encuentren verificados; si el elemento no lo está, no será enviado absolutamente ningún dato.

  

  En este tipo de elementos es importante mantener una buena estructura de código para asegurar la accesibilidad de la página; los elementos que estén relacionados deben encontrarse en un mismo conjunto de campos con una leyenda que brinde una descripción general de la lista. Por lo general, cada conjunto de elementos "label/input" debe encontrarse en su propio elemento de lista (li).

  En este tipo de "input" generalmente los elementos "label" se incorporan directamente antes o después del "input" y, por último, las instrucciones para el conjunto de checkbox generalmente es el contenido de la leyenda.

  Nota: se puede crear un checkbox que esté verificado por defecto utilizando el atributo "checked".

  Nota: si el elemento se encuentra verificado pero no tiene un valor definido, este se enviará como "on".

  Nota: Es importante recordar que cualquier "label" o elemento relacionado con el "checkbox" debe usar el mismo nombre en el atributo "name".

  A continuación se muestra un ejemplo de código de este elemento:

  

  Nota: por último muchos desarrolladores consideran al "checkbox" como un botón de alternancia (ya que su visualización cambia al estar o no verificado), por lo que aplican estilos CSS para presentarlo como tal. Ve un ejemplo Aquí

• Radio: El botón de radio es definido con un valor "radio" en el atributo "type". Esta etiqueta puede parecer similar al "checkbox", sin embargo su funcionamiento es diferente ya que está pensado para que el usuario únicamente seleccione uno de varios elementos. Conceptualmente funciona como una lista de "checkbox" en los que solo un elemento puede estar marcado a la vez; para lograr este funcionamiento hay que relacionar los diversos elementos "radio" con un mismo valor en el atributo "name". Al hacer esto se considera que estos elementos conforman un grupo.

  

  Al enviarse el formulario únicamente se envía el elemento que esté verificado; si se da el caso de que ninguno de los elementos está verificado, no se enviará ningún dato desde el grupo de elementos.

  Nota: A diferencia del "checkbox", el elemento "radio", una vez verificado algún elemento, este no puede ser desmarcado por el usuario a menos que restablezca el formulario.

• Botones: Los valores del atributo "type" en el elemento "input" son tan versátiles que incluso puede llegar a mostrarse y actuar como un botón; en particular, el "input" tiene tres valores con los que actúa como botón, los cuales son los siguientes:

  • Submit: Esta modalidad tiene específicamente la función de enviar los datos de un formulario; se define con el valor "submit" en el atributo "type".

    Nota: En los elementos "button", omitir o utilizar un valor desconocido en el atributo "type" genera un botón de tipo submit, ya que es la función por defecto.

  • Reset: Restablece todos los widgets del formulario a su valor predeterminado; se define con un valor "reset" en el "type" del elemento.

  • Button: No tiene una función definida; se trata de un botón personalizable con JavaScript, se define con el valor "button" en el atributo "type".

  No confundir el "input" con el elemento "button", el cual puede realizar las mismas funciones ya que este elemento se especializa en crear botones; no obstante, se diferencian en que el elemento "button" puede albergar texto y elementos de formato de texto en su interior. Por otro lado, en el input el texto del botón se define con el atributo "value", por lo que no puede contener estos elementos; en cambio, la ventaja del "input" es que es más fácil de diseñar. A continuación se muestran ejemplos de cada caso con ambos elementos:

  

  Nota: La visualización de ambos elementos es básicamente la misma.

• Image: Este tipo de "input" mezcla las características de los elementos "img" y "button", por lo tanto se visualiza igual que un "img" con la característica de que se comporta como un botón submit al hacer clic en este; se define con un valor "image" en el atributo "type". Por sus características, soporta todos los atributos de un elemento "img", así como los compatibles con los botones de un formulario.

  

  Este elemento no envía los datos de un formulario; en su lugar, envía las coordenadas del lugar de la imagen en el que se realizó el clic. Para esto, el valor de las coordenadas se define en base al eje X y el eje Y dentro de la imagen, tomando como el punto inicial (0X, 0Y) la esquina superior izquierda de esta.

  • La clave de valor del eje X es el valor del atributo "name" seguido de la cadena ".x".
  • La clave de valor del eje Y es el valor del atributo "name" seguido de la cadena ".y".

  Por ejemplo, si se realizó un clic en las coordenadas x=123, y=456 de la imagen, entonces los datos se enviarían de la siguiente forma:

  

• File: Este tipo de "input" tiene la función de recibir un archivo para enviarlo junto con los datos de un formulario; para definirlo como tal, es necesario utilizar el valor "file" en el atributo "type". Otros atributos muy utilizados en este elemento son:

  • Multiple: Este atributo le permite al usuario seleccionar más de un archivo a la vez.
  • Accept: Este atributo se utiliza para definir los formatos de archivo que serán aceptados por el elemento.
  

  Nota: En algunos teléfonos este atributo puede aceptar fotos, videos y audio tomados directamente con el dispositivo; en este caso, se añade información de la captura al atributo de aceptación de la siguiente manera:

  

• Email: Se trata de un tipo de "input" más moderno ya que fue introducido en HTML5; consiste en un campo de texto con una validación con respecto al tipo de dato que recibe. Está configurado para aceptar únicamente direcciones de correos electrónicos; cualquier texto ingresado que no cumpla con el formato de uno será automáticamente rechazado. Se define como tal aplicando un valor "email" en el atributo "type".

  

  Nota: Utilizando el atributo multiple puede ser posible para el usuario ingresar varias direcciones de correo a la vez (separadas entre sí por comas).

  En este tipo de elementos, la validación de los datos es ejecutada automáticamente en el lado del cliente por el navegador antes de enviar los datos, lo cual ahorra tiempo y consultas al servidor; no obstante, las validaciones ejecutadas en el lado del cliente no son seguras, ya que son muy fáciles de desactivar. Por lo tanto, es indispensable implementar validaciones exhaustivas de los datos en el servidor para evitar vulnerabilidades que terceros malintencionados puedan aprovechar.

  Nota: La validación del correo por parte del navegador no comprueba que el correo exista en realidad.

• Search: Este tipo de "input" también es reciente y al aplicarse muestra un cuadro de texto especializado en realizar búsquedas en la página; para utilizar este tipo de elemento es necesario aplicar el valor "search" en el atributo "type". Un cuadro de búsqueda se diferencia de un cuadro de texto normal principalmente en la apariencia de este, ya que suele mostrar características particulares como:

  • Bordes redondeados.
  • Una "X" en un costado la cual eliminará el texto ingresado automáticamente.
  • Los teclados dinámicos mostrarán "buscar" o mostrarán un icono de lupa.
  
  

  Otra característica positiva de estos es que los datos del atributo "search" se guardarán automáticamente para facilitar búsquedas dentro de la página.

• Tel: Se trata de un tipo de "input" especializado en recibir números de teléfono; su efecto aplica para aquellos dispositivos que utilicen un teclado dinámico, ya que al seleccionar el elemento automáticamente se muestra un tablero de números.

  No cuenta con ninguna validación respecto a los datos ingresados en este ya que existen muchos formatos de números de teléfonos en el mundo; por lo tanto, también puede recibir letras. Cuenta con un atributo llamado "pattern" el cual permite definir los formatos de número de teléfono que se desea aceptar. Para aplicar este tipo de "input", se utiliza el valor "tel" en el atributo "type".

  

• Url: Este tipo de "input" se define con un valor "url" en el atributo "type". Este elemento cuenta con varias validaciones ejecutadas en el lado del cliente, las cuales rechazarán cualquier dirección que no cuente con un protocolo HTTP o si la dirección tiene un formato incorrecto.

  Al igual que con el "input" "email", estas validaciones son inseguras ya que pueden ser desactivadas fácilmente, por lo que lo mejor siempre es implementar validaciones en el servidor que comprueben los datos recibidos.

  

  Nota: Estas validaciones del lado del cliente no verifican que la dirección ingresada realmente exista.

• Number: Este "input" muestra un campo de texto con la validación de exclusivamente aceptar números; también suelen mostrarse unas flechas ascendentes y descendentes en el costado derecho del recuadro. Estas flechas son otra alternativa para ingresar o modificar el texto sin el uso del teclado, ya que permiten aumentar o disminuir los números.

  En este elemento se pueden usar los atributos "min" y "max" para definir los valores mínimos y máximos del elemento respectivamente; también se puede usar el atributo "step" para definir en qué cantidad se realizará el aumento y disminución de las flechas. De forma determinada, el valor de este atributo es "1"; para incluir números flotantes se puede ingresar un valor "any" en este.

  Por ejemplo:

  1. Control numérico restringido entre el 1 y el 10, con un incremento y reducción en sus botones de 2.

     

  2. Control numérico restringido entre el 0 y el 1 con un incremento o reducción establecido de 0.01.

     

  Nota: este elemento es útil en aquellos casos en los que se ingresen números dentro de un rango establecido; si el número se encuentra dentro de un rango ilimitado o demasiado grande es mejor optar por el elemento "tel".

• Range: Se trata de otra forma de seleccionar un número, la cual consiste en la implementación de un menú desplazable, el cual abarca un rango de valores definibles. Se trata de un elemento menos preciso que los campos de texto por lo que se utiliza en aquellos casos en los que el valor exacto no es muy importante; se define este elemento aplicando un valor "range" al atributo "type".

  Al utilizar este tipo de elemento es muy importante definir los atributos "min", "max" y "step", ya que cada uno define el valor mínimo, el valor máximo y el valor incremental del elemento respectivamente.

  

  En este ejemplo se utiliza el atributo "value" para definir el valor inicial del elemento.

  El elemento "range" no provee de un elemento visual que ayude a conocer el valor actual del elemento; por esto es que suele acompañarse por el elemento output, el cual permite mostrar un valor de entrada o salida de un elemento dentro de cualquier otro. Este elemento se caracteriza por funcionar igual que un "label", es decir, con el atributo "for" es posible relacionarlo con los elementos que generan la salida.

  Nota: para que el elemento output funcione es necesario comandarlo con JS; he aquí un ejemplo:

  


• Date y Time: En esta ocasión no se trata de un tipo de "input" en particular, sino que en su lugar se refiere a un conjunto de "inputs" de los cuales cada uno cumple con el rol de manejar los datos referentes a la hora y fecha provista por el usuario. En este caso existen varios tipos de "input" para un mismo tipo de función ya que en realidad existen diversas formas de expresar la hora y fecha; por lo tanto, cada tipo cuenta con características propias que lo hacen adaptarse a un formato hora/fecha en específico.

  Los elementos Hora/fecha son:

  • Datetime-local: Crea un widget para mostrar y elegir una fecha con hora sin información de zona horaria específica.

    

  • Month: Crea un widget para mostrar y elegir un mes con un año.

    

  • Time: Crea un widget para mostrar y elegir un valor de tiempo. Si bien la hora puede mostrarse en formato de 12 horas, el valor devuelto está en formato de 24 horas.

    

  • Week: Crea un widget para mostrar y elegir un número de semana y su año.

    

    Nota: En este formato la semana comienza el lunes y termina el domingo.

  Nota: Un aspecto que vuelve complejo el uso de este tipo de elementos es el tema de la compatibilidad, ya que se tratan de elementos HTML5.

  Restricción de valores fecha/hora: Todos los controles de fecha y hora se pueden restringir mediante los atributos "min" y "max", y se pueden restringir aún más mediante el atributo "step" (cuyo valor varía según el tipo de "input"), tal y como se puede apreciar a continuación:

  

  Nota: Este elemento también puede adoptar el atributo "step", el cual define en qué cantidad incrementará o se reducirá el valor cuando se usen controles de entrada (flechas arriba y abajo).

• Color: Esta es otra forma de "input"; puede crear este elemento utilizando el valor "color" en el atributo "type". Los colores son siempre un poco difíciles de manejar. Hay muchas formas de expresarlos: valores RGB (decimales o hexadecimales), valores HSL, palabras clave, etc.

  Su funcionamiento consiste en hacer clic en un control de color; generalmente se muestra la funcionalidad de selección de color predeterminada del sistema operativo.

  

Textarea

El elemento "textarea" se caracteriza por ser un cuadro de texto de múltiples líneas con una extensión virtualmente infinita (sus dimensiones nunca cambian pero se puede navegar por el texto). Es importante resaltar que, pese a que su función es similar a un elemento "input", posee dos diferencias bastante significativas con este último: la primera consiste en que este elemento conserva cualquier salto de línea que se ingrese en el texto; la segunda diferencia radica en la estructura del código de la etiqueta "textarea" en sí, ya que no se trata de un elemento cerrado como "input", sino que requiere de una etiqueta de cierre adecuada. Esta diferencia entre ambas etiquetas cambia la forma en que se incorpora un texto predeterminado en cada una; la forma en que esto se define en estas etiquetas es la siguiente:

Nota: Por las características del elemento "textarea", pese a que se puede anidar contenido HTML, CSS y JS en su interior, todo se representa como si fuese contenido de texto sin formato.

Atributos

Textarea cuenta con tres atributos exclusivos para poder definir su representación del texto:

• cols: Define el ancho del control de texto en base a las columnas mostradas; este puede ser considerado un ancho inicial ya que las dimensiones del elemento pueden ser cambiadas utilizando CSS. En caso de que este atributo no sea especificado, su valor por defecto es 30.

• rows: Define el alto del control de texto en base a las filas mostradas; en este caso también se puede considerar que se trata de un alto inicial ya que las dimensiones nuevamente pueden ser cambiadas aplicando estilos CSS. En caso de que este atributo no sea definido, su valor por defecto es de 10.

• wrap: Define la envoltura del texto del elemento; cuenta con dos valores posibles los cuales son:

  1. soft: Indica que el texto enviado no será envuelto, pero a su vez el texto representado por el navegador sí lo estará.
  2. hard: Indica que tanto el texto enviado como el representado están envueltos. Requiere que el atributo "cols" esté presente.

Modificar su tamaño utilizando CSS

Para cambiar las dimensiones del elemento "textarea" se utiliza la propiedad "resize", la cual puede adoptar cualquiera de los siguientes valores:

• both: Se trata del valor predeterminado y permite cambiar el tamaño horizontal y verticalmente.
• horizontal: Permite cambiar el tamaño del elemento horizontalmente.
• vertical: Permite cambiar el valor del elemento verticalmente.
• none: No permite cambiar el tamaño del elemento.
• block y inline: Se trata de valores experimentales que permiten cambiar el tamaño en bloque o en línea en función de la dirección del texto.

Button

Por último, pero no menos importante, se encuentra el elemento "button"; se trata de un botón el cual puede ser configurado para realizar varias acciones. Un ejemplo de su estructura es el siguiente:

Al igual que el elemento "input", "button" acepta el atributo "type", el cual puede tomar cualquiera de tres valores:

• Submit: Al hacer clic en el botón cuando tenga indicado un valor "submit", los datos del formulario serán enviados a la dirección (URL) definida por el atributo "action" del elemento "form".
• Reset: Al dar clic en el botón mientras posea este "type", todos los elementos del formulario (widgets) se restablecerán a su valor por defecto. Desde el punto de vista de UX (experiencia de usuario), esto se considera una mala práctica; lo mejor es solo incluirlo en los casos en los que de verdad sea necesaria su implementación.
• Button: El valor button por sí mismo literalmente no hace nada, ya que la función de esta opción es permitir crear una funcionalidad personalizada con JavaScript.

Nota: También se puede crear un botón usando el elemento "input" con el atributo "type", el cual posee ciertos valores que mostrarán al "input" como un botón; sin embargo, la diferencia radica en que la etiqueta "button" permite contenido HTML completo, lo que significa un contenido de botón más completo y creativo.

Select

Este elemento consiste en un cuadro de selección con uno o más elementos de opción como elementos secundarios, de los cuales cada uno especifica una de las opciones del "select". Este elemento secundario se trata de un elemento "option"; en otras palabras, el "select" es un cuadro de selección donde cada una de las opciones es definida por una etiqueta "option", las cuales se encuentran albergadas en el interior de la etiqueta select.

Si es necesario mostrar alguna de las opciones como dato seleccionado por defecto, se puede definir utilizando el atributo "selected" en el "option" que lo contenga.

También es posible anidar los elementos "option" dentro de una etiqueta "optgroup" con el fin de agrupar las opciones que posean algún tipo de relación entre sí. Por lo tanto, si se incorpora un elemento "optgroup" dentro del "select", este mostrará a aquellos elementos "option" que se encuentren en su interior como un grupo de opciones, como se puede apreciar a continuación:

Nota: Para mostrar un encabezado en los grupos de opciones se utiliza el atributo "label" en el elemento "optgroup".

Nota: Los encabezados de los grupos de opciones únicamente son eso y no son seleccionables como opción.

Los elementos "select" cuentan con otros atributos particulares los cuales son:

• value: Este, en caso de que se utilice, define el verdadero valor del dato que se enviará con el formulario; por lo tanto, asigna el valor implícito de la opción. Se utiliza en aquellas situaciones en las que sea necesario que el usuario visualice un valor pero sea más eficiente enviar otro, como se puede ver en el ejemplo:

  

  Nota: en caso de que no se aplique este atributo, el contenido del elemento "option" se enviará como valor de esta opción.

• size: permite definir el número de opciones visibles en el elemento "select" cuando este no se encuentre desplegado.

  Nota: Por defecto su valor es 1.

• multiple: este atributo permite que sea posible seleccionar más de una opción a la vez; para hacerlo, el usuario debe mantener presionada la tecla Ctrl.

  Nota: Todos los navegadores que son compatibles con la etiqueta "select" también lo son con el atributo "multiple".

Datalist

El elemento "datalist" o lista de datos se trata de un elemento el cual brinda al usuario diversas opciones que pueden ser ingresadas en un cuadro de texto. No se trata de un controlador en sí, sino de un elemento complementario para cuadros de texto. A diferencia del elemento "select", el "datalist" tiene la función de autocompletar el texto del usuario. Para albergar las opciones se utiliza el elemento "option" al igual que en los "select"; su estructura es la siguiente:

Como se puede ver en el ejemplo, el controlador utilizado es un "input" de tipo text, el cual se vincula con el elemento "datalist" para que este realice su función de autocompletado en el cuadro de texto. La forma de vincular ambos elementos es a través del uso del "id" del "datalist" y del atributo "list" del elemento "input"; para que ambos estén correctamente vinculados, ambos valores deben coincidir.

A continuación se muestra un ejemplo de implementación de este elemento:

Nota: Este elemento está soportado por la gran mayoría de los navegadores. Sin embargo, en versiones antiguas puede que este no sea el caso; para estos casos existe un truco para asegurar la implementación de la lista, que consiste en anidar un "select" dentro del "datalist". En los navegadores compatibles, todo elemento dentro de un "datalist" que no sea un "option" es ignorado; sin embargo, cuando el navegador no soporta la etiqueta, se visualizará el "select" anidado.

Nota: El elemento "datalist" puede ser utilizado en conjunto con otros elementos siempre y cuando requieran una entrada de datos, sin embargo, el efecto de la etiqueta en otros elementos no está estandarizado, por lo tanto se podría comportar diferente según el navegador.

Progress

Se trata de una barra de progreso la cual representa un valor numérico que cambia con el tiempo hasta alcanzar un valor máximo, el cual se define con el uso del atributo "max". Este elemento se utiliza en todas aquellas situaciones en las que se requiera representar el progreso de una tarea, por ejemplo, el porcentaje de descarga de un archivo.

Nota: el contenido dentro de este elemento realmente solo es una alternativa para aquellos navegadores que no sean compatibles con esta etiqueta, así como para que los motores de lectura puedan interpretarlo.

Meter

Se trata de una barra medidora que representa un valor fijo delimitado entre valores mínimos y máximos. Este valor se representa visualmente como una barra; para entender su estado, comparamos el valor con otros rangos establecidos:

• Los atributos "low" y "high" dividen el rango en tres partes:

  • La parte inferior se encuentra entre los valores min y low.
  • La parte media se encuentra entre los valores low y high.
  • La parte superior se encuentra entre los valores high y max.

• El atributo "optimum" define el valor óptimo para el medidor. Junto con "low" y "high", define qué parte del rango se prefiere:

  • Si el valor óptimo está en la parte inferior, esta se considera la preferida, la media promedio y la alta una zona "mala".
  • Si el valor está en la parte media, esta es la preferida, mientras que las partes inferior y superior se consideran promedio.
  • Si el valor óptimo está en la parte superior, esta es la preferida, la media promedio y la baja una zona "mala".

Según el área en la que se encuentre el valor actual respecto al óptimo, el color de la barra cambiará:

• Si se encuentra en la parte preferida, la barra será de color verde.
• Si se encuentra en la parte promedio, la barra será de color amarilla.
• Si se encuentra en la parte "mala", la barra será de color roja.

Nota: un ejemplo de uso sería la representación del espacio de memoria de un disco: al tener poco espacio ocupado se visualiza verde, a la mitad amarillo y casi lleno rojo.

Nota: el soporte para esta etiqueta es bueno; entre los navegadores grandes, el único que no lo soporta es Internet Explorer.

Envío de datos del formulario

Como ya se ha dicho anteriormente, el envío de los datos se realiza según el valor de los atributos "action" y "method". Sin embargo, el primer paso es proveer a todos los elementos (controladores) nombres propios a través del atributo "name"; estos son muy importantes tanto en el lado del cliente como en el servidor, ya que le indican al navegador qué nombre darle a cada dato. Por parte del servidor, los datos se manejan en relaciones de nombre-valor.

A continuación se muestra un ejemplo de código: