commandfor și command (invoker commands) în HTML

<button commandfor="fereastra" command="show-modal">Deschide</button>
<dialog id="fereastra">...</dialog>

Ce face commandfor și command (invoker commands)

Atributul commandfor de pe <button> primește id-ul elementului controlat, iar command spune ce acțiune să facă. Butonul devine astfel o telecomandă pentru un <dialog> sau pentru un element cu popover, fără niciun onclick.

Comenzile predefinite sunt show-modal, close și request-close pentru <dialog>, respectiv show-popover, hide-popover și toggle-popover pentru popover. Browserul leagă automat și informațiile de accesibilitate (de exemplu starea deschis/închis).

Poți inventa și comenzi proprii, cu nume care încep cu două cratime (--rotire). La clic, elementul țintă primește evenimentul command, pe care îl tratezi în JavaScript. Funcția este Baseline din decembrie 2025 (Chrome 135, Firefox 144, Safari 26.2); request-close merge din Chrome 139.

Atribute

Atribut	Descriere
commandfor	Id-ul elementului controlat (un <dialog>, un popover sau orice element, pentru comenzi proprii).
show-modal	Deschide dialogul ca fereastră modală, ca showModal().
close	Închide dialogul. Valoarea butonului ajunge în dialog.returnValue.
request-close	Cere închiderea dialogului; se declanșează evenimentul cancel, care poate opri închiderea.
show-popover / hide-popover / toggle-popover	Arată, ascunde sau comută un element cu atributul popover.
--nume	Comandă proprie; elementul țintă primește un eveniment command cu event.command = "--nume".

Exemple

Exemplul 1: Fereastră de confirmare deschisă și închisă doar din HTML

Niciun rând de JavaScript: butoanele controlează dialogul prin id.

<button commandfor="confirmare" command="show-modal">Șterge contul</button>

<dialog id="confirmare">
  <p>Sigur vrei să ștergi contul Anei Popescu?</p>
  <button commandfor="confirmare" command="close" value="nu">Renunță</button>
  <button commandfor="confirmare" command="close" value="da">Da, șterge</button>
</dialog>

Ce afișează browserul

Clic pe „Șterge contul”: dialogul apare în centru, pagina din spate se întunecă. Clic pe „Renunță” sau tasta Escape: dialogul se închide.

Exemplul 2: Meniu popover comutat de un buton

toggle-popover deschide meniul la primul clic și îl închide la al doilea.

<button commandfor="meniu-cont" command="toggle-popover">Contul meu</button>
<div id="meniu-cont" popover>
  <a href="/comenzi/">Comenzile mele</a>
  <a href="/iesire/">Ieșire</a>
</div>

Ce afișează browserul

Meniul apare deasupra paginii la clic pe buton și dispare la al doilea clic, la Escape sau la clic în afara lui.

Exemplul 3: O comandă proprie tratată în JavaScript

Numele comenzii începe cu --. Scriptul ascultă evenimentul command pe elementul țintă.

<button commandfor="poza" command="--rotire">Rotește poza</button>
<img id="poza" src="copou.jpg" alt="Parcul Copou">

<script>
  const poza = document.getElementById("poza");
  let unghi = 0;
  poza.addEventListener("command", (event) => {
    if (event.command === "--rotire") {
      unghi += 90;
      poza.style.rotate = unghi + "deg";
    }
  });
</script>

Ce afișează browserul

Fiecare clic pe buton rotește fotografia cu încă 90°.

Greșeli frecvente

• Comandă proprie fără -- la început (command="rotire"): browserul o ignoră și nu trimite evenimentul.
• commandfor cu un id greșit sau cu un element din alt document (de exemplu dintr-un <iframe>): butonul nu face nimic.
• Folosirea pe site-uri care trebuie să meargă și în browsere vechi fără o rezervă în JavaScript: în Safari mai vechi de 26.2, butonul nu face nimic.

Comenzi înrudite

• <dialog>: Element nativ pentru ferestre modale, pop-up-uri și alerte, cu fundal întunecat (backdrop) și închidere din tasta Escape.
• <button>: Element clicabil pentru declanșarea trimiterii formularelor sau a unor acțiuni JavaScript în pagină.
• Atributele popover și popovertarget: Creează un popover nativ, deschis și închis de un buton fără JavaScript, afișat deasupra restului paginii.
• <dialog closedby>: Atributul closedby alege cum se poate închide un dialog: cu clic în afara lui și Escape, doar cu Escape sau doar din cod.