HTML dialog tag | belajar <dialog> element
Referensi Belajar HTML dialog tag. Tutorial dan panduan mengenai element <dialog>...</dialog>. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <dialog>.
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>
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
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo HTML dialog tag</title>
</head>
<body>
<p>Silahkan, klik tombol dibawah ini untuk menampilkan dialog box.</p>
<!-- contoh dialog box dengan konten form didalamnya -->
<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>
<menu>
<button id="showDialog">Tampilkan Dialog</button>
</menu>
<script>
(function() {
var bukaDialog = document.getElementById('showDialog');
var tutupDialog = document.getElementById('cancel');
// buka atau tampilkan dialog box
bukaDialog.addEventListener('click', function() {
document.getElementById('dialog2').showModal();
});
// tutup dialog box
tutupDialog.addEventListener('click', function() {
document.getElementById('dialog2').close();
});
})();
</script>
</body>
</html>
SHARE