Herramientas HTML

Gratis HTML Invoker Command Generator

Generate declarative command buttons for dialogs, popovers, and disclosure elements using the Invoker Commands API. No JavaScript needed.

Cargando herramienta...

Qué es HTML Invoker Command Generator?

La API Invoker Commands es una función HTML declarativa que permite a los botones controlar otros elementos sin JavaScript. Usando el atributo commandfor (que apunta al id de un elemento objetivo) y el atributo command (que especifica la acción), un botón puede abrir/cerrar diálogos, alternar popovers, expandir/contraer detalles o disparar eventos de comando personalizados. Esto reemplaza los manejadores onclick con HTML declarativo y accesible.

Respuesta rápida

Use la API Invoker Commands para botones declarativos que controlen diálogos, popovers y detalles sin JavaScript. Establezca commandfor al ID del elemento objetivo y command a la acción (show-modal, toggle-popover, open, close). Los comandos integrados funcionan de forma nativa; los comandos personalizados disparan un evento 'command' en el objetivo.

Last updated: 2026-05-28

Limitaciones

Invoker Commands solo funciona para tipos de destino específicos: dialog (show-modal, close), popover (show-popover, hide-popover, toggle-popover) y details (open, close, toggle). Otros elementos necesitan manejadores de evento command personalizados.
El soporte del navegador es Baseline 2025: Chrome 117+, Edge 117+, Safari 18+. Firefox está en desarrollo. Los navegadores más antiguos necesitan un fallback de manejador de clic JavaScript.
Los comandos personalizados (usando un valor de comando personalizado) disparan un evento 'command' pero no realizan ningún comportamiento integrado. Debe agregar un listener de evento JavaScript en el objetivo para manejar comandos personalizados.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

Ingrese el ID del elemento objetivo y seleccione el tipo de destino (dialog, popover, details o custom).
Elija el comando — diferentes tipos de destino admiten diferentes comandos (show-modal, toggle-popover, open, etc.).
Establezca el texto del botón. Opcionalmente incluya la plantilla del elemento objetivo y el fallback JS.
Copie el HTML generado. No se requiere JavaScript para comandos integrados en navegadores compatibles.

Para qué puedes usarla

Crear un disparador de diálogo modal con un botón que abra el diálogo declarativamente, y un botón de cierre dentro del diálogo que también funcione declarativamente.
Construir un menú popover con un botón de alternancia — sin manejadores de clic, sin gestión de estado.
Crear un widget details/divulgación controlado por un botón externo en lugar del elemento summary.

Casos de uso

Ejemplos prácticos

Ejemplo

Diálogo modal declarativo

Un diálogo de configuración necesita botones de abrir y cerrar. Use commandfor="settings-dialog" command="show-modal" en el botón de abrir y command="close" en el botón de cerrar dentro del diálogo. No se requiere JavaScript para el comportamiento de abrir/cerrar.

Ejemplo

Alternancia de menú popover

Un menú emergente de usuario se abre y cierra con un solo botón. Use commandfor="user-menu" command="toggle-popover". El navegador gestiona el estado del popover — no se necesita seguimiento JavaScript.

Errores comunes

Usar commandfor sin un ID de elemento objetivo coincidente — el botón no hace nada silenciosamente. Siempre verifique que el id objetivo coincida.
Usar un comando que no es compatible con el tipo de destino — show-modal solo funciona en elementos dialog, toggle-popover solo en elementos popover.
Olvidar que los comandos invoker son Baseline 2025 — los navegadores más antiguos necesitan un fallback de manejador de clic JavaScript.

Verificación

Haga clic en el botón de comando y verifique que el elemento objetivo se abra, cierre o alterne correctamente.
Pruebe con JavaScript deshabilitado para confirmar que los comandos integrados funcionan sin scripts.

FAQ

Preguntas sobre HTML Invoker Command Generator

Los comandos invoker funcionan sin JavaScript en absoluto?

Sí, para comandos integrados en elementos dialog, popover y details. El navegador maneja los métodos showModal(), close(), showPopover(), hidePopover() y toggle de forma nativa. Para comandos personalizados, agrega un listener de evento 'command' en el elemento objetivo — un listener maneja todas las invocaciones de comandos.

Cuál es la diferencia entre command y onclick?

command es declarativo — le indica al navegador qué acción realizar en el objetivo. onclick es imperativo — escribe JavaScript para realizar la acción. command funciona sin JavaScript para acciones integradas. También comunica la intención a la tecnología de asistencia: un botón con command="show-modal" anuncia su propósito más claramente que un manejador de clic genérico.

Herramientas relacionadas