Làm sao để tạo hộp thoại trong HTML?

What is the Dialog Element in HTML?

Trong HTML, thành phần <dialog> được sử dụng để tạo hộp thoại. Hộp thoại là một cửa sổ nhỏ xuất hiện trên màn hình để hiển thị thông tin hoặc yêu cầu người dùng nhập liệu.

Cách thêm hộp thoại vào HTML

Cú pháp cơ bản cho <dialog>

Để tạo một hộp thoại trong HTML, bạn chỉ cần sử dụng thẻ <dialog> và bọc nội dung hộp thoại bên trong thẻ này.

Ví dụ:

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

Mở và đóng hộp thoại

Để mở hộp thoại, bạn cần sử dụng JavaScript. Bạn có thể sử dụng phương thức showModal() để mở hộp thoại và phương thức close() để đóng nó.

Ví dụ:

<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>

Biểu mẫu trong hộp thoại HTML

Bạn có thể chèn biểu mẫu vào hộp thoại HTML để yêu cầu người dùng nhập liệu hoặc thực hiện hành động.

Ví dụ:

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

Tập trung và khả năng tiếp cận trong hộp thoại HTML

Hộp thoại HTML sẽ tự động tập trung vào thành phần đầu tiên trong hộp thoại khi nó được mở. Điều này giúp người dùng tương tác dễ dàng với nội dung bên trong hộp thoại.

Bạn cũng có thể sử dụng thuộc tính autofocus để tập trung vào một phần tử cụ thể trong hộp thoại.

Để đảm bảo khả năng tiếp cận, hãy chắc chắn rằng bạn sử dụng các phím tắt hợp lệ và cung cấp các chỉ dẫn hoặc thông báo khi người dùng tương tác với hộp thoại.

Hỗ trợ trình duyệt cho HTML Dialog

Để kiểm tra trình duyệt có hỗ trợ <dialog> hay không, bạn có thể sử dụng JavaScript để kiểm tra thuộc tính/html element của nó.

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

Thêm hộp thoại với HTML

Với <dialog> element trong HTML, bạn có thể tạo các hộp thoại tương tác đơn giản và dễ dàng cho trang web của mình. Hãy tận dụng tính năng này để tạo trải nghiệm người dùng tốt hơn và tăng tính tương tác của trang web của bạn.