Elemento form

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento form inserta un componente diseñado para contener controles con los que el usuario puede interactuar para enviar información de regreso al servidor. Este elemento es comúnmente usado para recolectar información de los visitantes del sitio, como preferencias, comentarios, opiniones y muchas cosas más. También es muy importante en el proceso de acceso que muchos sitios web proveen.

De todos sus atributos, dos tienen mayor importancia y son habitualmente utilizados: action y method. El atributo action indica la ubicación del programa que procesará la información enviada por el navegador, cuando el formulario sea despachado. Este programa está escrito en cualquier lenguaje del lado servidor y se supone que esté preparado para recibir y procesar los datos del formulario.

Por otra parte, el atirbuto method indica cómo debe el navegador adjuntar los datos del formulario a la petición. Es recomendable usar el método "POST" debido a que éste oculta la información enviada y permite la transmisión de datos binarios. Sin embargo, algunas situaciones específicas pueden requerir el uso del método GET.

Al margen de esto y de algunos otros atributos, el elemento form es simplemente un contenedor para muchos otros elementos, que en su mayoría representan una amplia gama de controles. Estos controles se listan a continuación:

  • button: un botón que, cuando es presionado, puede llevar a cabo diferentes acciones dependiendo de su atributo type. Sus variantes son:
    • submit: envía el formulario al agente procesador.
    • reset: restaura todos los controles en el formulario a sus valores iniciales.
    • button: no lleva a cabo ninguna acción.
    • menu: muestra un menú.
  • fieldset: agrupa temáticamente a un conjunto de controles.
  • input: uno de muchos controles de acuerdo al valor del atributo type. Éstos son:
    • hidden: un control oculto utilizado para enviar información al servidor, típicamente manejado por programas.
    • text: un control usado para la entrada de una sola línea de texto.
    • search: igaul a text pero con fines de búsqueda.
    • tel: un control usado para proveer un número de teléfono.
    • url: una caja de texto usada para el ingreso de un único URL absoluto.
    • email: un control diseñado para editar una o más direcciones de e-mail.
    • password: una caja de texto para la edición de contraseñas, donde los caracteres son representados por puntos.
    • datetime: un control para ingresar una fecha y hora global específica.
    • date: un control para ingresar una fecha específica.
    • month: un control para ingresar un mes específico.
    • week: un control para ingresar una semana específica.
    • time: un control para ingresar una hora específica.
    • number: un control para ingresar un número.
    • range: un control para ingresar uno o dos números dentro de un rango.
    • color: un control para ingresar un color.
    • checkbox: un control para ingresar un valor booleano (verdadero/falso).
    • radio: un control para elegir una única opción entre varias.
    • file: un control usado para subir archivos al servidor.
    • submit: un botón usado para enviar el formulario.
    • image: igual a submit pero con la habilidad de verse como una imagen en lugar de usar la apariencia predeterminada de los botones.
    • reset: un botón usado para reiniciar los controles del formulario a sus valores iniciales.
    • button: un botón sin una acción predeterminada asociada.
  • keygen: un control usado para generar un par de llaves pública/privada.
  • label: un elemento utilizado para proveer una etiqueta a los controles del formulario.
  • object: un objeto que representa una imagen, que puede ser usado como un mapa de imagen del lado cliente.
  • output: un elemento usado para mostrar el resultado de un cálculo llevado a cabo por la página, o el resultado de la acción de un usuario, basada en los controles del formulario.
  • select: un control usado para seleccionar una o más opciones de una lista.
  • textarea: un control usado para ingresar un trozo de texto que consta de una o más líneas.
  • img: una imagen que puede ser usada como un mapa de imagen del lado cliente.

Cuando se utilizan apropiadamente, en especial desde que HTML5 comenzó a ser adoptado, los formularios son una herramienta poderosa que permiten a los autores no solamente recolectar información muy valiosa de los usuarios, sino también desarrollar complejas aplicaciones, capaces de recolectar y procesar información muy específica en muchas formas diferentes.

El atributo name de este elemento ha sido eliminado en versiones previas del estándar. HTML5 lo ha restituido para permitir a los autores referisrse al formulario por su nombre dentro de la colección de formularios.

El atributo accept de este elemento ha sido eliminado de HTML5 por ser redundante. Los autores deberían usar el atributo accept de los controles en su lugar.

Ejemplos

En los ejemplos siguientes, veremos algunos de los atributos del elemento form y algunos controles. Para obtener información detallada de los controles te sugiero que visites la referencia específica para cada elemento.

Nuestro primer ejemplo define un formulario básico de acceso (login) con solo tres elementos: una entrada de texto, una entrada de contraseña y un botón de envío. Los atributos action y method indican, respectivamente, la ubicación del programa responsable del procesamiento de los datos del formulario y el método usado para enviar la información.

