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.
Tabla de contenidos
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 atributotype
. Sus variantes son:fieldset
: agrupa temáticamente a un conjunto de controles.input
: uno de muchos controles de acuerdo al valor del atributotype
. É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.
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>
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>
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
.
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>
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
Cualquier variación de mayúsculas/minúsculas de la cadena UTF-8
. Es requisito que los formularios envíen su información en esta codificación.
Ejemplo
<form action="procesar.php" accept-charset="utf-8">
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>
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>
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>
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>
rel
Una lista no ordenada de tipos de vínculos únicos, separados por espacios, que indican el significado que el recurso enlazado tiene para el documento actual (el que contiene al formulario). Este atributo puede contener los siguientes valores:
- external: el recurso enlazado no es parte del mismo sitio que el documento actual.
- help: un vínculo a ayuda contextual.
- license: una descripción de una licencia de copyright que cubre al contenido principal del documento actual.
- next: el próximo documento en una serie de documentos.
- nofollow: el autor o editor original del documento actual no respalda al documento enlazado.
- noopener: indica que cualquier contexto de navegación creado al seguir el vínculo no debe reconocer a su padre.
- noreferrer: indica al navegador no enviar información acerca del remitente (documento actual) cuando el vínculo es activado.
- opener: fuerza al navegador a enviar información acerca del padre del nuevo contexto de navegación creado por el elemento. Este valor es útil, por ejemplo, para prevenir la conducta por defecto de los vínculos que se abren en nuevos contextos de navegación (valor
_blank
en su atributotaget
). - prev: el documento previo en una serie de documentos.
- search: un enlace a un recurso que puede ser utilizado para buscar en el documento actual y sus páginas relacionadas.
Ejemplo
<form action="http://www.otro-servidor.com/recibir-formulario.php" method="post" rel="external">
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.