HTML invoker commands: command va commandfor bilan dialog va popover'ni boshqarish

Qisqacha: Invoker commands — tugmaga "qaysi elementga nima qilish kerak"ligini HTML'da aytish usuli. commandfor boshqariladigan elementning id sini, command esa buyruq nomini oladi: show-modal, close, request-close, toggle-popover, show-popover, hide-popover. Bu 2025-yil dekabridan hamma asosiy brauzerlarda ishlaydi (Baseline Newly available). Eski brauzerlarda tugma hech narsa qilmaydi, shuning uchun muhim joyda zaxira kerak.

Bu darsda

• commandfor va command bilan dialog va popover'ni JavaScript'siz boshqara olasiz.
• Oltita tayyor buyruqni va ular qaysi elementga tegishli ekanini bilasiz.
• close va request-close farqini tushuntira olasiz.
• popovertarget va commandfor dan qaysi birini tanlashni bilasiz.
• -- bilan boshlanadigan maxsus buyruq va interestfor nima ekanini tanib olasiz.

Oldin bilishingiz kerak: Popover API, dialog: native modal oyna, Tugmalar va yuborish, Zamonaviy forma imkoniyatlari.

1. Nega bu kerak?

O'tgan ikki darsda tugmalar ikki xil "tilda" gapirdi:

• popover uchun — popovertarget va popovertargetaction;
• modal dialog uchun — commandfor va command, biz ularni "keyinroq batafsil" deb qoldirgan edik.

2025-yilgacha HTML'da faqat birinchisi bor edi. Modal oynani ochish uchun esa albatta JavaScript yozish kerak edi — hatto eng oddiy "Ha / Yo'q" oynasi uchun ham. Har bir saytda bir xil ikki qator: tugmani top, bosilganda showModal() ni chaqir.

Brauzer ishlab chiquvchilar buni umumiy qilishga qaror qildi: tugma istalgan elementga istalgan buyruq bera olsin. Natija — invoker commands (chaqiruvchi buyruqlar).

Hayotdan o'xshatish: televizor pulti. Pult — tugma. commandfor — qaysi televizorga qaratilgani. command — pultdagi qaysi tugma bosilgani: "yoq", "o'chir", "ovozni ko'tar". Bitta pult tizimi — har xil qurilmalar.

2. Ikki atribut

2.1 commandfor va command

<button type="button" commandfor="bekor-oyna"
        command="show-modal">
  Bronni bekor qilish
</button>

<dialog id="bekor-oyna">
  <p>Bronni bekor qilasizmi?</p>
  <button type="button" commandfor="bekor-oyna"
          command="close">
    Yo'q, qoldirish
  </button>
</dialog>

• commandfor — nishon: boshqariladigan elementning id si. U sahifaning istalgan joyida tura oladi.
• command — buyruq: nishonga nima qilish kerak.

Birinchi tugma oynani modal qilib ochadi. Ikkinchisi — oyna ichida — uni yopadi. Bitta qator JavaScript yo'q.

Bu atributlar faqat button elementida ishlaydi. a, div yoki span ga yozsangiz, hech narsa bo'lmaydi.

2.2 Brauzer holati

Safari oxirgi bo'lib qo'shgani uchun invoker commands 2025-yil 12-dekabrdan Newly available. "Widely available" bo'lishiga taxminan 2028-yil o'rtasigacha vaqt bor. Bu 2026-yil sentabr holati — ishlatishdan oldin MDN yoki Web Features Explorer'da qayta tekshiring (Zamonaviy forma imkoniyatlari darsidagi usul).

Bo'sh joyni to'ldiring: boshqariladigan elementning id si qaysi atributga yoziladi?

3. Tayyor buyruqlar

3.1 Oltita buyruq

Buyruq nomlari kichik harf va chiziqcha bilan yoziladi: show-modal. showModal yoki show_modal deb yozsangiz, brauzer buyruqni tanimaydi va jimgina hech narsa qilmaydi.

Buyruq nishonga mos bo'lishi kerak. show-modal ni popover'ga yoki toggle-popover ni oddiy dialog ga yuborsangiz — yana hech narsa bo'lmaydi. Nom mos kelmasa ham, nishon noto'g'ri bo'lsa ham xato xabari chiqmaydi. Shuning uchun har yangi tugmani darhol bosib sinab ko'ring.

3.2 Popover buyruqlari

Popover API darsidagi "Ish vaqti" oynasini yangi tilda yozamiz:

<button type="button" commandfor="ish-vaqti"
        command="toggle-popover">
  Ish vaqti
</button>

