Создаем HTML-форму без перезагрузки и кнопки отправить

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

Для того чтобы предотвратить перезагрузку страницы после нажатия на Enter внутри формы, можно включить обработчик событий прямо в коде:

<form onsubmit="event.preventDefault();">
  <input type="text">
  <input type="submit">
</form>

В этом случае event.preventDefault() используется в атрибуте onsubmit и успешно блокирует отправку формы, таким образом аннулируя перезагрузку страницы.

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

Существует несколько способов подавить стандартную процедуру отправки формы и оставить данные на экране. Их можно применить вместе с вышеупомянутым JavaScript-кодом.

Замена атрибута action

Можно оставить атрибут action пустым или задать его значение как action="javascript:void(0);". Это поможет избежать перезагрузки страницы, однако такое решение может вызвать дискуссии о соответствии лучшим практикам и стандартам HTML.

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

Обработка события нажатия Enter с использованием JavaScript

Обработчик события keypress можно применить к элементам формы для отслеживания нажатия на Enter и предотвращения перезагрузки страницы:

document.getElementById('myForm').addEventListener('keypress', function(event) {
  if (event.key === 'Enter') {
    event.preventDefault();
  }
});

Изменение типа кнопок

Рекомендуется использовать элемент button вместо submit, чтобы самому контролировать его поведение:

<button type="button" onclick="handleForm()">Отправить</button>

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

Отправка данных с использованием JavaScript

Для отправки данных с формы без перезагрузки страницы можно использовать AJAX или другие методы:

function handleForm() {
  var xhr = new XMLHttpRequest();
  // Конфигурируем и отправляем запрос
}

Повышение удобства пользователя

С помощью библиотеки jQuery можно упростить обработку событий и сделать взаимодействие пользователя с формой более комфортным. Пример использования jQuery для фокусировки на первом элементе формы:

$('form input:first').focus();

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

Представьте HTML-форму как почтовый ящик (📬) у вашего дома.

Допустим, нажатие Enter – это аналог отправки письма (📃). Обычно письмо уходит (форма отправляется), и страница перезагружается. Но мы хотим, чтобы письмо не было доставлено (форма не совершила действие):

Нажатие Enter: 📃✉️ -> 📬🔒 -> ❌ (Действие отменено)

Использование event.preventDefault() в JavaSсript сравнимо с запиранием почтового ящика (🔒), что предотвращает отправку письма и избегает любых действий, связанных с перезагрузкой страницы.

Обеспечение работоспособности в разных браузерах

События и отправка форм могут обрабатываться различными браузерами по-разному. Однако предложенные решения, включающие preventDefault() и определение типов кнопок, гарантируют совместимость с большинством браузеров.

Внедрение механизмов отката

Добавьте механизмы отката, например return false;, для поддержки старых браузеров или для случаев непредсказуемого поведения:

<form onsubmit="return false;">

Такая мера действует как второй уровень защиты, где вы указываете браузеру прекратить любые действия при отправке формы.

Динамическая загрузка данных с сервера

Использование AJAX или функции load() из jQuery позволяет динамически загрузить данные с сервера без перезагрузки страницы:

$('#result').load('/server/data'); /* Вот свежие данные, загрузившиеся без перезагрузки страницы! */

Обеспечение доступности

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

<input type="text" onkeypress="if(event.key === 'Enter') yourFunction();">

Добавив доступные обработчики, вы обеспечиваете управление отправкой данных с клавиатуры, соблюдая стандарты доступности.

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

1. <form>: Элемент формы – HTML: HyperText Markup Language | MDN — Подробное описание элементов <form> от MDN.
2. preventDefault() Метод события — Статья по использованию метода preventDefault() для блокировки стандартной отправки форм.
3. javascript – Как остановить обновление страницы при отправке формы – Stack Overflow — Обсуждение на Stack Overflow о способах предотвращения перезагрузки страницы при отправке формы.
4. Свойства и методы формы — Информация о элементах форм и связанных с ними методах на JavaScript.
5. KeyboardEvent – Веб API | MDN — Подробная информация о KeyboardEvent API и его использовании в формах.
6. HTML Стандарт — Официальный стандарт HTML по определению и поведению форм.