Etiqueta HTML <form>
La etiqueta <form> crea un formulario web. Agrupa controles y los envía al servidor mediante los atributos action y method.
La etiqueta <form> se utiliza para añadir formularios HTML a la página web para la entrada de datos del usuario. Los formularios se usan para enviar al servidor los datos introducidos por el usuario. Los datos se envían al pulsar el botón "Submit". Si no existe dicho botón, la información se envía al presionar la tecla "Enter".
Sintaxis
La etiqueta <form> va en pares. El contenido se escribe entre las etiquetas de apertura (<form>) y de cierre (</form>).
El elemento <form> contiene otras etiquetas HTML que definen el método de entrada de datos:
- La etiqueta
<input>define un campo de entrada del usuario. - La etiqueta
<textarea>define un campo de formulario para crear un área de entrada multilínea. - La etiqueta
<button>se usa para colocar un botón dentro de un formulario. - La etiqueta
<select>configura un control para crear una lista desplegable. - La etiqueta
<option>define los elementos de la lista desplegable establecida por la etiqueta<select>. - La etiqueta
<optgroup>agrupa datos relacionados en la lista desplegable establecida por la etiqueta<select>. - La etiqueta
<fieldset>agrupa visualmente los elementos dentro del formulario establecido por la etiqueta<form>. - La etiqueta
<label>define la etiqueta de texto para el elemento<input>. - La etiqueta
<legend>define el encabezado para el elemento<fieldset>.
Ejemplo de la etiqueta HTML <form>:
Ejemplo de la etiqueta HTML <form>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="FirstName" id="fname" value="Mary"/><br /><br />
<label for="lname">Surname</label>
<input type="text" name="LastName" id="lname" value="Thomson"/><br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Resultado
Ejemplo de la etiqueta HTML <form> con las etiquetas <input> y <label>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="Name" id="fname" value="Mary"/><br /><br />
<label for="number">Phone</label>
<input type="number" name="Phone" id="number"/><br /><br />
<label for="email">Email</label>
<input type="email" placeholder="Enter Email" name="email" required /> <br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Ejemplo de la etiqueta HTML <form> con la etiqueta <textarea>:
El atributo for de <label> está vinculado al id del <textarea> para que al hacer clic en la etiqueta se enfoque el campo y los lectores de pantalla lo anuncien correctamente.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Form example</h1>
<form action="/form/submit" method="POST" >
<label for="message">Message</label><br />
<textarea id="message" name="message" rows="3" cols="30" placeholder="Type some text here"></textarea><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>GET vs POST: qué método usar
El atributo method controla cómo el navegador envía los datos del formulario. Los dos valores se comportan de manera muy diferente:
method="get" añade los datos del formulario a la URL del action como una cadena de consulta (?name=value&name=value). Úsalo cuando:
- El envío solo lee o filtra datos (formularios de búsqueda, filtros).
- Quieres que el resultado sea marcable como favorito o compartible — los datos son visibles en la URL.
Dado que los datos están en la URL, GET tiene limitaciones reales: la longitud de la URL está limitada por navegadores y servidores, los valores son visibles en la barra de direcciones y en los registros del servidor, y nunca debe transportar contraseñas ni otros datos sensibles.
method="post" envía los datos del formulario en el cuerpo de la solicitud HTTP, no en la URL. Úsalo cuando:
- El envío modifica algo en el servidor (crear una cuenta, publicar un comentario, realizar un pago).
- Estás enviando grandes cantidades de datos o archivos (POST no tiene límite de tamaño práctico y es obligatorio para subir archivos).
- Los datos son sensibles y no deben aparecer en la URL.
Los envíos con POST no son marcables como favoritos, y recargar la página de resultado normalmente vuelve a activar la solicitud. Lee más en Métodos HTTP.
Subida de archivos
Para permitir que los usuarios suban archivos, el formulario debe usar method="post" junto con enctype="multipart/form-data", e incluir un <input type="file">. La codificación predeterminada application/x-www-form-urlencoded no puede transportar datos binarios de archivos, por lo que la subida no funcionará sin ella.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="avatar">Choose a profile picture:</label><br />
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" /><br /><br />
<input type="submit" value="Upload" />
</form>
</body>
</html>Ten en cuenta que el atributo accept (la lista de tipos de archivo permitidos) pertenece al elemento <input type="file">, no a la etiqueta <form>.
Omitir la validación con novalidate
Por defecto, los navegadores validan restricciones como required, type="email" o pattern antes de enviar el formulario. Al añadir el atributo boolean novalidate en el <form> se indica al navegador que omita esa validación integrada y envíe de todos modos — útil, por ejemplo, cuando gestionas la validación tú mismo con JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post" novalidate>
<label for="email">Email</label>
<input type="email" id="email" name="email" required /><br /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| accept-charset | character_set | Especifica las codificaciones de caracteres que el servidor acepta para los datos del formulario enviados. |
| action | URL | La URL a la que se envían los datos del formulario para su procesamiento — generalmente un endpoint de API o una ruta del servidor. Omítelo (o establécelo como cadena vacía) para enviar a la misma página que contiene el formulario. |
| autocomplete | on / off | Activa o desactiva el autocompletado del navegador en los campos del formulario. El valor predeterminado es on. |
| enctype | application/x-www-form-urlencoded / multipart/form-data / text/plain | Determina cómo se codifican los datos del formulario antes de enviarse. El valor predeterminado es application/x-www-form-urlencoded. Usa multipart/form-data cuando el formulario contenga una subida de archivos. Solo se aplica cuando method es post. |
| method | get / post | Especifica el método HTTP usado para enviar el formulario. El valor predeterminado es get. Consulta GET vs POST a continuación. |
| name | text | Define el nombre del formulario, usado para referenciarlo en scripts. |
| novalidate | novalidate | Cuando está presente, el navegador no valida los campos del formulario antes de enviarlo. |
| target | _blank / _self / _parent / _top / framename | Determina dónde mostrar la respuesta recibida tras enviar el formulario. |
La etiqueta <form> también admite los Atributos globales y los Atributos de evento.