032.4 Lección 1

Antes de saltar al código de marcado específico de los formularios, comencemos con un documento HTML simple en blanco, sin ningún contenido de cuerpo:

Guarde el ejemplo de código como un archivo de texto sin formato con una extensión .html (por ejemplo form.html) y use su navegador favorito para abrirlo. Después de modificar el código, presione el botón de recarga en el navegador para mostrar las modificaciones.

La estructura básica del formulario viene dada por la propia etiqueta <form> y sus elementos internos:

Las comillas dobles no son necesarias para atributos de una sola palabra como type, por lo que el resultado no varía al usuar type=text o type="text". El desarrollador puede elegir qué convención utilizar.

Guarde el nuevo contenido y vuelva a cargar la página en el navegador. Debería ver el resultado que se muestra en Figure 1.

La etiqueta <form> por sí sola no produce ningún resultado notable en la página. Los elementos dentro de las etiquetas <form>…​</form> definirán los campos y otras ayudas visuales que se muestran al visitante.

El código de ejemplo contiene etiquetas HTML generales (<h2> y <p>) y la etiqueta <input>, que es una etiqueta específica de formulario. Mientras que las etiquetas generales pueden aparecer en cualquier parte del documento, las etiquetas específicas del formulario deben usarse solo dentro del elemento <form>; es decir, entre las etiquetas de apertura <form> y de cierre </form>.

Como se muestra en el ejemplo, la etiqueta de párrafo <p> se puede utilizar para describir el campo al visitante. Sin embargo, no hay una forma obvia de que el navegador pueda relacionar la descripción en la etiqueta <p> con el elemento de entrada correspondiente. La etiqueta <label> es más apropiada en estos casos (de ahora en adelante, considere que todos los ejemplos de código están dentro del cuerpo del documento HTML):

El atributo for en la etiqueta <label> contiene el id del elemento de entrada correspondiente. Hace que la página sea más accesible, ya que los lectores de pantalla podrán decir el contenido del elemento de etiqueta cuando el de entrada esté enfocado. Además, los visitantes pueden hacer clic en la etiqueta para colocar el foco en su campo de entrada correspondiente.

El atributo id funciona para elementos de formulario como lo hace para cualquier otro elemento en el documento. Proporciona un identificador para el elemento que es único en todo el documento. El atributo name tiene un propósito similar, pero se usa para identificar el elemento de entrada en el contexto del formulario. El navegador usa el atributo name para identificar el campo de entrada cuando envía los datos del formulario al servidor, por lo que es importante asignar valores significativos y únicos al atributo name dentro del formulario.

type es el atributo principal del elemento de entrada, porque controla el tipo de datos que acepta el elemento y su presentación visual para el visitante. Si no se proporciona el atributo type, de forma predeterminada, la entrada muestra un cuadro de texto. Los siguientes tipos de entrada son compatibles con los navegadores modernos:

La apariencia de los tipos de entrada password, search, tel, url, e email no difieren del tipo estándar de text. Su propósito es ofrecer sugerencias al navegador sobre el contenido previsto para ese campo de entrada, por lo que el navegador o el script que se ejecuta en el lado del cliente puede realizar acciones personalizadas para un tipo de entrada específico. La única diferencia entre el tipo de entrada de texto y el de contraseña, por ejemplo, es que el contenido del campo de contraseña no se muestra cuando el visitante los escribe. En dispositivos de pantalla táctil, donde el texto se escribe con un teclado, el navegador solo puede mostrar el teclado numérico cuando una entrada de tipo tel gana el foco. Otra acción posible es sugerir una lista de direcciones de correo electrónico conocidas cuando se trata de una entrada de tipo email.

El tipo number también aparece como una entrada de texto simple, pero con flechas de incremento/decremento a un lado. Su uso hará que el teclado numérico aparezca en los dispositivos con pantalla táctil cuando tenga el foco.

Los otros elementos de entrada tienen su propia apariencia y comportamiento. El tipo date, por ejemplo, se representa de acuerdo con la configuración del formato de fecha local y se muestra un calendario cuando el campo gana el foco:

Figure 2 muestra cómo la versión de escritorio de Firefox representa actualmente este campo.

Esta es una característica estándar en todos los navegadores modernos y no requiere opciones o programación adicionales.

Independientemente del tipo de entrada, el contenido de un campo de entrada se denomina value. Todos los valores de campo están vacíos de forma predeterminada, pero el atributo value se puede utilizar para establecer un valor predeterminado para el campo. El valor del tipo de fecha debe utilizar el formato YYYY-MM-DD. El valor predeterminado en el siguiente campo de fecha es el 6 de agosto de 2020:

