Как предотвратить отправку формы кнопкой без JavaScript

Быстрый ответ

Чтобы кнопка <button> не отправляла форму, укажите в ней атрибут type="button":

<button type="button">Без отправки</button>

Добавление type="button" позволяет кнопке выполнять действия без инициирования отправки формы.

HTML-подход: использование <input>

Если вы хотите обойтись без JavaScript, примените элемент <input> с атрибутом type="button":

<input type="button" value="Без отправки">

Такой подход гарантирует, что кнопка не будет инициировать отправку формы и при этом останется в рамках стандартного HTML.

Навигационный подход: сочетание <a> и <button>

Для навигации по страницам без отправки форм используйте комбинацию элементов <a> и <button>:

<a href="ваш-url-здесь"><button type="button">Перейти куда-то</button></a>

Данный способ идеально подходит для создания элементов, которые выглядят как кнопки, но ведут себя как ссылки.

Действенный подход: атрибут onclick

Чтобы назначить кнопке конкретное действие, используйте onclick:

<button type="button" onclick="yourFunction();">Кнопка действия</button>

С помощью этого скрипт, написанный на JavaScript, будет обрабатывать события нажатия кнопки, не затрагивая процесс отправки формы.

Визуализация

Рассмотрим наглядный пример с <button> и отправкой формы:

- Стандартная кнопка -

🚉 Станция: [📃, 📃, 📃]
🧍 Пассажир `<button>`: [🚪]
При входе пассажира `<button>` в поезд: 🚉🧍 -> 🚂💨 («<button>» отправляет форму!)

- Кнопка с `type="button"` -

🚉 Станция: [📃, 📃, 📃]
🧍 Пассажир `<button>`: [🚪🛑]
При заходе пассажира `<button>`: 🚉🧍 («<button>», стоп, мы не едем!)

Примечание: Знак 🛑 обозначает использование атрибута type="button", который останавливает процесс отправки формы.

Дополнительные подходы: jQuery UI и пользовательские стили

Совмещение функциональности и стилистики кнопки является важной частью веб-разработки. Если вы используете библиотеки типа jQuery UI, убедитесь что ваша кнопка не вызывает отправку формы:

$("button").button().click(function(event) {
  event.preventDefault();
});

При работе с внешними библиотеками и настройке стилей, всегда проверяйте значение атрибута type у кнопок, чтобы исключить нежелательные отправки форм.

Заставляем форму вести себя правильно

Если вам важно полностью исключить отправку формы, используйте атрибут onsubmit:

<form onsubmit="return false;">
  <button type="submit">Я вам не покорна!</button>
</form>

Этот метод весьма эффективен, однако он влияет на все элементы внутри <form>. В большинстве случаев предпочтительнее присваивать каждой кнопке в форме тип "button" вручную.

Полезные материалы

1. <button>: Элемент кнопки — HTML | MDN — Информация о том, как использовать элемент <button> и его атрибуты на MDN.
2. HTML button tag — Описание различного поведения кнопок в HTML на W3Schools.
3. Когда использовать элемент Button | CSS-Tricks — Обсуждение лучших практик использования <button> на CSS-Tricks.
4. preventDefault() Event Method — Метод JavaScript preventDefault() для предотвращения действий по умолчанию, которым можно научиться на W3Schools.
5. HTML5 Формы: JavaScript и Constraint Validation API | SitePoint — Как использовать JavaScript и Constraint Validation API для предотвращения отправки форм на SitePoint.
6. Понимание распространения событий | DigitalOcean — Объяснение распространения событий в JavaScript на DigitalOcean.
7. HTML form tag — W3Schools предлагает подробный разбор тега <form>.