HTML button type: Tránh gửi form ngoài ý muốn khi bấm nút phụ

Bạn thêm nút “Xem hướng dẫn” vào biểu mẫu, nhưng bấm vào lại khiến trang gửi dữ liệu hoặc xuất hiện cảnh báo trường bắt buộc. Nguyên nhân có thể không nằm ở API: một button trong form chưa được khai báo đúng loại có thể đang đóng vai trò nút submit.

1. Ghi rõ mục đích của từng nút

Theo hướng dẫn form của MDN, button thông thường đặt trong form mặc định có hành vi gửi form nếu không bị validation ngăn lại. Vì vậy, hãy khai báo type="submit" cho nút gửi và type="button" cho hành động giao diện không gửi dữ liệu.

<button type="button">Xem hướng dẫn</button>
<button type="submit">Gửi biểu mẫu</button>

type="button" không tự triển khai hành động xem hướng dẫn. Nó chỉ tránh hành vi submit mặc định; ứng dụng vẫn phải gắn hành vi phù hợp hoặc dùng cơ chế HTML thích hợp.

2. Ví dụ thử nghiệm có hành vi rõ ràng

Đặt markup sau trong trang thử nghiệm và chạy JavaScript sau khi DOM đã sẵn sàng. Nút gửi dùng GET tới đường dẫn minh họa /search, nên chỉ thử với dữ liệu giả và endpoint phù hợp.

<form action="/search" method="get">
  <label for="query">Từ khóa</label>
  <input id="query" name="q" required>
  <button id="help-button" type="button">Xem hướng dẫn</button>
  <button type="submit">Tìm kiếm</button>
  <p id="help-text" hidden>Nhập từ khóa cần tìm.</p>
</form>

document.getElementById('help-button').addEventListener('click', () => {
  document.getElementById('help-text').hidden = false;
});

Kỳ vọng: bấm Xem hướng dẫn chỉ hiện đoạn văn, không gửi form và không kích hoạt kiểm tra required để submit. Bấm Tìm kiếm khi có dữ liệu hợp lệ mới đi theo luồng gửi. Đây là ví dụ minh họa, không phải kết quả kiểm thử của website production.

3. Đừng sửa bằng cách chặn mọi hành vi mặc định

preventDefault có chỗ dùng khi ứng dụng chủ động xử lý submit bằng JavaScript. Nhưng chỉ thêm nó vào mọi sự kiện click có thể che ý định thật của markup. Nếu nút không có nhiệm vụ gửi, khai báo đúng type giúp hành vi dễ hiểu ngay cả khi đoạn xử lý click thay đổi.

Với form gửi bằng JavaScript, xem xét xử lý sự kiện submit của form thay vì chỉ click của một nút. Người dùng có thể gửi bằng bàn phím; luồng đó cũng cần validation và trạng thái chờ rõ ràng.

4. Nút reset không có nghĩa là hủy thao tác

type="reset" đưa các control về giá trị mặc định, không hoàn tác dữ liệu đã ghi trên server và không nhất thiết xóa mọi trường thành rỗng. Không dùng reset cho nút “Đóng” hoặc “Quay lại” chỉ vì chúng đều có vẻ là hành động phụ.

Trong component tái sử dụng, kiểm tra HTML cuối cùng được render. Một component Button có thể dùng mặc định khác với suy nghĩ của người gọi. Nếu có thuộc tính form liên kết với biểu mẫu ở nơi khác, vị trí trực quan của nút cũng chưa đủ để xác định nó thuộc form nào.

5. Checklist trước khi phát hành

• Mọi nút trong form có vai trò rõ ràng.
• Nút trợ giúp hoặc mở hộp thoại không gửi form ngoài ý muốn.
• Thử chuột, bàn phím và trường required đang trống.
• Kiểm tra request trong Network, không chỉ nhìn trang có tải lại hay không.
• Validation phía server vẫn tồn tại; thuộc tính HTML không thay kiểm tra backend.
• Nút reset, nếu có, được thử với giá trị mặc định khác rỗng.

Một thuộc tính type nhỏ có thể quyết định toàn bộ luồng tương tác. Viết rõ loại nút giúp tránh submit nhầm và làm form dễ bảo trì hơn.