El elemento form: action, method y enctype
Configure un elemento form con action, method y enctype.
El elemento form: action, method y enctype es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué es un formulario?
Los formularios HTML son la forma principal en que los usuarios envían datos a un servidor:
- Inicio de sesión y registro
- Consultas de búsqueda
- Proceso de compra y pago
- Contacto y comentarios
Todo formulario comienza con el elemento <form>.
El elemento form
El elemento <form> contiene todos los controles del formulario:
<form action="/submit" method="post">
<!-- form controls go here -->
<button type="submit">Send</button>
</form>
<!-- When the user submits, the browser sends the form data
to the URL specified in action using the method specified -->El atributo action
El atributo action especifica adónde se envían los datos del formulario:
<form action="/api/login">...</form> <!-- relative path -->
<form action="https://api.example.com/form">...</form> <!-- absolute -->
<form action="">...</form> <!-- current URL (empty) -->
<form>...</form> <!-- no action = current URL -->El atributo method
El atributo method controla cómo se envían los datos:
<form method="get">...</form>
<!-- GET: appends data to URL as query string
example.com/search?q=html&sort=date
Used for: search forms, filters, bookmarkable results -->
<form method="post">...</form>
<!-- POST: sends data in the request body
Data is not visible in the URL
Used for: login, registration, file uploads, sensitive data -->GET frente a POST
GET y POST tienen características diferentes:
- GET: datos en la URL (longitud limitada), se puede añadir a marcadores, se almacena en caché y es idempotente
- POST: datos en el cuerpo (sin límite), no se puede añadir a marcadores, no se almacena en caché y no es idempotente
Regla general: si el envío no cambia el estado del servidor → GET; si lo cambia → POST.
El atributo enctype
El atributo enctype controla cómo se codifican los datos del formulario en las solicitudes POST:
<!-- Default: URL-encoded (text/form fields) -->
<form method="post" enctype="application/x-www-form-urlencoded">
<!-- For file uploads: multipart -->
<form method="post" enctype="multipart/form-data">
<input type="file" name="avatar">
</form>
<!-- Plain text (rare): -->
<form method="post" enctype="text/plain">Atributo novalidate
El atributo novalidate desactiva la validación integrada del navegador:
<form action="/submit" method="post" novalidate>
<!-- Validation handled by JavaScript instead -->
<input type="email" name="email">
<button type="submit">Submit</button>
</form>Atributo target en form
El atributo target controla dónde se muestra la respuesta:
<form action="/search" target="_blank">
<!-- Response opens in a new tab -->
</form>
<!-- Values: _blank, _self, _parent, _top, or a frame name -->
<!-- Rarely used — most forms stay on the same page or use AJAX -->autocomplete en form
El atributo autocomplete controla el autocompletado del navegador:
<!-- Off: disable autofill for the entire form -->
<form autocomplete="off">
<!-- On (default): allow autofill -->
<form autocomplete="on">
<!-- Better: control at the field level:
<input type="email" autocomplete="email">
<input type="current-password" autocomplete="current-password">
-->Envío de formularios con JavaScript
Evite el envío predeterminado y gestiónelo con JavaScript:
<form id="contact-form" action="/contact" method="post">
<input type="text" name="name">
<button type="submit">Send</button>
</form>
<script>
document.getElementById('contact-form').addEventListener('submit', async (e) => {
e.preventDefault(); // stop normal browser submission
const data = new FormData(e.target);
const res = await fetch('/contact', { method: 'POST', body: data });
// handle response...
});
</script>action y method juntos
Ejemplo completo de formulario con action y method correctos:
<form action="/api/newsletter" method="post">
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>
<button type="submit">Subscribe</button>
</form>
<!-- POST because: creating a subscription = server state change -->Comprobación rápida
¿Qué método de formulario debe utilizar al subir un archivo?
Resumen: elemento form
Aspectos esenciales del elemento form:
action: URL que recibe los datos del formulariomethod="get": datos en la URL (búsquedas, filtros)method="post": datos en el cuerpo (datos confidenciales, cambios de estado)enctype="multipart/form-data": obligatorio para subir archivosnovalidate: desactiva la validación del navegador
Preguntas frecuentes
¿La lección «El elemento form: action, method y enctype» es gratis?
Sí — el texto completo de «El elemento form: action, method y enctype» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «El elemento form: action, method y enctype»?
Configure un elemento form con action, method y enctype. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «El elemento form: action, method y enctype»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El elemento form: action, method y enctype
- Tipos de input: text, password, email, number y tel
- El elemento label y la accesibilidad
- El elemento button: submit, reset y button