HTML <dialog> tagS2C Home   « HTML <dialog> tag

Definition

The <dialog> tag represents part of a HTML document that the user can interact with.

The <dialog> tag was introduced in HTML5.

Examples


<dialog>closed dialog window</dialog>
<dialog open>open dialog window</dialog>
closed dialog window open dialog window


In the examples above we are creating two dialog elements, we only see the open one.

Attributes

The following attributes can be used with the <dialog> tag.


<dialog> Specific Attributes
Attribute Value Description Example
openempty string or openSpecifies whether the information in the <dialog> tag is open or closed. 

<dialog open>Dialog text</dialog>
<dialog open="open">Dialog text</dialog>
<dialog> Global Attributes
Attribute Description Example
Common
classSpecifies a classname for the element allowing you to apply the style of the predefined class to the content. 

<dialog class="name">Dialog text</dialog>
idSpecifies a unique id for the element allowing you to apply the style of the predefined id to the content. 

<dialog id="name">Dialog text</dialog>
styleSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<dialog style="color:red;">Dialog text</dialog>
titleSpecifies an inline style for the element allowing you to apply the style to the content. 

<dialog title="Content info">Dialog text</dialog>
Keyboard
accesskeySpecifies a keyboard shortcut to associate with the element. 

<dialog accesskey="a">Dialog text</dialog>
tabindexSpecifies a tab order for the element. 

DO NOT USE
Language
dirSpecifies the directional flow of the content. 

<!-- The text will flow from left to right -->
<dialog dir="ltr">Dialog text</dialog>
<!-- The text will flow from right to left -->
<dialog dir="rtl">Dialog text</dialog>
langSpecifies a language code for the content of the element. 

<dialog lang="en">Dialog text</dialog>
spellcheckSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<!-- Valid values true and false. -->
<!-- Default inherited / browser specific. -->
<dialog spellcheck="true">Dialog text</dialog>
translateSpecifies an inline style for the element allowing you to apply the style to the content. 

<!-- Valid values yes and no. -->
<!-- Default yes. -->
<dialog translate="no">Dialog text</dialog>
Miscellaneous
contenteditableSpecifies whether the content of the element is editable. 

<!-- Valid values true and false. -->
<!-- Default inherited. -->
<dialog contenteditable="true">Dialog text</dialog>
draggableSpecifies whether the element is draggable. 

<!-- Valid values true and false. -->
<!-- Default browser specific. -->
<dialog draggable="true">Dialog text</dialog>
hiddenSpecifies whether the element is not yet, or no longer, relevant. 

<!-- Valid values an empty string or hidden -->
<dialog hidden>Dialog text</dialog> 
<dialog hidden="hidden">Dialog text</dialog>
<dialog> Event Attributes
Attribute Description Example
Document Element
oncopyThe script to be run when the user copies the content of an element. 

 <!-- Executes go() function -->
<dialog oncopy="go()">Dialog text</dialog>
oncutThe script to be run when the user cuts the content of an element. 

 <!-- Executes go() function -->
<dialog oncut="go()">Dialog text</dialog>
onpasteThe script to be run when the user pastes some content into an element. 

 <!-- Executes go() function -->
<dialog onpaste="go()">Dialog text</dialog>
Drag and Drop
ondragThe script to be run when an element is dragged. 

 <!-- Executes go() function -->
<dialog ondrag="go()">Dialog text</dialog>
ondragendThe script to be run when an element has stopped being dragged. 

 <!-- Executes go() function -->
<dialog ondragend="go()">Dialog text</dialog>
ondragenterThe script to be run when an element has been dragged to a valid drop target. 

 <!-- Executes go() function -->
<dialog ondragenter="go()">Dialog text</dialog>
ondragleaveThe script to be run when an element leaves a valid drop target. 

 <!-- Executes go() function -->
<dialog ondragleave="go()">Dialog text</dialog>
ondragoverThe script to be run when an element is being dragged over a valid drop target. 

 <!-- Executes go() function -->
<dialog ondragover="go()">Dialog text</dialog>
ondragstartThe script to be run at the start of a drag operation. 

 <!-- Executes go() function -->
<dialog ondragstart="go()">Dialog text</dialog>
ondropThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<dialog ondrop="go()">Dialog text</dialog>
Form
onblurThe script to be run when the element loses focus. 

 <!-- Executes go() function -->
<dialog onblur="go()">Dialog text</dialog>
onchangeThe script to be run when object changed and attempt to leave field. 

 <!-- Executes go() function -->
<dialog onchange="go()">Dialog text</dialog>
oncontextmenuThe script to be run when a context menu is triggered. 

 <!-- Executes go() function -->
<dialog oncontextmenu="go()">Dialog text</dialog>
onfocusThe script to be run when the element gets focus. 

 <!-- Executes go() function -->
<dialog onfocus="go()">Dialog text</dialog>
oninputThe script to be run when an element gets user input. 

 <!-- Executes go() function -->
<dialog oninput="go()">Dialog text</dialog>
oninvalidThe script to be run when an element is invalid. 

 <!-- Executes go() function -->
<dialog oninvalid="go()">Dialog text</dialog>
onresetThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<dialog onreset="go()">Dialog text</dialog>
onselectThe script to be run when some or all of the contents of an object are selected. 

 <!-- Executes go() function -->
<dialog onselect="go()">Dialog text</dialog>
onsubmitThe script to be run when a form is submitted. 

 <!-- Executes go() function -->
<dialog onsubmit="go()">Dialog text</dialog>
Keyboard
onkeydownThe script to be run when an element is in focus and keyboard key is pressed down. 

 <!-- Executes go() function -->
