HTML - <dialog> tag

Quiz

The HTML <dialog> tag is used to represent a dialog box, alert box, or subwindow.

The <dialog> tag has an open attribute, which indicates that the dialog is active and can be interacted with. If the open attribute is not set, the dialogue box will not appear on the screen, and the user cannot see it.

You can use the <dialog> element to display alert messages to the user when they click any from button.

Syntax

Following is the syntax of <dialog> tag −

   <dialog>.....</dialog>

Attributes

The HTML <dialog> tag supports both Global and Event attributes. Additionally, it accepts a specific attribute, which is listed below.

Attribute	Value	Description
open	open	Indicates that the dialog is active and interactive.

Example: Dialog Box Creation

The program below demonstrates the use of the HTML <dialog> tag. We are not using the open attribute inside the <dialog> tag, so after the program executes, no dialog box will be displayed because it is closed by default.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML dialog box</title>
</head>
<body>
   <!--create a dialog element-->
   <p>Example of the HTML 'dialog' element</p>
   <dialog>Alert</dialog>
</body>
</html>

Example: Default Open Dialog Box

Here is an another example of an HTML <dialog> box. In this example, we create a dialog box using the <dialog> tag and include the open attribute inside the dialog element. As a result, when we execute the program, a dialog box will be displayed on the screen view.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML dialog box</title>
</head>
<body>
   <p>Example of the HTML 'dialog' element</p>
   <!--create a dialog element-->
   <dialog open>Dialog box!</dialog>
</body>
</html>

Example: Styling Dialog Box

In the example below, we are create a dialog box using the HTML <dialog> tag and style it with CSS.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML dialog box</title>
   <style>
      dialog {
         width: 100px;
         height: 50px;
         background-color: red;
         color: white;
         display: grid;
         place-items: center;
         border-radius: 5px;
      }
   </style>
</head>
<body>
   <p>Example of the HTML 'dialog' element</p>
   <!--create a dialog element-->
   <dialog open>Alert box!</dialog>
</body>
</html>

Example: Form in Dialog Box

In this example, we use the HTML <dialog> tag to create a dialog box. Inside the dialog element, we include a form with an "OK" button. The dialog box will disappear when the user clicks the "OK" button.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML dialog box</title>
   <style>
      dialog {
         background-color: red;
         color: white;
      }
   </style>
</head>
<body>
   <p>Example of the HTML 'dialog' element</p>
   <!--create a dialog element-->
   <dialog open>
      <p>Warning!</p>
      <form method="dialog">
      <button>Ok</button>
      </form>
   </dialog>
</body>
</html>

Supported Browsers

Tag
dialog	Yes 37.0	Yes 79.0	Yes 98.0	Yes 15.4	Yes 24.0

html_tags_reference.htm

Print Page