<aside id="ish-vaqti" popover>
  <p>Har kuni 7:00 dan 23:00 gacha.</p>
  <button type="button" commandfor="ish-vaqti"
          command="hide-popover">
    Yopish
  </button>
</aside>

Solishtiring:

Natija bir xil. Popover'ning o'zi — auto, manual yoki hint — o'zgarmaydi.

Tekshirib ko'ring: Tugmada commandfor="menyu" command="show-modal", menyu esa <ul id="menyu" popover>. Tugma bosilganda nima bo'ladi?

4. close va request-close

4.1 Farqi

Ikkala buyruq ham oynani yopadi. Farq — yopilishdan oldin nima bo'lishida.

• close — darhol yopadi. Hech kimdan so'ramaydi.
• request-close — avval "yopmoqchiman" degan signal beradi. Bu signal Esc bosilgandagi bilan bir xil: dialog darsidagi yopish so'rovi. JavaScript uni eshitib, yopishni to'xtata oladi. Hech kim to'xtatmasa — oyna yopiladi.

Qachon kerak? Oyna ichida mehmon uzun izoh yozdi deylik. U "×" ni bosdi. Sahifa "Yozganlaringiz saqlanmaydi, baribir yopasizmi?" deb so'rashi mumkin. Buni JavaScript qiladi — request-close esa unga imkon beradi.