Los tipos de entrada específicos ayudan al visitante a completar los campos, pero no le impiden eludir las restricciones e ingresar valores arbitrarios. Por eso es importante que los valores de los campos se validen cuando llegen al servidor.

Los elementos de formulario cuyos valores debe escribir el visitante pueden tener atributos especiales que ayuden a completarlos. El atributo placeholder inserta un valor de ejemplo en el elemento de entrada:

El texto de ejemplo aparece dentro del elemento de entrada, como se muestra en Figure 3.

Una vez que el visitante comienza a escribir en el campo, el texto de ejemplo desaparece y no se envía como valor de campo si el visitante deja el campo vacío.

El atributo required requiere que el visitante inserte un valor para el campo correspondiente antes de enviar el formulario:

required es un atributo booleano, por lo que puede colocarse solo (sin el signo igual). Es importante marcar los campos que son obligatorios, de lo contrario, el visitante no podrá saber qué campos faltan y evitar el envío del formulario.

El atributo autocomplete indica si el navegador puede completar automáticamente el valor del elemento de entrada. Si se establece en autocomplete="off", entonces el navegador no sugiere valores pasados para completar la entrada. Los elementos de entrada para información confidencial, como números de tarjetas de crédito, deben tener el atributo autocomplete establecido en off.

El elemento textarea permite al visitante ingresar más de una línea de texto, a diferencia del campo de texto que solo permite una. El área de texto es un elemento separado, pero no se basa en el elemento de entrada:

La apariencia típica de un textarea es Figure 4.

A diferencia de otros elementos de entrada textarea tiene una etiqueta de cierre (</textarea>), por lo que su contenido (es decir, su valor) va entre ellos. Los atributos rows y cols no limitan la cantidad de texto; se utilizan solo para definir el diseño. El área de texto también tiene un control en la esquina inferior derecha, lo que permite al visitante cambiar su tamaño.

Se pueden usar varios tipos de controles de formulario para presentar una lista de opciones al visitante: el elemento <select> y los tipos de entrada radio y checkbox.

El elemento <select> es un control desplegable con una lista de entradas predefinidas:

La etiqueta <option> representa una sola entrada en el control <select> correspondiente. La lista completa aparece cuando el visitante toca o hace clic en el control, como se muestra en Figure 5.

La primera entrada de la lista está seleccionada de forma predeterminada. Para cambiar este comportamiento, puede agregar el atributo selected a otra entrada para que se seleccione cuando se cargue la página.

El tipo de entrada radio es similar al control <select>, pero en lugar de una lista desplegable, muestra todas las entradas para que el visitante pueda marcar una de ellas. Los resultados del siguiente código se muestran en Figure 6.

Tenga en cuenta que todos los tipos de entrada radio del mismo grupo tienen el mismo atributo name. Cada uno de ellos es exclusivo, por lo que el atributo value correspondiente para la entrada elegida será el asociado con el atributo name compartido. checked funciona como el atributo selected del control <select>. Marca la entrada correspondiente cuando la página se carga por primera vez. La etiqueta <label> es especialmente útil para las entradas de radio, ya que permite al visitante comprobar una entrada haciendo clic o tocando el texto correspondiente además del control en sí.

Mientras que los controles de radio están pensados para seleccionar una única entrada de una lista, el tipo de entrada checkbox permite al visitante seleccionar varias:

Las casillas de verificación también pueden usar el atributo checked para hacer que las entradas se seleccionen de forma predeterminada. En lugar de los controles redondos de la entrada de radio, las casillas de verificación se representan como controles cuadrados, como se muestra en Figure 7.

Si se selecciona más de una entrada, el navegador las enviará con el mismo nombre, lo que requiere que el desarrollador de backend escriba un código específico para leer correctamente los datos del formulario que contienen casillas de verificación.

Para mejorar la usabilidad, los campos de entrada se pueden agrupar dentro de una etiqueta <fieldset>:

La etiqueta <legend> contiene el texto que se coloca en la parte superior del marco que la etiqueta <fieldset> dibuja alrededor de los controles (Figure 8).

La etiqueta <fieldset> no cambia la forma en que se envían los valores de campo al servidor, pero permite al desarrollador de la interfaz manipular los controles anidados más fácilmente. Por ejemplo, establecer disabled en un atributo <fieldset> hará que todos sus elementos internos no estén disponibles para el visitante.

Hay situaciones en las que el desarrollador quiere incluir información en el formulario que el visitante no puede manipular, es decir, enviar un valor elegido por el desarrollador sin presentar un campo de formulario donde el visitante puede escribir o cambiar el valor. El desarrollador puede querer, por ejemplo, incluir una ficha de identificación para ese formulario en particular que no necesita ser visto por el visitante. Un elemento de formulario oculto se codifica como en el siguiente ejemplo:

