Nút HTML để KHÔNG gửi biểu mẫu

Tôi có một hình thức. Bên ngoài hình thức đó, tôi có một nút. Một nút đơn giản, như thế này:

<button>My Button</button>

Tuy nhiên, khi tôi nhấp vào nó, nó sẽ gửi biểu mẫu. Đây là mã:

<form id="myform">
    <input />
</form>
<button>My Button</button>

Tất cả nút này nên làm là một số JavaScript. Nhưng ngay cả khi nó trông giống như trong đoạn mã trên, nó vẫn gửi biểu mẫu. Khi tôi thay đổi nút tag thành span, nó hoạt động hoàn hảo. Nhưng thật không may, nó cần phải là một nút. Có cách nào để chặn nút đó gửi biểu mẫu không? Ví dụ như

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>

Tôi nghĩ rằng đây là đặc thù nhỏ khó chịu nhất của HTML ... Nút đó cần phải là loại "nút" để không gửi.

<button type="button">My Button</button>

Cập nhật ngày 5 tháng 2 năm 2019: Theo Tiêu chuẩn sống HTML (và cả thông số kỹ thuật HTML 5 ):

Các thiếu mặc định giá trị và giá trị mặc định không hợp lệ là những trạng thái Gửi Button.

return false;vào cuối trình xử lý onclick sẽ thực hiện công việc. Tuy nhiên, tốt hơn hết là chỉ cần thêm type="button"vào <button>- theo cách nó hoạt động đúng ngay cả khi không có bất kỳ JavaScript nào.

Dave Markle là chính xác. Từ trang web của W3School :

Luôn chỉ định thuộc tính loại cho nút. Loại mặc định cho Internet Explorer là "nút", trong khi trong các trình duyệt khác (và trong đặc tả W3C), nó là "trình".

Nói cách khác, trình duyệt bạn đang sử dụng đang tuân theo thông số kỹ thuật của W3C.

Theo mặc định, các nút html gửi biểu mẫu.

Điều này là do thực tế là các nút thậm chí nằm bên ngoài biểu mẫu đóng vai trò là người gửi (xem trang web của W3Schools: http://www.w3schools.com/tags/att_button_form.asp )

Nói cách khác, loại nút là "gửi" theo mặc định

<button type="submit">Button Text</button>

Do đó, một cách dễ dàng để khắc phục điều này là sử dụng loại nút .

<button type="button">Button Text</button>

Các tùy chọn khác bao gồm trả về false ở cuối onclick hoặc bất kỳ trình xử lý nào khác khi nhấp vào nút hoặc để sử dụng thẻ <input> thay vào đó

Để tìm hiểu thêm, hãy xem thông tin của Mozilla Developer Network trên các nút: https://developer.mozilla.org/en/docs/Web/HTML/Euity/button

Không nên sử dụng <Button>thẻ. Sử dụng <Input type='Button' onclick='return false;'>thẻ thay thế. (Sử dụng "return false" thực sự không nên gửi biểu mẫu.)

Một số tài liệu tham khảo

Vì lý do tiếp cận, tôi không thể kéo nó ra bằng nhiều type=submitnút. Cách duy nhất để làm việc tự nhiên với một formnút có nhiều nút nhưng CHỈ một người có thể gửi biểu mẫu khi nhấn Enterphím là đảm bảo rằng chỉ một trong số đó là type=submittrong khi các nút khác thuộc loại khác type=button. Bằng cách này, bạn có thể hưởng lợi từ trải nghiệm người dùng tốt hơn trong việc xử lý biểu mẫu trên trình duyệt về mặt hỗ trợ bàn phím.

Một tùy chọn khác phù hợp với tôi là thêm onsubmit = "return false;" vào thẻ mẫu.

<form onsubmit="return false;">

Về mặt ngữ nghĩa có lẽ không phải là một giải pháp tốt như các phương pháp thay đổi loại nút ở trên, nhưng dường như là một tùy chọn nếu bạn chỉ muốn một phần tử biểu mẫu sẽ không gửi.