Formularios HTML
Aprende formularios HTML: el elemento form, action y method (GET vs POST), etiquetas, inputs, textarea, select, botones y validación HTML5.
Un formulario HTML recopila la entrada del usuario y la envía a un servidor para su procesamiento. Un formulario es un contenedor — el elemento <form> — que contiene uno o más controles como campos de texto, casillas de verificación, botones de opción, listas desplegables y botones de envío. Esta página cubre el elemento <form> en sí, los controles que se colocan dentro de él, cómo se envían los datos (GET vs POST) y cómo etiquetar y validar la entrada.
El elemento <form>
Todo formulario comienza con la etiqueta <form>. Los controles que el usuario rellena se encuentran entre las etiquetas de apertura <form> y cierre </form>. Dos atributos hacen la mayor parte del trabajo:
action— la URL que recibe los datos del formulario cuando el usuario lo envía.method— el método HTTP utilizado para enviar los datos, ya seaGEToPOST.
<form action="/subscribe" method="POST">
<!-- form controls go here -->
<button type="submit">Subscribe</button>
</form>Si omites action, el formulario se envía de vuelta a la URL de la página actual. Si omites method, el navegador usa GET de forma predeterminada.
Etiquetado de controles
Cada input debe tener una <label>. Conecta la etiqueta a su control asignando al control un id y apuntando el atributo for de la etiqueta a ese mismo id:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Text Input Example</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="surname">Surname:</label>
<input type="text" id="surname" name="surname" />
</form>
</body>
</html>Usa una <label> real en lugar de texto plano como Name:<br />. Una etiqueta conectada es leída en voz alta por los lectores de pantalla y amplía el área pulsable, de modo que al tocar la etiqueta se enfoca el campo. Consulta más información en el capítulo de la etiqueta HTML <label>.
El elemento HTML <input>
El elemento <input> es el control de formulario más común. Su atributo type cambia su apariencia y comportamiento — text, email, password, number, checkbox, radio, file, submit y muchos más.
Veamos algunos de los tipos de input.
Input de texto
<input type="text"> crea un campo de texto de una sola línea. El atributo name es la clave que se envía al servidor junto con el valor del campo.
Ejemplo de input de texto:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
</form>Input de botón de opción
<input type="radio"> permite al usuario seleccionar exactamente una opción de un conjunto. Los botones de opción comparten el mismo name, de modo que al seleccionar uno se desmarcan los demás del grupo.
Ejemplo de input de botón de opción:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Radio Button Example</h2>
<form>
<input type="radio" id="football" name="game" value="football" checked />
<label for="football">Football</label>
<input type="radio" id="basketball" name="game" value="basketball" />
<label for="basketball">Basketball</label>
</form>
</body>
</html>Input de envío
<input type="submit"> (o un <button type="submit">) envía los datos del formulario al manejador del formulario — la URL del servidor indicada en el atributo action del formulario.
Ejemplo de input de envío:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>HTML Form Example</h2>
<form action="/form/submit" method="POST">
<label for="firstname">Name:</label>
<input type="text" id="firstname" name="firstname" value="Tom" />
<label for="lastname">Surname:</label>
<input type="text" id="lastname" name="lastname" value="Brown" />
<label for="age">Age:</label>
<input type="number" id="age" name="age" value="21" />
<input type="submit" value="Submit" />
</form>
<p>Click the Submit button to send the form data to the action page.</p>
</body>
</html>Otros controles de formulario
Los inputs no son los únicos controles. Estos elementos ofrecen texto multilínea, listas desplegables, botones personalizados y una forma de agrupar campos relacionados.
Texto multilínea con <textarea>
Usa <textarea> para texto más largo, como comentarios o mensajes. A diferencia de <input>, tiene etiquetas de apertura y cierre separadas, y rows/cols definen su tamaño visible.
<form>
<label for="message">Your message:</label>
<textarea id="message" name="message" rows="4" cols="40"></textarea>
</form>Listas desplegables con <select>
Un elemento <select> crea una lista desplegable. Cada opción es un <option>; el value es lo que se envía y selected establece el valor predeterminado.
<form>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="uk" selected>United Kingdom</option>
<option value="ca">Canada</option>
</select>
</form>El elemento <button>
El elemento <button> es más flexible que <input type="submit"> porque puede contener HTML (texto, iconos). Siempre define su type: submit envía el formulario, reset lo limpia y button no hace nada por sí solo (úsalo con JavaScript).
<form>
<button type="submit">Send</button>
<button type="reset">Clear</button>
</form>Agrupación con <fieldset> y <legend>
Envuelve controles relacionados en un <fieldset> y describe el grupo con una <legend>. Esto dibuja un borde etiquetado y ayuda a los usuarios de lectores de pantalla a entender cómo se relacionan los campos — útil para cosas como un bloque de dirección o un conjunto de botones de opción.
<form>
<fieldset>
<legend>Contact details</legend>
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" />
</fieldset>
</form>El atributo action
El atributo action especifica la URL a la que se envían los datos del formulario cuando se envía. Cuando el usuario hace clic en el botón de envío, el navegador empaqueta los valores de los controles y los envía a esa URL.
<form action="/form/submit">El atributo target
El atributo target define dónde se abre el resultado del formulario — en una nueva pestaña del navegador, un marco o la ventana actual.
_self(predeterminado) abre el resultado en la ventana actual._blankabre el resultado en una nueva pestaña del navegador.
<form action="/form/submit" target="_blank">El atributo method
El atributo method define el método HTTP — GET o POST — utilizado para enviar los datos del formulario. La elección afecta dónde van los datos y qué significa la solicitud.
Ejemplo del método GET:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the GET Method</h2>
<form action="/form/submit" method="GET">
<label for="g-name">Name:</label>
<input type="text" id="g-name" name="name" value="Tom" />
<label for="g-surname">Surname:</label>
<input type="text" id="g-surname" name="surname" value="Brown" />
<label for="g-age">Age:</label>
<input type="number" id="g-age" name="age" value="21" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Tras el envío, los datos aparecen en la cadena de consulta de la URL, como /form/submit?name=Tom&surname=Brown&age=21.
Ejemplo del método POST:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the Post Method</h2>
<form action="/form/submit" method="POST">
<label for="p-name">Name:</label>
<input type="text" id="p-name" name="name" value="Tom" />
<label for="p-surname">Surname:</label>
<input type="text" id="p-surname" name="surname" value="Brown" />
<label for="p-age">Age:</label>
<input type="number" id="p-age" name="age" value="21" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Con POST, los datos viajan en el cuerpo de la solicitud, por lo que no aparecen en la URL.
GET vs POST
Los dos métodos envían datos de manera diferente e indican intenciones distintas al servidor.
GET añade los datos del formulario a la URL como cadena de consulta:
- Los datos son visibles en la barra de direcciones y pueden guardarse como marcador o compartirse.
- Las URLs tienen un límite de longitud (comúnmente alrededor de 2048 caracteres), por lo que GET no es adecuado para grandes cantidades de datos.
- GET es idempotente — repetir la misma solicitud no debería cambiar nada en el servidor. Úsalo para búsquedas y filtros que solo leen datos.
No uses GET para enviar contraseñas u otros datos sensibles — terminan siendo visibles en la URL, el historial del navegador y los registros del servidor.
POST envía los datos en el cuerpo de la solicitud:
- Los datos no se muestran en la URL y no hay límite de tamaño práctico, por lo que POST gestiona cargas grandes y subidas de archivos.
- Los envíos POST no pueden guardarse como marcadores.
- POST está pensado para solicitudes que cambian el estado del servidor (crear una cuenta, publicar un comentario, realizar un pedido).
Regla general: usa GET para leer o buscar algo, y POST para crear o modificar algo.
Validación de la entrada del usuario
HTML5 puede verificar la entrada en el navegador antes de que se envíe el formulario — sin necesidad de JavaScript. Añade estos atributos a tus controles:
| Atributo | Qué hace |
|---|---|
required | El campo debe estar rellenado antes de que el formulario pueda enviarse. |
minlength / maxlength | Número mínimo / máximo de caracteres para campos de texto. |
min / max | Valor mínimo / máximo permitido para números, rangos y fechas. |
pattern | Una expresión regular con la que debe coincidir el valor. |
type | Algunos tipos validan el formato automáticamente: email, url, number, tel. |
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Form Validation Example</h2>
<form action="/form/submit" method="POST">
<label for="user">Username (3–12 letters):</label>
<input type="text" id="user" name="user"
required minlength="3" maxlength="12" pattern="[A-Za-z]+" />
<label for="mail">Email:</label>
<input type="email" id="mail" name="mail" required />
<label for="qty">Quantity (1–10):</label>
<input type="number" id="qty" name="qty" min="1" max="10" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Si un valor no cumple una regla, el navegador bloquea el envío y muestra un mensaje. Para desactivar esta verificación integrada, añade el atributo novalidate al <form>.
El atributo enctype
El atributo enctype define cómo se codifican los datos del formulario cuando se envían con POST:
application/x-www-form-urlencoded— el predeterminado; los nombres y valores de los campos se codifican como URL. Adecuado para formularios de texto ordinarios.multipart/form-data— requerido cuando el formulario contiene una subida de archivo (<input type="file">), para que los datos binarios del archivo se envíen correctamente.
<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="photo">Profile photo:</label>
<input type="file" id="photo" name="photo" />
<button type="submit">Upload</button>
</form>Otros atributos
A continuación se muestran otros atributos útiles de <form>:
| Atributo | Descripción |
|---|---|
accept-charset | El conjunto de caracteres utilizado en el formulario enviado (predeterminado: el conjunto de caracteres de la página). |
autocomplete | Si el navegador puede autocompletar el formulario (predeterminado: on). |
enctype | Cómo se codifican los datos enviados (predeterminado: application/x-www-form-urlencoded). |
name | Un nombre utilizado para identificar el formulario. |
novalidate | Indica al navegador que no valide el formulario al enviarlo. |
Capítulos relacionados
- Etiqueta HTML
<form> - Etiqueta HTML
<input> - Etiqueta HTML
<label> - Etiqueta HTML
<textarea> - Etiqueta HTML
<select> - Etiqueta HTML
<button> - Etiqueta HTML
<fieldset>