El atributo target en form hará que los resultados sean mostrados en una nueva ventana/pestaña. La página que mostrará los resultados ha sido específicamente diseñada para dejar en claro el funcionamiento de los formularios. Está escrita en un lenguaje del lado servidor, y será procesada por el servidor antes de ser mostrada.

<form action="../../form-result.php" method="post" target="_blank">
  <p>Nombre de usuario: <input type="text" name="usuario"></p>
  <p>Contraseña: <input type="password" name="pass"></p>
  <p><input type="submit" value="Enviar datos"></p>
</form>

Nombre de usuario:

Contraseña:

En nuestro segundo ejemplo, agregaremos más controles a nuestro formulario (un par de botones de opción y tres casillas de verificación). También proveeremos un botón de reinicio, para que puedas jugar un poco con los controles, cambiando sus valores y restaurándolos luego con el botón.

Además, haremos uso del elemento label. Con este elemento podemos asociar a una línea de texto con un control. La forma más básica de usarlo es encerrando al texto y al control entre sus etiquetas de apertura y cierre.

<form action="../../form-result.php" method="post" target="_blank">
  <p><label>Nombre completo: <input type="text" name="nombrecompleto"></label></p>
  <p>Género:
    <label><input type="radio" name="genero" value="masculino"> Masculino</label>
    <label><input type="radio" name="genero" value="femenino"> Femenino</label>
  </p>
  <p><label>Dirección: <input type="text" name="direccion"></label></p>
  <p>Intereses:
    <label><input type="checkbox" name="libros"> Libros</label>
    <label><input type="checkbox" name="peliculas"> Películas</label>
    <label><input type="checkbox" name="videojuegos"> Videojuegos</label>
  </p>
  <p><input type="submit" value="Enviar datos"> <input type="reset" value="Restaurar formulario"></p>
</form>

Género:

Intereses:

En el siguiente ejemplo, alteraremos un poco al formulario anterior para que podamos tener algunos de los nuevos controles de HTML5: un selector de fechas, una entrada de número telefónico y un selector de color. También, agruparemos controles temáticamente mediante el elemento fieldset.

El soporte provisto por los navegadores para los nuevos controles en HTML5 es incompleto. En la mayoría de los casos, los elementos no soportados son representados como entradas de texto, por lo cual los autores no deberían confiar en la validez de la información de estos campos.

Nota que en este caso, usaremos el valor "GET" para el atributo method, solo por cambiar. Esto te permitirá ver, cuando la nueva ventana se abra con los resultados del formulario, los pares nombre/valor en el URL en la barra de direcciones del navegador. Se verá algo así: "?nombrecompleto=john&fechadenacimiento=15/10/2002&...".

<form action="../../form-result.php" method="get" target="_blank">
  <fieldset>
    <legend>Información básica</legend>
    <p><label>Nombre completo: <input type="text" name="nombrecompleto"></label></p>
    <p><label>Fecha de nacimiento: <input type="date" name="fechadenacimiento"></label></p>
    <p>Gender:
      <label><input type="radio" name="genero" value="masculino"> Masculino</label>
      <label><input type="radio" name="genero" value="femenino"> Femenino</label>
    </p>
    <p><label>Dirección: <input type="text" name="direccion"></label></p>
    <p><label>Número telefónico: <input type="tel" name="telefono"></label></p>
  </fieldset>
  <fieldset>
    <legend>Información extra</legend>
    <p>Interests:
      <label><input type="checkbox" name="libros"> Libros</label>
      <label><input type="checkbox" name="peliculas"> Películas</label>
      <label><input type="checkbox" name="videojuegos"> Videojuegos</label>
    </p>
    <p><label>Color favorito: <input type="color" name="colorfavorito"></label></p>
  </fieldset>
  <p>
    <input type="submit" value="Enviar datos">
    <input type="reset" value="Restaurar formulario">
  </p>
</form>
Información básica

Gender:

Información extra

Interests:

Finalmente, crearemos un formulario con subida de archivos. En este caso debemos prestar especial atención a un par de atributos: primero el atributo method, que únicamente puede tener el valor "POST", ya que es el único método que puede transferir datos binarios; y segundo, el atributo enctype, que debería tener el valor "multipart/form-data". Si esta configuración no es respetada, la subida de archivos no será posible.

Además, nuestro formulario necesitará un control de subida de archivos para permitir a los usuarios seleccionar el archivo que desean enviar desde el disco.

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p><label>Archivo: <input type="file" name="archivo"></label> <input type="submit" value="Enviar datos"></p>
</form>

Atributos

Atributos específicos

accept-charset

Una lista de codificaciones de caracteres separadas por espacios, que se utilizarán para el envío del formulario. La lista debe estar ordenada por preferencia.

Ejemplo

<form action="procesar.php" accept-charset="utf8">

action

Un URI que indica la ubicación del programa responsable de la manipulación de los datos enviados por el formulario. Este programa está normalmente escrito en un lenguaje del lado servidor como ASP, PHP, Python, etc.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>Algo de texto: <input type="text" name="algodetexto"> <input type="submit" value="Enviar datos"></p>
</form>

