Кнопка HTML для отправки формы

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

<button>My Button</button>

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

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

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

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

Ответ 1

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

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

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

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

Ответ 2

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

Ответ 3

Дейв Маркл прав. Из Веб-сайт W3School:

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

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

Ответ 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 или любого другого обработчика при нажатии кнопки или использовании <input> вместо

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

Ответ 5

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

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

Ответ 6

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