Botones HTML en formularios: comportamiento de envío, tipos y UX
Los botones parecen simples, pero controlan el momento más importante de un formulario: el envío. Un botón confuso puede provocar envíos accidentales, envíos duplicados o ningún envío.
La clave es ser explícita. Utilice el tipo de botón correcto, escriba etiquetas específicas de acciones, proporcione comentarios de carga para envíos de JavaScript y mantenga el formulario utilizable sin JavaScript cuando sea posible.
Botón de envío básico
<form action="https://api.formsfort.com/submit" method="POST"> <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<label for="email">Email</label> <input type="email" id="email" name="email" required />
<button type="submit">Subscribe</button></form>Always include type="submit" on submit buttons. It documents the behavior and avoids surprises when buttons are moved around later.
Tipos de botones
| Tipo | Comportamiento |
|---|---|
submit | Envía el formulario |
button | No hace nada de forma predeterminada, útil para acciones de JavaScript |
reset | Restablece todos los campos a sus valores iniciales |
Inside a form, <button> defaults to submit. That means this button submits the form even though it may look like a secondary action:
<button>Preview</button>Haz explícitas las acciones de no envío:
<button type="button">Preview</button>Utilice etiquetas de acción claras
Las etiquetas de los botones deben describir el resultado.
| Etiqueta débil | Mejor etiqueta |
|---|---|
| Enviar | Enviar mensaje |
| Continuar | Continuar con el pago |
| OK | Guardar preferencias |
| Haga clic aquí | Descargar cotización |
Para formularios, las mejores etiquetas generalmente comienzan con un verbo: enviar, guardar, crear, solicitar, suscribirse, descargar, cargar.
Múltiples botones de envío
Forms can include more than one submit action. Give each button a name and value so the backend can see which one was clicked.
<form action="https://api.formsfort.com/submit" method="POST"> <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<label for="email">Email</label> <input type="email" id="email" name="email" required />
<button type="submit" name="intent" value="save_draft">Save draft</button> <button type="submit" name="intent" value="send_request">Send request</button></form>If the visitor clicks “Send request”, the backend receives intent=send_request.
Impide envíos AJAX duplicados
For JavaScript-enhanced forms, disable the submit button while the request is in progress and expose status text with aria-live.
<form id="contactForm" action="https://api.formsfort.com/submit" method="POST"> <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" /> <input type="email" name="email" required /> <textarea name="message" required></textarea> <button type="submit" id="submitButton">Send message</button> <p id="formStatus" aria-live="polite"></p></form>
<script> const form = document.getElementById("contactForm"); const button = document.getElementById("submitButton"); const status = document.getElementById("formStatus");
form.addEventListener("submit", async (event) => { event.preventDefault(); button.disabled = true; status.textContent = "Sending...";
try { const response = await fetch(form.action, { method: "POST", body: new FormData(form), });
status.textContent = response.ok ? "Message sent." : "The message could not be sent."; } finally { button.disabled = false; } });</script>Haga esto solo cuando JavaScript sea propietario del envío. Un formulario HTML normal no necesita este código.
Botones deshabilitados de estilo accesibles
Los botones deshabilitados deberían verse deshabilitados, pero el texto aún necesita suficiente contraste para ser legible.
button { border: 0; border-radius: 8px; padding: 12px 16px; background: #059669; color: white; font-weight: 700;}
button:disabled { cursor: not-allowed; opacity: 0.65;}Evite ocultar el botón o cambiar su etiqueta a solo una rueda giratoria. Si utiliza un ícono o una rueda giratoria, mantenga el texto disponible para los lectores de pantalla.
Formulario completo listo para el backend
<form action="https://api.formsfort.com/submit" method="POST"> <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" /> <input type="hidden" name="subject" value="New demo request" />
<label for="email">Work email</label> <input type="email" id="email" name="email" autocomplete="email" required />
<label for="message">What should we help with?</label> <textarea id="message" name="message" rows="5" required></textarea>
<input type="checkbox" name="botcheck" style="display:none" />
<button type="submit">Request demo</button></form>Este formulario funciona en alojamiento estático, tiene una acción de envío explícita y envía nombres de campos claros al backend.
Guías relacionadas
Use esto con Guía de campos de entrada HTML, Guía del área de texto HTMLy Guía de validación de formularios HTML.
Preguntas frecuentes
¿Cuál es el tipo predeterminado de botón en un formulario?
Dentro de un formulario, un botón por defecto escribe = 'enviar'. Establezca el tipo explícitamente para evitar envíos accidentales.
¿Cuándo debo usar input type='submit' en lugar de button?
Utilice el botón para la mayoría de los formularios modernos porque puede contener contenido más rico. input type='submit' sigue siendo válido para controles de envío simples.
¿Puede un formulario tener varios botones de envío?
Sí. Cada botón de envío puede tener su propio nombre y valor, por lo que el backend puede saber qué acción se eligió.
¿Debo desactivar el botón de enviar después de hacer clic?
Puede deshabilitarlo mientras una solicitud AJAX está en progreso, pero mantenga un mensaje de estado accesible para que los usuarios sepan lo que está sucediendo.
Comience gratis
¿Listo para agregar formularios a su sitio estático?
No se requiere backend. Apunte su formulario HTML a FormsFort y comience a recibir envíos en minutos.