HTML
Cómo controla form el destino, método y codificación del envío mediante action, method y enctype, incluyendo GET, POST y carga de archivos.
Cuando se envía un formulario, el navegador construye un conjunto de pares nombre/valor a partir de los controles exitosos y lo transporta según , y .
actionmethodenctype<form action="/contact" method="post">
...
</form><form action="/search">Indica la URL de destino. Una URL relativa se resuelve contra la base del documento.
Si se omite o queda vacía, el destino suele ser la URL actual, pero es más claro declarar la intención.
No construyas actions desde entrada no confiable sin validar.
<form action="/search" method="get">
<input name="q" type="search">
</form>Los datos se serializan en la query:
/search?q=htmlAporta para consultas, filtros y navegación que puede:
No uses GET para cambios de estado sensibles. Crawlers, prefetchers o usuarios pueden visitar la URL.
<form action="/orders" method="post">Envía los datos en el cuerpo de la solicitud.
POST no cifra automáticamente. Utiliza HTTPS y controles del servidor.
Dentro de dialog:
<form method="dialog">
<button value="cancel">Cancelar</button>
<button value="confirm">Confirmar</button>
</form>Cierra el diálogo y establece returnValue sin una solicitud de red.
Solo tiene sentido dentro de un dialog apropiado.
HTML forms soportan principalmente GET y POST para red. PUT, PATCH o DELETE suelen implementarse mediante:
No declares method="delete" esperando una solicitud DELETE nativa.
<form method="post" enctype="application/x-www-form-urlencoded">Serializa pares en una representación similar a query strings.
Es el default para POST sin archivos.
<form
action="/upload"
method="post"
enctype="multipart/form-data"
>
<input type="file" name="attachment">
</form>Es necesario para enviar archivos. Cada parte incluye headers y contenido separado por boundaries.
No configures manualmente el header Content-Type con boundary cuando utilizas FormData y fetch; el navegador debe generarlo.
<form method="post" enctype="text/plain">Tiene usos limitados y no es apropiado como formato general de API. La serialización es ambigua para datos complejos.
HTML moderno utiliza UTF-8 para el envío. Mantén servidor, documento y almacenamiento alineados en UTF-8.
<form action="/preview" target="preview-frame">El resultado puede navegar otro contexto. Abrir en _blank o iframe cambia la experiencia y debe ser intencional.
<button type="submit">Publicar</button>
<button
type="submit"
formaction="/drafts"
formmethod="post"
formnovalidate
>
Guardar borrador
</button>El botón activado puede sobrescribir action, method, enctype, target y validación.
<input type="checkbox" name="tag" value="html" checked>
<input type="checkbox" name="tag" value="accessibility" checked>Produce dos entradas con el mismo name. El servidor no debe convertirlas accidentalmente en un único valor sin definir la regla.
El form data set conserva un orden derivado del documento y controles. No diseñes reglas de negocio frágiles basadas en orden salvo que el protocolo lo defina.
Caracteres especiales en query/body se codifican. Utiliza el parser del framework/servidor, no splits manuales por & o =.
Un servidor suele responder con redirect después de procesar correctamente:
POST /orders
303 See Other
Location: /orders/123Evita que recargar repita accidentalmente el envío y proporciona una URL de resultado.
Ante validación fallida:
El HTML de respuesta debe seguir siendo válido y accesible.
Formulario con datos personales o credenciales debe enviarse por HTTPS. También revisa recursos mixtos y action que apunte accidentalmente a HTTP.
<form action="/projects" method="post">
<label for="title">Título</label>
<input id="title" name="title" required>
<button
type="submit"
name="intent"
value="publish"
>
Publicar
</button>
<button
type="submit"
name="intent"
value="draft"
formnovalidate
>
Guardar borrador
</button>
</form>¿Por qué un formulario de búsqueda suele usar GET?
Porque representa una consulta y permite que los criterios formen parte de una URL compartible, guardable y navegable mediante historial.
FormData y controles asociados explica cómo el navegador construye datos y cómo JavaScript puede inspeccionarlos.