Algo de texto:

autocomplete

Uno de dos valores que indica al navegador si debería sugerir opciones automáticamente para los controles de entrada, como un intento de adivinar lo que el usuario está tipeando. Los navegadores habitualmente llevan a cabo esta acción recuperando información de una base de datos que contiene entradas anteriores. Existen dos valores posibles, ambos insensibles a mayúsculas/minúsculas:

  • on: el navegador debería sugerir opciones automáticamente. Este es el valor por defecto.
  • off: el navegador no debería sugerir opciones automáticamente.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank" autocomplete="off">
  <p>Algo de texto: <input type="text" name="algodetexto"> <input type="submit" value="Enviar datos"></p>
</form>

Algo de texto:

enctype

Un valor que especifica el método de codificación a utilizarse para los datos cuando el formulario es enviado. Existen tres valores posibles, insensibles a mayúsculas/minúsculas:

  • application/x-www-form-urlencoded: los espacios son reemplazados con signos más ("+") y los caracteres especiales son convertidos a valores HEX. Este es el valor por defecto.
  • multipart/form-data: no se aplica ninguna codificación. Este valor es necesario para la subida de archivos.
  • text/plain: solo los espacios son reemplazados por signos más ("+").

Recuerda que debes usar el valor "multipart/form-data" siempre que un archivo vaya a ser subido en el formulario. Sin esta configuración, la subida de archivos fallará.

Ejemplo

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p><label>Archivo: <input type="file" name="archivo"></label> <input type="submit" value="Enviar datos"></p>
</form>

method

El método que deberían usar los navegadores para enviar la información del formulario. Existen tres valores posibles, insensibles a mayúsculas/minúsculas:

  • get: los datos se adjuntan al URL de la petición (el provisto en el atributo action). Los pares nombre-valor se organizan de la forma "nombre=valor" y se separan unos de otros con un signo "&". Toda esta cadena es sumada al URL de la petición, precedida por un signo de interrogación ("?"). Por ejemplo, una cadena GET podría ser: "resultados.php?usuario=john&pass=123456"
  • post: los datos se adjuntan al cuerpo de la petición.
  • dialog: específico para formularios dentro de un elemento dialog. Instruye al navegador a cerrar el cuadro de diálogo cuando el formulario es enviado. Los resultados del formulario deberían ser manipulados por programas.

Ejemplo

<form action="../../form-result.php" method="get" target="_blank">
  <p>Nombre de usuario: <input type="text" name="usuario"></p>
  <p>Contraseña: <input type="password" name="pass"></p>
  <p><input type="submit" value="Enviar datos"></p>
</form>

Nombre de usuario:

Contraseña:

name

Un nombre para representar al formulario dentro de la colección de formularios. Este valor no puede ser la cadena vacía y debe ser único respecto de los demás nombres de formularios.

Este atributo ha sido eliminado en versiones anteriores del estándar. HTML5 lo ha restituido para permitir a los autores referirse al formulario por su nombre dentro de la colección de formularios.

Ejemplo

<form name="datosusuario" action="resultado.php">

novalidate

Un valor booleano que instruye al navegador a no validar los datos del formulario durante su envío. Si este atributo toma los valores "novalidate" o la cadena vacía (""), o si simplemente está presente, el navegador debería omitir la validación del formulario.

Ejemplo

<form action="resultado.php" novalidate>

target

Un valor que especifica dónde deberían cargarse los resultados del programa a cargo del procesamiento de los datos. Este valor puede ser un nombre de contexto de navegación (como el valor del atributo name de un iframe) o cualquiera de los siguientes valores (insensibles a mayúsculas/minúsculas):

  • _blank: en una nueva ventana/pestaña.
  • _parent: en el contexto padre inmediato.
  • _self: en el mismo contexto que contiene al formulario.
  • _top: en el más alto contexto de naveción (el contexto más exterior que contiene al formulario).

El atributo target fue desaprobado en versiones previas de HTML, pero ha sido reincorporado en HTML5 ya que se vuelve útil en combinación con el elemento iframe.

Ejemplo

<form action="../../form-result.php" target="_blank">
  <p>Algo de texto: <input type="text" name="algodetexto"></p>
  <p><input type="submit" value="Enviar datos"></p>
</form>

Algo de texto:

accept

Una lista de tipos de contenido (o Tipos de medios de Internet) separados por espacios y/o comas, que se supone el agente procesador maneja correctamente. Esto podría ser útil al subir archivos, por ejemplo, para filtrar del lado cliente, los tipos que el agente procesador no podrá manejar.

El atributo accept de este elemento ha sido eliminado de HTML5 por ser redundante. Los autores deberían usar el atributo accept de los controles en su lugar.

Ejemplo

<form action="tienda.php" method="post" enctype="multipart/form-data" accept="image/gif image/jpeg image/png">

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.