El valor de un campo de entrada oculto generalmente se agrega al documento en el lado del servidor, cuando se procesa el documento. Las entradas ocultas se tratan como campos ordinarios cuando el navegador las envía al servidor, que también las lee como campos de entrada ordinarios.

Además de los datos textuales, ya sea ingresados o seleccionados de una lista, los formularios HTML también pueden enviar archivos arbitrarios al servidor. El tipo de entrada file permite al visitante elegir un archivo del sistema de archivos local y enviarlo directamente desde la página web:

En lugar de un campo de formulario para escribir o seleccionar un valor, el tipo de entrada file muestra un botón browse que abrirá un cuadro de diálogo de archivo. Cualquier tipo de archivo es aceptado por el tipo de entrada file, pero el desarrollador de backend probablemente restringirá los tipos de archivos permitidos y su tamaño máximo. La verificación del tipo de archivo también se puede realizar en la interfaz agregando el atributo accept. Para aceptar solo imágenes JPEG y PNG, por ejemplo, el atributo accept debe ser accept="image/jpeg, image/png".

De forma predeterminada, el formulario se envía cuando el visitante presiona la tecla Intro en cualquier campo de entrada. Para hacer las cosas más intuitivas, se debe agregar un botón de envío con el tipo de entrada submit:

El texto del atributo value se muestra en el botón, como en Figure 9.

Otro botón útil para incluir en formularios complejos es el botón reset, que borra el formulario y lo devuelve a su estado original:

Al igual que el botón de envío, el texto del atributo value se utiliza para etiquetar el botón. Alternativamente, la etiqueta <button> se puede usar para agregar botones a formularios o en cualquier otro lugar de la página. A diferencia de los botones hechos con la etiqueta <input>, el elemento del botón tiene una etiqueta de cierre y el texto entre ellas es su contenido interno:

Cuando está dentro de un formulario, la acción predeterminada para el elemento button es enviar el formulario. Al igual que los botones de entrada, el atributo de tipo del botón se puede cambiar a reset.

El último paso para escribir un formulario HTML es definir cómo y adónde se deben enviar los datos. Estos aspectos dependen de los detalles tanto del cliente como del servidor.

En el lado del servidor, el enfoque más común es tener un archivo de secuencia de comandos que analizará, validará y procesará los datos del formulario de acuerdo con el propósito de la aplicación. Por ejemplo, el desarrollador de backend podría escribir un script llamado receive_form.php para recibir los datos enviados desde el formulario. En el lado del cliente, el script se indica en el atributo action de la etiqueta del formulario:

El atributo action sigue las mismas convenciones que todas las direcciones HTTP. Si el script está en el mismo nivel jerárquico de la página que contiene el formulario, se puede escribir sin su ruta. De lo contrario, se debe proporcionar la ruta absoluta o relativa. El script también debe generar la respuesta para que sirva como página de destino, cargada por el navegador después de que el visitante envía el formulario.

HTTP proporciona distintos métodos para enviar datos de formularios a través de una conexión con el servidor. Los métodos más comunes son get y post, que deben indicarse en el atributo method de la etiqueta form:

O:

En el método get, los datos del formulario se codifican directamente en la URL de la solicitud. Cuando el visitante envía el formulario, el navegador cargará la URL definida en el atributo action con los campos del formulario adjuntos.

Se prefiere el método get para pequeñas cantidades de datos, como formularios de contacto simples. Sin embargo, la URL no puede exceder algunos miles de caracteres, por lo que el método post debe usarse cuando los formularios contienen campos grandes o no textuales, como imágenes.

El método post hace que el navegador envíe los datos del formulario en la sección del cuerpo de la solicitud HTTP. Si bien es necesario para datos binarios que exceden el límite de tamaño de una URL, el método post agrega una sobrecarga innecesaria a la conexión cuando se usa en formularios textuales más simples, por lo que se prefiere el método get en tales casos.

El método elegido no afecta la forma en que el visitante interactúa con el formulario. Los métodos get y post son procesados de manera diferente por el script del lado del servidor que recibe el formulario.

Cuando se utiliza el método post, también es posible cambiar el tipo MIME del contenido del formulario con el atributo enctype. Esto afecta la forma en que los campos de formulario y los valores se apilarán juntos en la comunicación HTTP con el servidor. El valor predeterminado para enctype es application/x-www-form-urlencoded, que es similar al formato utilizado en el método get. Si el formulario contiene campos de entrada de tipo file, en su lugar debe usarse el enctype multipart/form-data.