What is the Dialog Element in HTML?

In HTML, the element is used to create a dialog box. A dialog box is a small window that appears on the screen to display information or request user input.

How to add a dialog box to HTML

Basic syntax for

To create a dialog box in HTML, you just need to use the tag and wrap the dialog content inside this tag.

Example:

<dialog>
    <p>Hello, đây là nội dung của hộp thoại.</p>
</dialog>

Open and close dialog box

To open the dialog box, you need to use JavaScript. You can use the method showModal() to open the dialog and the method close() to close it.

Example:

<button onclick="openDialog()">Mở hộp thoại</button>

<dialog id="myDialog">
    <p>Đây là nội dung của hộp thoại.</p>
    <button onclick="closeDialog()">Đóng</button>
</dialog>

Form inside HTML dialog box

You can insert forms into the HTML dialog box to request user input or perform actions.

Example:

<dialog>
    <form>
        <label for="inputName">Tên:</label>
        <input type="text" id="inputName" name="name">
        <button type="submit">Gửi</button>
    </form>
</dialog>

Focus and accessibility in HTML dialog box

The HTML dialog box will automatically focus on the first element inside the dialog when it is opened. This helps users interact easily with the content inside the dialog.

You can also use the attribute autofocus to focus on a specific element inside the dialog.

To ensure accessibility, make sure you use appropriate keyboard shortcuts and provide instructions or notifications when users interact with the dialog.

Browser support for HTML Dialog

To check if the browser supports , you can use JavaScript to check its property/HTML element.

if ("HTMLDialogElement" in window) {
    // Hỗ trợ dialog element
} else {
    // Không hỗ trợ dialog element
}

Add dialog box with HTML

With the element in HTML, you can create simple and easy interactive dialog boxes for your website. Take advantage of this feature to create a better user experience and increase your website's interactivity.