files/id/web/html/element/dialog/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165

---
title: '<dialog>: The Dialog element'
slug: Web/HTML/Element/dialog
translation_of: Web/HTML/Element/dialog
---
<p>Elemen<strong> <code>&lt;dialog&gt;</code> </strong>menampilkan sebuah kotak dialog atau komponen interaktif lainnya seperti halnya inspektor atau jendela.</p>

<p> </p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Kategori konten</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Alur Konten</a>, <a href="/en-US/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">bagian akar</a></td>
  </tr>
  <tr>
   <th scope="row">Konten yang diijinkan</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Alur konten</a></td>
  </tr>
  <tr>
   <th scope="row">Penanda kesalahan</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Tingkatan yang diijinkan</th>
   <td>Setiap elemen yang menerima <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">alur konten</a></td>
  </tr>
  <tr>
   <th scope="row">Peran Aria yang diijinkan</th>
   <td>{{ARIARole("alertdialog")}}</td>
  </tr>
  <tr>
   <th scope="row">Antarmuka DOM</th>
   <td>{{domxref("HTMLDialogElement")}}</td>
  </tr>
 </tbody>
</table>

<p><strong><span style="">Atribut</span></strong></p>

<p>Elemen ini memiliki <a href="/en-US/docs/Web/HTML/Global_attributes">atribut global</a>. Penggunaan atribut <code>tabindex</code> harus dihindari pada elemen <code>&lt;dialog&gt;</code> .</p>

<dl>
 <dt>{{htmlattrdef("open")}}</dt>
 <dd>Menandakan bahwa dialog telah aktif dan dapat digunakan. Ketika atribut <code>open</code> belum diatur, maka dialog tidak akan tampil kepada pengguna.</dd>
</dl>

<h2 id="Catatan_penggunaan">Catatan penggunaan</h2>

<p> </p>

<ul>
 <li>Elemen <code>&lt;form&gt;</code> dapat diintegrasikan didalam dialog dengan menspesifikasikannya menggunakan atribut <code>method="dialog"</code>. Ketika isi form dikirim, dialog akan tertutup dengan sebuah atribut <code>returnValue</code> dari <code>value</code> dari tombol kirim yang digunakan.</li>
 <li>Elemen-pseudo CSS {{cssxref('::backdrop')}} dapat digunakan untuk menghiasi elemen <code>&lt;dialog&gt;</code>, sebagai contoh untuk membuat redup konten yand tidak boleh diakses saat dialog sedang aktif.</li>
</ul>

<h2 id="Contoh">Contoh</h2>

<h3 id="Contoh_sederhana">Contoh sederhana</h3>

<pre class="brush: html">&lt;dialog open&gt;
  &lt;p&gt;Greetings, one and all!&lt;/p&gt;
&lt;/dialog&gt;
</pre>

<h3 id="Contoh_lanjutan">Contoh lanjutan</h3>

<p>Pada contoh ini akan terbuka kotak dialog saat tombol "Update details" diklik.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;!-- Simple pop-up dialog box, containing a form --&gt;
&lt;dialog open id="favDialog"&gt;
  &lt;form method="dialog"&gt;
    &lt;section&gt;
      &lt;p&gt;&lt;label for="favAnimal"&gt;Favorite animal:&lt;/label&gt;
      &lt;select id="favAnimal"&gt;
        &lt;option&gt;&lt;/option&gt;
        &lt;option&gt;Brine shrimp&lt;/option&gt;
        &lt;option&gt;Red panda&lt;/option&gt;
        &lt;option&gt;Spider monkey&lt;/option&gt;
      &lt;/select&gt;&lt;/p&gt;
    &lt;/section&gt;
    &lt;menu&gt;
      &lt;button id="cancel" type="reset"&gt;Cancel&lt;/button&gt;
      &lt;button type="submit"&gt;Confirm&lt;/button&gt;
    &lt;/menu&gt;
  &lt;/form&gt;
&lt;/dialog&gt;

&lt;menu&gt;
  &lt;button id="updateDetails"&gt;Update details&lt;/button&gt;
&lt;/menu&gt;
</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">(function() {
  var updateButton = document.getElementById('updateDetails');
  var cancelButton = document.getElementById('cancel');
  var favDialog = document.getElementById('favDialog');

  // Update button opens a modal dialog
  updateButton.addEventListener('click', function() {
    favDialog.showModal();
  });

  // Form cancel button closes the dialog box
  cancelButton.addEventListener('click', function() {
    favDialog.close();
  });
})();
</pre>

<h3 id="Hasil">Hasil</h3>

<p>{{EmbedLiveSample("Contoh_lanjutan", "100%", 300)}}</p>

<h2 id="Spesifikasi">Spesifikasi</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spesifikasi</th>
   <th scope="col">Status</th>
   <th scope="col">Keterangan</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
   <td>{{Spec2('HTML5.2')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Kompatibilitas_browser">Kompatibilitas browser</h2>

<div class="hidden">
<p>Tabel kompatibilitas pada halaman ini dihasilkan dari struktur data.Jika ingin berkontribusi untuk data, silakan kunjungi <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> dan kirimkan kami <em>pull request</em>.</p>
</div>

<p>{{Compat("html.elements.dialog")}}</p>

<h2 id="Polyfills">Polyfills</h2>

<p>Sertakan polyfill ini untuk menyediakan dukungan terhadap <em>browser</em> lawas</p>

<p><a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a></p>

<h2 id="Lihat_juga">Lihat juga</h2>

<ul>
 <li>The {{event("close")}} event</li>
 <li>The {{event("cancel")}} event</li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</li>
</ul>

<div>{{HTMLRef}}</div>