`<dialog>`: Elemen dialog

<dialog>: Elemen dialog

• Bawaan: Elemen <dialog> merepresentasikan elemen interaktif seperti dialog modal atau non-modal, peringatan, inspector, subwindow, dan lainnya. Tersedia di sebagian besar browser sejak Maret 2022.

Atribut

• open: Menunjukkan bahwa dialog aktif dan dapat berinteraksi. Jika atribut open tidak disetel, elemen tidak terlihat oleh pengguna. Disarankan menggunakan metode .show() atau .showModal().

Catatan penggunaan

• Elemen HTML <form> dapat menggunakan atribut method="dialog" untuk menutup dialog.
• Pseudo-elemen CSS ::backdrop dapat digunakan untuk menata latar belakang dialog modal.
• Atribut autofocus harus ditambahkan ke elemen yang harus langsung menerima interaksi saat dialog dibuka.
• Perlu berhati-hati agar tidak menambahkan atribut tabindex ke elemen <dialog>.

Aksesibilitas

• Saat mengimplementasikan dialog, penting untuk mengatur fokus pengguna dengan tepat.
• Saat membuka dialog dengan metode showModal(), fokus akan ditempatkan pada elemen pertama yang dapat menerima fokus.
• Cara paling andal adalah menyertakan tombol eksplisit agar semua pengguna dapat menutup dialog.

Contoh

Dialog HTML saja

• Contoh membuat dialog non-modal hanya dengan HTML. Karena atribut open, dialog terbuka saat halaman dimuat.

Membuat dialog modal

• Contoh membuka dialog modal menggunakan metode .showModal(). Dapat ditutup dengan tombol Esc atau tombol "Close" di dalam dialog.

Menangani nilai kembalian dialog

• Contoh menggunakan returnValue dari elemen <dialog>. Dialog modal dapat ditutup menggunakan formulir.

Menutup dialog dengan input formulir wajib

• Jika formulir di dalam dialog memiliki input wajib, dialog dapat ditutup menggunakan atribut formnovalidate.

Animasi dialog

• Dialog dapat dianimasikan dengan menganimasikan properti display dari elemen <dialog>.

Ringkasan teknis

• Kategori konten: Konten alur, root sectioning
• Konten yang diizinkan: Konten alur
• Peran ARIA implisit: dialog
• Antarmuka DOM: HTMLDialogElement

Spesifikasi

• Standar HTML # the-dialog-element

Kompatibilitas browser

• Elemen <dialog> dan atribut open didukung sepenuhnya di sebagian besar browser utama.

Lihat juga

• Antarmuka HTMLDialogElement
• Event close dan cancel pada HTMLDialogElement
• Atribut open pada HTMLDialogElement
• Atribut global inert pada elemen HTML
• Pseudo-elemen CSS ::backdrop