JavaScript yozilmagan sahifada ikkalasi bir xil ishlaydi. Qoida: oyna ichida o'chib ketishi mumkin bo'lgan narsa (to'ldirilgan forma) bo'lsa — request-close, oddiy xabar bo'lsa — close.

request-close biroz keyinroq qo'shilgan: Chrome va Edge 139, Firefox 144 va Safari 26.2 dan. Ya'ni Safari va Firefox'da u close bilan birga keldi.

4.2 value: oynaning javobi

Tugmaga value yozsangiz, u oynaning javobi sifatida saqlanadi — xuddi form method="dialog" dagi kabi:

<dialog id="tasdiq-oyna">
  <p>18:00 dagi bron bekor qilinsinmi?</p>
  <button type="button" commandfor="tasdiq-oyna"
          command="close" value="ha">
    Ha
  </button>
  <button type="button" commandfor="tasdiq-oyna"
          command="close" value="yoq" autofocus>
    Yo'q
  </button>
</dialog>

Qaysi tugma bosilganini JavaScript returnValue orqali bilib oladi. Lekin diqqat: bu javob serverga ketmaydi. Bron haqiqatan bekor qilinishi kerak bo'lsa, "Ha" — oddiy forma yuborish tugmasi bo'lishi kerak. dialog darsidagi «Bahor» oynasini eslang: u yerda "Ha" post bilan serverga ketardi.

Tekshirib ko'ring: Oynada izoh yozish maydoni bor. "×" tugmasiga close yoki request-close dan qaysi biri yaxshiroq va nega?

5. popovertarget yoki commandfor?

Popover uchun ikkalasi ham ishlaydi. Qaysi birini tanlash kerak?

2026-yil uchun oddiy qoida:

• Popover — popovertarget hali biroz ko'proq brauzerda ishlaydi. Ikkalasi ham to'g'ri.
• Modal dialog — faqat commandfor va command="show-modal". popovertarget modal ocha olmaydi.
• Bitta loyihada bitta uslub — jamoangiz qaysi birini tanlagan bo'lsa, o'sha.

Keyingi yillarda commandfor asosiy usulga aylanishi kutilmoqda: u bitta tizimda hamma narsani boshqaradi.

6. Maxsus buyruqlar: --nom

6.1 G'oya

Oltita tayyor buyruqdan tashqari o'zingiz buyruq o'ylab topishingiz mumkin. Uning nomi ikki chiziqcha bilan boshlanadi:

<button type="button" commandfor="osh-karta"
        command="--savatga">
  Savatga qo'shish
</button>

<article id="osh-karta">
  <h2>Osh</h2>
  <p>35 000 so'm</p>
</article>

Brauzer --savatga ni bilmaydi va o'zi hech narsa qilmaydi. U faqat nishonga — osh-karta ga — "sizga --savatga buyrug'i keldi" degan xabar (hodisa) yuboradi. Uni JavaScript tinglaydi va ishni bajaradi.

Ikki chiziqcha nima uchun? Kelajakda brauzerga yangi tayyor buyruqlar qo'shiladi. Sizning nomingiz ular bilan to'qnashmasligi uchun maxsus buyruqlar doim -- bilan boshlanadi. -- siz o'ylab topilgan nom (savatga) umuman ishlamaydi.

6.2 JavaScript tomoni (oldindan tanishuv)

Hozir tushunish shart emas — faqat ko'rib qo'ying. JavaScript'ni JavaScript nima darsidan boshlaymiz:

const karta = document.querySelector("#osh-karta");

karta.addEventListener("command", (hodisa) => {
  if (hodisa.command === "--savatga") {
    console.log("Osh savatga qo'shildi");
  }
});

Bu yerdagi command — nishonga keladigan hodisa nomi. hodisa.command esa qaysi buyruq kelganini aytadi. Hodisalarni JavaScript qismida, dialog va popover bilan ishlashni esa dialog va Popover API JS'dan darsida to'liq o'rganamiz.

Nega bu qulay? HTML kimga nima buyruq berilishini aniq ko'rsatadi. JavaScript'da esa har tugmani qidirib topish shart emas — nishon o'ziga kelgan buyruqlarni o'zi tinglaydi.

7. Eski brauzerlar va zaxira

7.1 Nima buziladi

Invoker commands'ni tanimaydigan brauzer (Chrome 135 dan, Firefox 144 dan, Safari 26.2 dan eskisi) commandfor va command ni e'tiborsiz qoldiradi. Oqibatlari:

• Tugma hech narsa qilmaydi. Oyna ochilmaydi, popover chiqmaydi.
• Forma ichida type siz tugma formani yuboradi. Yangi brauzerda commandfor li tugma yuborish tugmasi emas. Eski brauzer esa buni bilmaydi va uni oddiy submit deb biladi (Tugmalar va yuborish). Yarim to'ldirilgan bron serverga ketadi.

Ikkinchisining davosi oddiy: har doim type="button". Birinchisi uchun esa reja kerak.

7.2 Uch yo'l

1. Popover uchun — popovertarget. U 2025-yil yanvaridan Baseline, ya'ni biroz ko'proq qurilmada ishlaydi.
2. Polyfill. Polyfill — brauzerda yetishmayotgan imkoniyatni JavaScript bilan "to'ldirib" beradigan kichik kod. Invoker commands uchun npm'da invokers-polyfill paketi bor. U eski brauzerda commandfor ni o'zi ishlatadi, yangisida esa hech narsa qilmaydi. Polyfill g'oyasiga Brauzer mosligi va progressive enhancement darsida qaytamiz; uni loyihaga npm bilan ulashni esa browserslist darsida o'rganamiz.
3. Muhim ishga ikkinchi yo'l. Oyna ochilmasa ham mehmon maqsadiga yeta olsin. Masalan, bron kartasida "Bekor qilish uchun qo'ng'iroq qiling: +998 90 000 00 00" degan oddiy matn ham tursin.

Zamonaviy forma imkoniyatlari darsidagi progressive enhancement qoidasi bu yerda ham amal qiladi: yangi imkoniyat bo'lmasa, sahifa qulayligini yo'qotishi mumkin, lekin asosiy ish buzilmasligi kerak.

Tekshirib ko'ring: Mehmonning iPhone'ida Safari 26.0. U "Bronni bekor qilish" tugmasini bosdi (command="show-modal"). Nima bo'ladi va buni qanday yumshatasiz?

8. interestfor: sichqoncha olib kelganda (eksperimental)

Keyingi qadam ham muhokama qilinmoqda: tugma yoki havola bosilganda emas, ustiga sichqoncha olib kelinganda yoki fokus tushganda popover ochilsin. Bu tooltip'lar uchun juda qulay. Atribut nomi — interestfor ("qiziqish bildirilganda"):

<a href="menyu.html#osh" interestfor="osh-izoh">Osh</a>
<p id="osh-izoh" popover="hint">
  Guruch, sabzi, mol go'shti, no'xat.
</p>

interestfor hozircha faqat Chrome va Edge'da (142 dan) bor. Firefox va Safari'da yo'q — Limited availability, amalda eksperimental. Eski brauzerda havola shunchaki havola bo'lib qoladi, shuning uchun zarari yo'q. Lekin unga muhim ma'lumotni ishonib topshirmang: telefonda "sichqoncha olib kelish" degan narsa yo'q. Tooltip'larni CSS bilan birga Tooltip, dropdown va toast darsida quramiz.

9. «Bahor»: bitta tizimda hammasi

"Mening bronlarim" sahifasini invoker commands bilan qayta yozamiz:

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Mening bronlarim — Choyxona «Bahor»</title>
</head>
<body>
  <header>
    <p>Choyxona «Bahor»</p>
    <button type="button" commandfor="ish-vaqti"
            command="toggle-popover">
      Ish vaqti
    </button>
  </header>

  <aside id="ish-vaqti" popover
         aria-labelledby="ish-vaqti-sarlavha">
    <h2 id="ish-vaqti-sarlavha">Ish vaqti</h2>
    <p>Har kuni 7:00 dan 23:00 gacha.</p>
  </aside>

  <main>
    <h1>Mening bronlarim</h1>
    <article>
      <h2>28-sentabr, 18:00 — 4 kishi</h2>
      <button type="button" commandfor="bekor-oyna"
              command="show-modal">
        Bronni bekor qilish
      </button>
      <p>Yoki qo'ng'iroq qiling: +998 90 000 00 00.</p>
    </article>

    <dialog id="bekor-oyna" aria-labelledby="bekor-sarlavha">
      <h2 id="bekor-sarlavha">Bronni bekor qilasizmi?</h2>
      <form action="https://example.com/bron/bekor"
            method="post">
        <input type="hidden" name="bron_id" value="1024">
        <label for="sabab">Sabab (ixtiyoriy)</label>
        <textarea id="sabab" name="sabab" rows="3"></textarea>
        <button type="submit">Ha, bekor qilish</button>
      </form>
      <button type="button" commandfor="bekor-oyna"
              command="request-close" autofocus>
        Yo'q, qoldirish
      </button>
    </dialog>
  </main>
</body>
</html>

Qarorlar:

• Bitta uslub — popover ham, dialog ham commandfor bilan boshqariladi.
• request-close — oynada "Sabab" maydoni bor. Keyinchalik JavaScript "yozganingiz o'chadi" deb so'rashi mumkin.
• "Yo'q, qoldirish" formadan tashqarida — u formaga tegishli emas, shuning uchun formmethod="dialog" ham, formnovalidate ham kerak emas.
• Telefon raqami ochiq matnda — eski brauzerda oyna ochilmasa ham, mehmon bronni bekor qila oladi.
• Hamma tugmada type — eski brauzerda ham forma tasodifan yuborilmaydi.

Kod html-validate dan xatosiz o'tadi.

10. Ko'p uchraydigan xatolar

10.1 Buyruq nomida xato

<!-- ❌ showModal emas, show-modal -->
<button type="button" commandfor="bekor-oyna"
        command="showModal">
  Bronni bekor qilish
</button>

Tugma hech narsa qilmaydi. Brauzer ham, html-validate ham jim. JavaScript'dagi showModal() bilan adashtirish oson. Tuzatish: HTML buyruqlari — kichik harf va chiziqcha: show-modal, toggle-popover.

10.2 Buyruq nishonga mos emas

show-modal — faqat dialog ga, toggle-popover — faqat popover atributli elementga. Aralashtirsangiz, jimgina hech narsa bo'lmaydi. Tuzatish: 3-bo'limdagi jadvalga qarang.

10.3 Maxsus buyruq -- siz

command="savatga" — tanilmagan qiymat, brauzer uni e'tiborsiz qoldiradi va nishonga xabar ham yubormaydi. Tuzatish: command="--savatga".

10.4 commandfor havolada

<a href="#" commandfor="..."> ishlamaydi va Tugma yoki havola darsidagi href="#" antipatterniga ham tushadi. Tuzatish: harakat — button, sahifaga o'tish — a.

10.5 type siz tugma forma ichida

Yangi brauzerda ishlaydi, eskisida formani yuboradi. Siz o'z kompyuteringizda xatoni ko'rmaysiz — mehmon ko'radi. Tuzatish: type="button", har doim.

11. Mashqlar

1-mashq (oson): Yangi tilga o'giring

Quyidagi kodni commandfor va command bilan qayta yozing. Natija o'zgarmasin.

<button type="button" popovertarget="manzil"
        popovertargetaction="show">
  Manzil
</button>
<p id="manzil" popover>Toshkent, Chilonzor, 7-mavze.</p>

<button type="button" commandfor="manzil"
        command="show-popover">
  Manzil
</button>
<p id="manzil" popover>Toshkent, Chilonzor, 7-mavze.</p>

2-mashq (o'rta): Uchta xatoni toping

Jasur "Menyu haqida fikr" oynasini yozdi, lekin hech narsa ishlamayapti. Kodda uchta xato bor — toping va tuzating.

<!-- ❌ bu kodda xatolar bor -->
<a href="#" commandfor="fikr-oyna" command="show-modal">
  Fikr qoldirish
</a>

<dialog id="fikr-oyna">
  <p>Menyu sizga yoqdimi?</p>
  <button type="button" commandfor="fikr_oyna"
          command="close">
    Yopish
  </button>
</dialog>

<ul id="taomlar" popover>
  <li>Osh</li>
  <li>Manti</li>
</ul>
<button type="button" commandfor="taomlar"
        command="--toggle">
  Taomlar
</button>

Eslatma: 3-bo'limdagi jadvalni va 10-bo'limdagi xatolarni solishtiring.

<button type="button" commandfor="fikr-oyna"
        command="show-modal">
  Fikr qoldirish
</button>

<dialog id="fikr-oyna">
  <p>Menyu sizga yoqdimi?</p>
  <button type="button" commandfor="fikr-oyna"
          command="close">
    Yopish
  </button>
</dialog>

<ul id="taomlar" popover>
  <li>Osh</li>
  <li>Manti</li>
</ul>
<button type="button" commandfor="taomlar"
        command="toggle-popover">
  Taomlar
</button>

3-mashq (qiyin): Stollar xaritasi

«Bahor» uchun "Stol tanlash" sahifasini yasang:

1. "Stollar xaritasi" tugmasi modal oynani ochadi.
2. Oyna ichida "Belgilar nimani anglatadi?" tugmasi manual popover'ni ochib-yopadi: "Yashil — bo'sh, qizil — band".
3. Oynada "Yopish" tugmasi bor.
4. Hammasi commandfor bilan.

Keyin jadval tuzing: Chrome 150 va Safari 26.0 da har tugma nima qiladi?

Eslatma: popover dialog ichida ham ishlaydi; manual popover'ga o'z yopish yo'li kerak (Popover API).

<button type="button" commandfor="xarita-oyna"
        command="show-modal">
  Stollar xaritasi
</button>

<dialog id="xarita-oyna" aria-labelledby="xarita-sarlavha">
  <h2 id="xarita-sarlavha">Stollar xaritasi</h2>
  <p>Ayvon: 1–8-stollar. Zal: 9–20-stollar.</p>
  <button type="button" commandfor="belgilar"
          command="toggle-popover">
    Belgilar nimani anglatadi?
  </button>
  <p id="belgilar" popover="manual">
    Yashil — bo'sh, qizil — band.
  </p>
  <button type="button" commandfor="xarita-oyna"
          command="close">
    Yopish
  </button>
</dialog>

12. Real ishda

• Kamroq JavaScript. Ilgari har modal va menyu uchun kichik skript yozilardi. Invoker commands bilan bu kodning katta qismi HTML atributlariga aylanadi. Sahifa tezroq yuklanadi va JavaScript xatosi bo'lsa ham asosiy tugmalar ishlaydi.
• Freymvorklarda. React va boshqa freymvorklar (kursda o'rganamiz) bu atributlarni oddiy HTML atributi sifatida uzatadi. Tayyor dialog + commandfor ba'zi joylarda kutubxonadagi modal komponentini almashtiradi.
• Brauzer siyosati. Newly available imkoniyat ko'p kompaniyalarda polyfill bilan ishlatiladi: brauzer statistikasiga qarab qaror qilinadi.
• Intervyuda so'raladi: "Modal oynani JavaScript'siz ochsa bo'ladimi?" 2026-yil uchun javob: "Ha, commandfor va command="show-modal" bilan. Bu 2025-yil dekabridan Baseline, eski brauzerlar uchun invokers-polyfill".

Xulosa

• commandfor — nishonning id si, command — buyruq; faqat button da ishlaydi.
• Tayyor buyruqlar: dialog uchun show-modal, close, request-close; popover uchun toggle-popover, show-popover, hide-popover.
• request-close — Esc kabi yopish so'rovi, uni JavaScript to'xtata oladi; close — darhol yopadi; value oynaning javobi bo'ladi, lekin serverga ketmaydi.
• --nom — maxsus buyruq: nishonga command hodisasi keladi, ishni JavaScript bajaradi.
• 2025-yil dekabridan Newly available; eski brauzer uchun type="button", popovertarget, polyfill yoki ikkinchi yo'l.
• interestfor — hover va fokus bilan ochish, hozircha faqat Chrome va Edge'da.

Keyingi dars: Global atributlar — id, class, hidden, title, data-* kabi istalgan elementda ishlaydigan atributlar va ularning har birining aniq vazifasi.

Manbalar

• MDN: "Invoker Commands API", "button: command va commandfor atributlari", "CommandEvent" — developer.mozilla.org
• MDN: "Using interest invokers" — developer.mozilla.org
• Web Features Explorer: "invoker-commands", "interest-invokers" — web-platform-dx.github.io/web-features-explorer
• WHATWG HTML Living Standard: "The button element" (commandfor, command) — html.spec.whatwg.org
• npm: invokers-polyfill — npmjs.com