HTML-tools

Gratis HTML Invoker Command Generator

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

Tool laden...

Wat is HTML Invoker Command Generator?

De Invoker Commands API is een declaratieve HTML-functie waarmee knoppen andere elementen kunnen besturen zonder JavaScript. Met het commandfor-attribuut (verwijzend naar de id van een doelelement) en het command-attribuut (specificeren van de actie) kan een knop dialogen openen/sluiten, popovers schakelen, details uit-/inklappen of aangepaste commando-evenementen activeren. Dit vervangt onclick-handlers door declaratieve, toegankelijke HTML.

Snel antwoord

Gebruik de Invoker Commands API voor declaratieve knoppen die dialogen, popovers en details besturen zonder JavaScript. Stel commandfor in op de id van het doelelement en command op de actie (show-modal, toggle-popover, open, close). Ingebouwde commando's werken natively; aangepaste commando's activeren een 'command'-evenement op het doel.

Last updated: 2026-05-28

Beperkingen

Invoker Commands werken alleen voor specifieke doeltypen: dialog (show-modal, close), popover (show-popover, hide-popover, toggle-popover) en details (open, close, toggle). Andere elementen hebben aangepaste command event-handlers nodig.
Browserondersteuning is Baseline 2025: Chrome 117+, Edge 117+, Safari 18+. Firefox-ondersteuning is in ontwikkeling. Oudere browsers hebben een JavaScript click-handler fallback nodig.
Aangepaste commando's (met een aangepaste commandowaarde) activeren een 'command'-evenement maar voeren geen ingebouwd gedrag uit. U moet een JavaScript eventlistener op het doel toevoegen om aangepaste commando's af te handelen.

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

Zo gebruik je deze tool

Voer de doel-element-ID in en selecteer het doeltype (dialog, popover, details of aangepast).
Kies het commando - verschillende doeltypen ondersteunen verschillende commando's (show-modal, toggle-popover, open, enz.).
Stel de knoptekst in. Voeg optioneel de doelelement-template en JS-fallback toe.
Kopieer de gegenereerde HTML. Geen JavaScript is vereist voor ingebouwde commando's in ondersteunende browsers.

Waarvoor je het kunt gebruiken

Maak een modale dialoogtrigger met een knop die de dialoog declaratief opent, en een sluitknop in de dialoog die ook declaratief werkt.
Bouw een popover-menu met een schakelknop - geen click-handlers, geen statusbeheer.
Maak een details/disclosure widget die wordt bestuurd door een externe knop in plaats van het summary-element.

Gebruik

Praktische voorbeelden

Voorbeeld

Declaratieve modale dialoog

Een instellingendialoog heeft open- en sluitknoppen. Gebruik commandfor="settings-dialog" command="show-modal" op de openknop en command="close" op de sluitknop in de dialoog. Geen JavaScript vereist voor het open/sluit-gedrag.

Voorbeeld

Popover menu schakelaar

Een gebruikersmenu-popover opent en sluit met één knop. Gebruik commandfor="user-menu" command="toggle-popover". De browser beheert de popover-status - geen JavaScript-tracking nodig.

Veelgemaakte fouten

commandfor gebruiken zonder een overeenkomende doel-element-ID - de knop doet stil niets. Verifieer altijd dat de doel-ID overeenkomt.
Een commando gebruiken dat niet wordt ondersteund door het doeltype - show-modal werkt alleen op dialog-elementen, toggle-popover alleen op popover-elementen.
Vergeten dat invoker commando's Baseline 2025 zijn - oudere browsers hebben een JavaScript click-handler fallback nodig.

Verificatie

Klik op de commandoknop en verifieer dat het doelelement correct opent, sluit of schakelt.
Test met JavaScript uitgeschakeld om te bevestigen dat ingebouwde commando's werken zonder scripts.

FAQ

Vragen over HTML Invoker Command Generator

Werken invoker commando's zonder enige JavaScript?

Ja, voor ingebouwde commando's op dialog-, popover- en details-elementen. De browser handelt de showModal(), close(), showPopover(), hidePopover() en toggle commando's natively af. Voor aangepaste commando's voegt u een 'command' eventlistener toe op het doelelement - één listener handelt alle command-aanroepen af.

Wat is het verschil tussen command en onclick?

command is declaratief - het vertelt de browser welke actie moet worden uitgevoerd op het doel. onclick is imperatief - u schrijft JavaScript om de actie uit te voeren. command werkt zonder JavaScript voor ingebouwde acties. Het communiceert ook intentie aan ondersteunende technologie: een knop met command="show-modal" kondigt zijn doel duidelijker aan dan een generieke click-handler.

Gerelateerde tools