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

370

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

<button>My Button</button>

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

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

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

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

javascript html

— ярик
источник

3

Эта проблема не воспроизводится в современных браузерах, и изначально проблема могла возникнуть из-за недопонимания. Хотя значение по умолчанию для buttonis type=submit, форма не будет отправлена, когда buttonэлемент находится вне какой-либо формы. Если не может быть предоставлена фактическая демонстрация (образец документа, идентификация браузера и описание наблюдений, которые показывают, что какая-либо форма отправлена), этот вопрос следует закрыть как невоспроизводимый. Использование type=buttonэто хорошая практика, но это не делает проблему реальной.

— Юкка К. Корпела

895

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

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

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

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

— Дейв Маркл
источник

9

@Powerslave нет причин не делать этогоto use <button>

— Сандип Пингл

4

@SandipPingle Нет причин использовать его, если вам не нужен действительно сложный вид стилей. Кроме того, IE6 и IE7 (к счастью, постепенно исключаются) <button>в некоторых случаях неправильно обрабатывают s. Кроме того, <button>он не является кросс-браузерно-совместимым на 100%, поскольку разные браузеры могут использовать разные значения для одного и того же <button>при использовании в форме.

— Powerslave

35

Это отличный ответ, но это не особенность . Значением по умолчанию typeатрибута в <button>теге является submit. Когда изменен type=button, то <button>не дается поведение по умолчанию. См. typeАтрибут здесь: developer.mozilla.org/en-US/docs/Web/HTML/Element/button

— Майкл Бенджамин,

1

Так что же это за идея? <button type='submit'>Это слишком сложно для меня, ха-ха. В любом случае, ваш ответ отлично работает!

— divHelper11

2

Поведение по умолчанию (и, следовательно, неявное) поведения элемента, не зависящего от формы, состоит в том, чтобы запускать потенциально разрушительные функциональные возможности, специфичные для формы. Как это не является специфическим дизайнерским решением для спецификации HTML?

— HonoredMule

36

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

— ThiefMaster
источник

1

Кнопки, которые не отправляют формы, полезны только при включенном JavaScript в любом случае ... Я согласен, что type = "button" более чистый.

— ThiefMaster

2

return false;не работает во всех сценариях, пока type="Button"работает. Даже с включенным JavaScript.

— Brejoc

15

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

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

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

— Герт Гренандер
источник

15

По умолчанию 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

— GJZ
источник

3

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

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

— Тим
источник

2

Этого достаточно, чтобы использовать <input type="button" />, и этого достаточно return false;- нет необходимости делать и то, и другое.

— Том

Я не согласен, что рекомендуется не использовать тег кнопки. Если вы не используете его, вы потеряете некоторые специальные возможности, которые вы автоматически получите с тегом кнопки. Я бы сказал, что тег кнопки на самом деле рекомендуется для элементов, которые действуют как кнопки.

— CookieMonster

согласно примечанию в ссылочном материале, который вы связали: «Хотя элементы <input> типа button по-прежнему являются абсолютно корректным HTML, более новый элемент <button> теперь является предпочтительным способом создания кнопок». Так что это как раз то, что вы заявили.

— jedzej

1

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

— motss
источник

0

Другой вариант, который мне помог, заключался в добавлении onsubmit = "return false;" к тегу формы.

<form onsubmit="return false;">

Семантически, вероятно, не такое хорошее решение, как описанные выше способы изменения типа кнопки, но кажется, что это вариант, если вы просто хотите, чтобы элемент формы не отправлялся.

— kk64738
источник