HTML cơ bản – Bài 14: Thành phần sẵn có: details, summary và dialog
Bạn sẽ tạo mục hỏi đáp đóng/mở bằng HTML và nhận biết khi nào một hộp thoại cần thêm hành vi JavaScript. Mục tiêu là tận dụng hành vi trình duyệt đã cung cấp, không tự dựng lại mọi tương tác bằng div.
Lộ trình này học qua website “Góc học web”: trang chủ, trang bài viết và trang liên hệ. Mỗi bài giải quyết một việc cụ thể. Các bài về từng thẻ là tài liệu tra cứu, không phải danh sách bắt buộc học thuộc.
Mục lục
Câu hỏi thường gặp là tình huống thật
Trang Góc học web có câu hỏi “Có cần học CSS trước HTML không?”. Người đọc có thể mở câu trả lời khi quan tâm. details nhóm nội dung có thể mở rộng và summary đặt nhãn nhìn thấy được để thao tác.
summary nên có tên cụ thể, không chỉ là “Xem thêm” lặp đi lặp lại. Bên trong details có thể chứa nhiều đoạn và danh sách. Thuộc tính open làm nó mở sẵn; khi không có open, trạng thái ban đầu thường là đóng.
Hành vi sẵn có không cần một thư viện
Bạn có thể dùng chuột hoặc bàn phím để mở và đóng details. Không cần gắn sự kiện click lên một div rồi tự nhớ cập nhật trạng thái mở. Tuy vậy bạn vẫn phải viết nội dung rõ, giữ dấu focus và kiểm tra trong trình duyệt người học sử dụng.
Không nên đặt thông tin thiết yếu mà người dùng bắt buộc thấy vào một vị trí khó phát hiện. Nếu có nhiều câu hỏi, tổ chức nhãn và thứ tự hợp lý trước khi tạo hiệu ứng. Những cơ chế nâng cao để quản lý nhóm mở/đóng nên học khi có nhu cầu tương thích cụ thể.
Dialog giải quyết một loại tương tác khác
dialog là phần tử cho hộp thoại. Thêm open có thể hiển thị nó theo cách không modal; để mở modal với các hành vi nền tảng liên quan, ví dụ dùng showModal(). Hai cách này không hoàn toàn tương đương.
Mẫu trong bài dùng một ít JavaScript chỉ để gọi showModal khi bấm nút. Đoạn này được chú thích để bạn hiểu ranh giới giữa cấu trúc HTML và hành vi. Bạn không cần học thuộc cú pháp JavaScript ở môn HTML; đó sẽ là phần học tiếp.
Tên, cách đóng và focus
Dialog có heading được nối bằng aria-labelledby để người dùng hiểu mục đích. Form method=”dialog” với nút đóng giúp kết thúc hộp thoại trong ví dụ mà không gửi dữ liệu lên máy chủ. Cần có cách đóng rõ ràng; đừng làm một lớp phủ không thể thoát bằng bàn phím.
Khi thử modal, quan sát focus và phím Escape trên trình duyệt hỗ trợ. Một ứng dụng thật cần kiểm tra điều khiển nhận focus ban đầu, nội dung dài và khả năng quay lại nơi gọi hộp thoại. Native HTML giúp nhiều việc, nhưng không thay thế kiểm tra trải nghiệm.
Chọn đúng thành phần cho đúng mục đích
Câu hỏi bổ sung phù hợp với details; một bước xác nhận cần người dùng chú ý có thể phù hợp với dialog; liên kết tới bài khác vẫn là a. Không cần dùng dialog cho mọi thông tin nhỏ, càng không nên chuyển thông tin vốn có thể nằm ngay trong trang thành chuỗi popup.
Nếu ví dụ dialog không mở trong khung nhúng do giới hạn của môi trường, mở tab riêng rồi thử. Kiểm tra khả năng hỗ trợ trình duyệt trước khi dùng một tính năng mới trong sản phẩm thật; không giả định mọi thiết bị có cùng phiên bản.
Ví dụ để tự chạy
Tạo một tệp HTML để thử đoạn mã sau. Nếu đây là đoạn trích trong body, hãy đặt nó vào bộ khung tài liệu đã học ở bài 3. Bộ mã tải về có sẵn ví dụ đầy đủ của bài này.
<details>
<summary>Tôi có cần học CSS trước HTML không?</summary>
<p>Bạn có thể học cấu trúc HTML trước, rồi thêm CSS để trình bày.</p>
</details>
<button type="button" id="mo">Xem lưu ý về ví dụ</button>
<dialog id="luu-y" aria-labelledby="tieu-de-hop">
<h2 id="tieu-de-hop">Lưu ý</h2>
<p>Dialog trong ví dụ cần một chút JavaScript để mở dạng modal.</p>
<form method="dialog"><button>Đóng</button></form>
</dialog><script>
const nutMo = document.querySelector("#mo");
const hop = document.querySelector("#luu-y");
nutMo.addEventListener("click", () => hop.showModal());
</script>Kết quả hiển thị
Details mở được mà không cần JavaScript. Nút mở dialog dùng phần script nhỏ trong ví dụ, còn nút Đóng dùng form method=”dialog”; đây là hai cơ chế khác nhau.
Mở ví dụ bài 14 trong tab riêng · Tải bộ ví dụ 16 bài và website hoàn chỉnh
Lỗi thường gặp và cách sửa
- Cho rằng dialog open giống showModal: phân biệt không modal và modal.
- Tạo nút mở bằng a href=”#”: dùng button type=”button” cho hành động.
- Xóa focus hoặc không có nút đóng: giữ điều hướng và cách thoát rõ ràng.
Tự kiểm tra
- Mở details chỉ bằng bàn phím.
- Giải thích phần nào của ví dụ dùng HTML sẵn có và phần nào cần JavaScript.
Tra cứu khi cần
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
