Deskripsi
Penjelasan HTML dialog

HTML <dialog> tag digunakan untuk merepresentasikan kotak dialog yang akan muncul untuk mendapatkan perhatian dan interaksi dengan user.

Element <dialog> dimaksudkan untuk mempermudah pembuatan jendela popup dan modal dialog pada sebuah halaman web yang kebanyakan dibuat oleh script (JavaScript).

Element <form> dapat diintegrasikan didalam element <dialog> dengan menyebutkan attribute method="dialog".

Attributes
Atribut HTML Tag <dialog>

open

Menentukkan bahwa element dialog tersebut aktif dan user dapat berinteraksi dengannya secara langsung. Ketika attribute open tidak ditulis, maka dialog box tidak akan ditampilkan secara langsung.

Perlu juga diperhatikan bahwa attribute tabindex tidak boleh digunakan pada element <dialog>.


Global Attributes
Atribut Secara Global (Keseluruhan)

<dialog> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Event Attributes
Atribut event (Peristiwa)

<dialog> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Example
Contoh HTML <dialog> element

<dialog id="dialog2">
  <form method="dialog">
    <label>
     Pilih Jasa Kurir:
      <input name="ekspedisi2" list="kurir2" />
    </label>
    <datalist id="kurir2">
      <label>
        Atau Pilih dari daftar:
        <select name="ekspedisi2">
          <option value=""></option>
          <option>POS Indonesia</option>
          <option>JNE</option>
          <option>TIKI</option>
        </select>
      </label>
    </datalist>
    <menu>
      <button id="cancel" type="reset">Batal</button>
      <button type="submit">Oke</button>
    </menu>
  </form>
</dialog>

Contoh kode diatas dapat dilihat hasilnya pada demo editor di bawah ini:

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo HTML <dialog>
Code Editor