<dialog onkeydown="go()">Dialog text</dialog>
onkeypressThe script to be run when an element is in focus and keyboard key is pressed down and released. 

 <!-- Executes go() function -->
<dialog onkeypress="go()">Dialog text</dialog>
onkeyupThe script to be run when an element is in focus and keyboard key is released. 

 <!-- Executes go() function -->
<dialog onkeyup="go()">Dialog text</dialog>
Media
onabortThe script code to be run on abort. 

 <!-- Executes go() function -->
<dialog onabort="go()">Dialog text</dialog>
oncanplayThe script to be run when a file has buffered enough so it is ready to start playing. 

 <!-- Executes go() function -->
<dialog oncanplay="go()">Dialog text</dialog>
oncanplaythroughThe script to be run when a file can be played all the way to the end without further need of buffering. 

 <!-- Executes go() function -->
<dialog oncanplaythrough="go()">Dialog text</dialog>
oncuechangeThe script to be run when the cue changes when using the track element. 

 <!-- Executes go() function -->
<dialog oncuechange="go()">Dialog text</dialog>
ondurationchangeThe script to be run when the length of the media is changed. 

 <!-- Executes go() function -->
<dialog ondurationchange="go()">Dialog text</dialog>
onemptiedThe script to be run when a media resource element suddenly becomes empty, usually due to an error. 

 <!-- Executes go() function -->
<dialog onemptied="go()">Dialog text</dialog>
onendedThe script to be run when the media has reach the end. 

 <!-- Executes go() function -->
<dialog onended="go()">Dialog text</dialog>
onloadeddataThe script to be run when media data is loaded and playback can start. 

 <!-- Executes go() function -->
<dialog onloadeddata="go()">Dialog text</dialog>
onloadedmetadataThe script to be run when metadata has been loaded. 

 <!-- Executes go() function -->
<dialog onloadedmetadata="go()">Dialog text</dialog>
onloadstartThe script to be run whenthe media resource has started loading. 

 <!-- Executes go() function -->
<dialog onloadstart="go()">Dialog text</dialog>
onpauseThe script to be run when the media resource has been paused. 

 <!-- Executes go() function -->
<dialog onpause="go()">Dialog text</dialog>
onplayThe script to be run when the media resource starts playback. 

 <!-- Executes go() function -->
<dialog onplay="go()">Dialog text</dialog>
onplayingThe script to be run when when playback has already begun. 

 <!-- Executes go() function -->
<dialog onplaying="go()">Dialog text</dialog>
onprogressThe script to be run when the browser is fetching the media data. 

 <!-- Executes go() function -->
<dialog onprogress="go()">Dialog text</dialog>
onratechangeThe script to be run when the playback rate changes. 

 <!-- Executes go() function -->
<dialog onratechange="go()">Dialog text</dialog>
onseekedThe script to be run when the seeking attribute is set to false indicating that seeking has finished. 

 <!-- Executes go() function -->
<dialog onseeked="go()">Dialog text</dialog>
onseekingThe script to be run when the seeking attribute is set to true indicating that seeking is currently active. 

 <!-- Executes go() function -->
<dialog onseeking="go()">Dialog text</dialog>
onstalledThe script to be run when the browser is unable to continue fetching media data. 

 <!-- Executes go() function -->
<dialog onstalled="go()">Dialog text</dialog>
onsuspendThe script to be run when media data has stopped before being completely loaded. 

 <!-- Executes go() function -->
<dialog onsuspend="go()">Dialog text</dialog>
ontimeupdateThe script to be run when the media resources current playback position has changed. 

 <!-- Executes go() function -->
<dialog ontimeupdate="go()">Dialog text</dialog>
onvolumechangeThe script to be run when the volume has changed or been muted. 

 <!-- Executes go() function -->
<dialog onvolumechange="go()">Dialog text</dialog>
onwaitingThe script to be run when the media resource has paused but is expected to resume. 

 <!-- Executes go() function -->
<dialog onwaiting="go()">Dialog text</dialog>
Mouse
onclickThe script to be run when when a mouse is clicked on an element. 

 <!-- Executes go() function -->
<dialog onclick="go()">Dialog text</dialog>
ondblclickThe script to be run when a mouse is double clicked on an element. 

 <!-- Executes go() function -->
<dialog ondblclick="go()">Dialog text</dialog>
onmousedownThe script to be run when he mouse button is pressed down while the cursor is over an element. 

 <!-- Executes go() function -->
<dialog onmousedown="go()">Dialog text</dialog>
onmousemoveThe script to be run when the mouse button is moved. 

 <!-- Executes go() function -->
<dialog onmousemove="go()">Dialog text</dialog>
onmouseoutThe script to be run when the mouse cursor moves off an element. 

 <!-- Executes go() function -->
<dialog onmouseout="go()">Dialog text</dialog>
onmouseoverThe script to be run when the mouse cursor moves over an element. 

 <!-- Executes go() function -->
<dialog onmouseover="go()">Dialog text</dialog>
onmouseupThe script to be run when the mouse button is released while the cursor is over the element. 

 <!-- Executes go() function -->
<dialog onmouseup="go()">Dialog text</dialog>
onwheelThe script to be run when the mouse wheel rolls up or down over an element. 

 <!-- Executes go() function -->
<dialog onwheel="go()">Dialog text</dialog>
Scroll
onscrollThe script code to be run when the scrollbar of an element is being scrolled. 

 <!-- Executes go() function -->
<dialog onscroll="go()">Dialog text</dialog>
Window - NONE

Relevant HTML Tutorials

Widgets / Miscellaneous