Кнопка HTML, чтобы НЕ отправить форму

Question

У меня есть форма. За пределами этой формы у меня есть кнопка. Простая кнопка, как это:

<button>My Button</button>

Тем не менее, когда я нажимаю на нее, он отправляет форму. Вот код:

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

Все, что эта кнопка должна сделать, это немного JavaScript. Но даже когда он выглядит так же, как в коде выше, он отправляет форму. Когда я изменяю кнопку тега на span, она работает отлично. Но, к сожалению, это должна быть кнопка. Есть ли способ заблокировать эту кнопку от отправки формы? Как е. г.

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

Answer 1

Я думаю, что это самая раздражающая небольшая особенность HTML ... Эта кнопка должна быть типа "кнопка", чтобы не отправлять.

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

Обновление 5 февраля 2019 года: Согласно Стандарту жизни HTML (а также HTML 5 спецификации ):

Пропущенное значение по умолчанию и недопустимое значение по умолчанию - Отправить Состояние кнопки.

Answer 2

return false; в конце обработчика onclick выполнит эту работу. Тем не менее, было бы лучше просто добавить type="button" к <button> - таким образом он будет вести себя правильно даже без JavaScript.

Answer 3

Дейв Маркл прав. С сайта W3School :

Всегда указывайте атрибут типа для кнопка. Тип по умолчанию для Internet Explorer - это «кнопка», а в других браузерах (и в W3C спецификация) это «отправить».

Другими словами, используемый вами браузер соответствует спецификации W3C.

Answer 4

По умолчанию HTML-кнопки отправляют форму.

Это связано с тем, что даже кнопки, расположенные вне формы, действуют как отправители (см. Веб-сайт W3Schools: http://www.w3schools.com/tags/att_button_form.asp)

Другими словами, тип кнопки «отправить» по умолчанию

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

Поэтому простой способ обойти это - использовать кнопку типа .

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

Другие опции включают возврат false в конце onclick или любого другого обработчика для нажатия кнопки или использование тега вместо

Чтобы узнать больше, ознакомьтесь с информацией по кнопкам в Mozilla Developer Network: https://developer.mozilla.org/en/docs/Web/HTML/Element/button

Answer 5

Рекомендуется не использовать тег <Button>. Вместо этого используйте тег <Input type='Button' onclick='return false;'>. (Использование «return false» действительно не должно отправлять форму.)

Некоторые справочный материал

Answer 6

По причине доступности я не смог снять его с нескольких кнопок type=submit. Единственный способ работать с form с несколькими кнопками, но ONLY , который можно отправить при нажатии клавиши Enter, - убедиться, что только один из них имеет type=submit, а другие в другом типе, таком как type=button. Таким образом, вы можете извлечь выгоду из лучшего пользовательского опыта при работе с формой в браузере с точки зрения поддержки клавиатуры.