Как предотвратить отправку формы кнопкой в HTML и JS

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

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

<button type="button">Сегодня отправки не будет</button>

Такая кнопка не инициирует отправку данных за счет атрибута type="button".

Вы можете представить эту кнопку как работника в пятницу вечером: вместо выполнения своих прямых обязанностей — отправки данных формы — она решает посвятить время отдыху и не делает ничего.

Различные типы кнопок

Итак, существуют разные типы кнопок:

1. type="submit" – активна и стремится быстро отправить ваши данные.
2. type="button" – неактивная кнопка, игнорирующая отправку формы, но отлично подходящая для действий с JavaScript.
3. type="reset" – кнопка, вернёт значения всех полей к их начальному состоянию.

Подобно тому как при собеседовании, четко указывайте тип каждой кнопки, что поможет избежать путаницы.

Использование события onclick

Событие onclick — это орудие для запуска JavaScript-функций:

<button type="button" onclick="customFunction()">Нажми меня, если осмелишься</button>

Здесь "customFunction()" — это верный помощник, который будет выполнять все ваши указания в пространстве JavaScript, как только вы нажмете кнопку.

Если не указать type="button", в обработчик onclick следует добавить return false;, чтобы предотвратить отправку:

<button onclick="customFunction(); return false;">Даже не пытайся нажать</button>

Необходимость кросс-браузерной согласованности

Как у бывалого путешественника, хорошо знающего особенности разных стран, следует помнить, что браузеры обрабатывают кнопки различными способами. Указание type="button" гарантирует идентичную работу формы в любом браузере.

Альтернативы элементу button

В поисках альтернативы обычным кнопкам вы обратите внимание на span с обработчиком onclick. Но учтите, что необходимо сохранять семантику HTML:

<span onclick="customFunction()">Невероятно, но этот элемент кликабельный!</span>

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

Представьте себе дорожный знак СТОП 🛑:

+-------------------+
|                   |
|    🛑 Остановись!  |
|                   |
+-------------------+

Стандартная кнопка submit: Это аналог зеленого света на светофоре. Вы нажимаете, и данные (🚗➡️🚛➡️🏎️) покидают вас, пропадая в бескрайних просторах интернета (🏢).

<button type="submit">Как зеленый свет – 🚗➡️🚛➡️🏎️ ➡️ 🏢</button>

Кнопка с атрибутом button: Эта специальная кнопка является воплощением знака СТОП 🛑.

<button type="button">Что это? Птица? Самолет? Нет, это кнопка, которая не отправляет данные! 🚗🚛🏎️ 🛑</button>

Эффективное использование кнопки в HTML

Интерактивные формы без отправки

Иногда нет необходимости отправлять данные. Активный интерфейс пользователя, не требующий перезагрузки страницы — это типичный случай для онлайн-игр, викторин или опросов. В этих ситуациях кнопки обеспечивают управление с помощью клиентских скриптов.

Подробнее об этом расскажет наш спикер на видео

Применение кнопок вне контекста форм

Кнопки можно использовать для разнообразных действий на странице: для отображения и скрытия контента, запуска анимаций или взаимодействия с DOM-элементами.

Валидация данных перед отправкой

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

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

1. HTMLFormElement: событие submit – Web API | MDN — Объясняется работа с событиями отправки в HTML-формах.
2. preventDefault() Метод события – W3Schools — Подробно описывается, как предотвратить стандартные действия события, это особенно актуально при работе с формами.
3. Валидация форм HTML5 — SitePoint — Даются рекомендации по реализации проверки данных форм с помощью возможностей HTML5.
4. Как создать список дел – W3Schools — Демонстрируется практический пример создания интерфейса для взаимодействия с пользователем без отправки форм.
5. <button>: Элемент Button – HTML: HyperText Markup Language | MDN — Подробно изложено о типах кнопок и их поведении в контексте форм.
6. .on() | Документация по jQuery API — Справочник по методу .on() в jQuery для реализации обработки событий, включая клики по кнопкам внутри форм.