HTML
Tipos de button, comportamiento de envío por defecto y diferencias entre submit, reset y button dentro y fuera de formularios.
representa una acción. Dentro de un formulario, su determina si envía, reinicia o ejecuta una acción normal.
buttontype<button type="submit">Guardar cambios</button><button type="submit">Enviar</button>Activa la validación y el envío del formulario asociado.
Dentro de form, button usa submit como estado predeterminado si type se omite o es inválido.
Por eso una acción secundaria debe declarar:
<button type="button">Añadir campo</button><button type="button">Abrir vista previa</button>No envía automáticamente. JavaScript puede responder a la activación.
<button type="reset">Restablecer</button>Devuelve controles a sus valores iniciales, no necesariamente a vacío.
Puede borrar trabajo accidentalmente y suele ser inesperado. Evítalo salvo una necesidad clara y considera confirmación.
Mejor:
<button type="submit">Crear producto</button>Menos específico:
<button type="submit">Aceptar</button>El nombre debe comunicar la consecuencia.
<button type="button">
<svg aria-hidden="true">...</svg>
Guardar favorito
</button>button acepta phrasing content, pero no controles interactivos anidados.
<button><a href="/help">Ayuda</a></button>Es inválido y crea interacción conflictiva.
<button type="button" aria-label="Cerrar">
<svg aria-hidden="true">...</svg>
</button>Necesita un nombre accesible. Tooltip opcional no reemplaza ese nombre.
<button
type="submit"
name="intent"
value="publish"
>
Publicar
</button>
<button
type="submit"
name="intent"
value="draft"
>
Guardar borrador
</button>Solo el submitter activado aporta normalmente su name/value, permitiendo varias acciones desde un mismo formulario.
<button
type="submit"
formaction="/drafts"
formmethod="post"
formnovalidate
>
Guardar borrador
</button>Puede sobrescribir action, method, enctype, target y validación mediante atributos form*.
No uses formnovalidate para el submit principal si los campos deben validarse.
<form id="editor-form">...</form>
<button type="submit" form="editor-form">
Guardar
</button>Permite colocar el botón fuera del form. Mantén un orden DOM comprensible.
<button type="submit" disabled>Enviando...</button>No recibe activación normal ni se envía como submitter.
Deshabilitar mientras envías puede prevenir duplicados, pero también evita foco y puede impedir reintentar. Actualiza texto/estado perceptiblemente y vuelve a habilitar ante fallo.
No uses disabled solo para explicar por qué una acción no está disponible; ofrece el motivo.
<button type="button" aria-pressed="false">
Negrilla
</button>Representa un toggle button que mantiene estado presionado. JavaScript debe actualizarlo.
No uses aria-pressed para una acción momentánea como Guardar.
<button
type="button"
aria-expanded="false"
aria-controls="filters"
>
Filtros
</button>Describe la expansión de contenido controlado. No reemplaza hidden o la lógica real.
<input type="submit" value="Enviar">
<input type="button" value="Vista previa">
<input type="reset" value="Restablecer">Funcionan, pero button permite iconos y contenido estructurado sin depender solo de value.
<input
type="image"
src="submit.png"
alt="Enviar pedido"
name="submit"
>Actúa como submit y puede enviar coordenadas del click. Rara vez es necesario; un button con imagen decorativa suele ser más claro.
JavaScript debe escuchar submit en el formulario:
form.addEventListener("submit", handleSubmit);No solo click del botón, porque el envío puede ocurrir mediante Enter, otro submitter o APIs.
form.requestSubmit() activa validación y el flujo de submit.form.submit() envía directamente y omite partes del flujo, además puede ser ocultado por un control llamado submit.Prefiere requestSubmit cuando quieres simular una activación normal.
<form id="project-form" action="/projects" method="post">
...
<div class="actions">
<button
type="submit"
name="intent"
value="publish"
>
Publicar proyecto
</button>
<button
type="submit"
name="intent"
value="draft"
formnovalidate
>
Guardar borrador
</button>
</div>
</form>submit y ocultar el método.¿Por qué un botón “Abrir modal” dentro de un formulario necesita type="button"?
Porque, sin type explícito, puede comportarse como submit y enviar el formulario al intentar abrir el modal.
fieldset, legend, output, progress y meter agrupa controles y representa resultados o medidas.