Formularios HTML
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 bastantes 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 Cancerbero, 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:
soft: Indica que el texto enviado no será envuelto pero a su vez el texto representado por el navegador sí lo estará
hard: Indica que tanto el texto enviado como el representado están envueltos y desactivados por lo que deja de envolver
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 tratan 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 de 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 esto es 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 permite 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 los cuales 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, cada una de las opciones de este 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 seleccionado
Nota: Por defecto su valor es 1.
-
multiple: este atributo permite que sea posible el seleccionar más de una opción a la vez, para hacerlo el usuario debe de 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í, se trata 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 del elemento 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 y lista 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 elementos estén correctamente vinculados ambos atributos deben de 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 las versiones antiguas puede que este no sea el caso, pero para estos casos existe un truco para asegurar la implementación de la lista, el truco consiste en anidar un "select" justo debajo 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" que se encuentra anidado.
Nota: El elemento "datalist" puede ser utilizado en conjunto con cualquier otro elemento siempre y cuando este requiera una entrada de datos por parte del usuario sin embargo el efecto de la etiqueta en otros elementos no está estandarizado por lo tanto se podría comportar diferente según desde cuál navegador se ejecute.
Progres
-
Se trata de una barra de progreso la cual representa un valor numérico, el cual 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 los lean.
Meter
-
Se trata de una barra de medidor, representa un valor fijo delimitado entre valores mínimos y máximos, este valor se representa visualmente como una barra, para saber cómo se ve esta barra comparamos el valor con otros valores 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 del elemento 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 elemento medidor, junto con los atributos "low" y "high" define qué parte del rango se prefiere:
Si el valor óptimo se encuentra en la parte inferior esta se considera la parte preferida, la parte media se considera promedio y la parte alta un área mala
Si el valor se encuentra en la parte media esta se considera la parte preferida, mientras que las partes inferior y superior se consideran promedio
Si el valor óptimo se encuentra en la parte superior esta se considera la parte preferida, la parte media se considera una parte promedio y la parte baja se considera un área mala
Según el área en la que se encuentre el valor ó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 amarillo
Si se encuentra en la parte mala la barra será de color rojo
Nota: un ejemplo de uso sería la representación visual del espacio de memoria de un disco, al tener poco espacio ocupado se visualiza verde, al estar a la mitad de su capacidad amarillo y al estar casi lleno se visualiza rojo.
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 los lean.
Nota: el soporte para esta etiqueta es bueno, entre los navegadores grandes el único que no lo soporta es Internet Explorer.
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 "sección" 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 widget más básicos de un formularios, 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 proveídos 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 usuarios
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 desee 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
Envío de datos de un 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 para enviar los datos del formulario es proveer a todos los elementos (controladores) con nombres propios, estos son muy importantes tanto en el lado del cliente como en el lado del 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.
Ejemplo
