Как сабмитить форму на текущую страницу: HTML, action

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

Для того чтобы HTML-форма отправляла данные и перезагружала текущую страницу, в action достаточно указать пустую строку. С точки зрения безопасности обмена данными рекомендуется использовать метод post.

<form action="" method="post">
  <input type="text" name="field" required>
  <button type="submit">Отправить</button>
</form>

Подготовьте серверный скрипт, например, PHP, который будет обрабатывать данные формы после их отправки. Важно, чтобы обработчик верно ориентировался на POST-запросы.

Пояснение атрибута action

Атрибут action указывает URL для отправки данных формы. В HTML5, при отсутствии атрибута action, форма отправляется на адрес текущего документа. Это делает указание пустой строки в action достаточным для отправки формы на ту же страницу.

Рекомендуется избегать использования action="#", так как это может привести к нежелательным переходам к верху страницы или иным неудобствам.

В рамках работы с PHP можно использовать следующий подход:

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
  <!-- Работаем над усовершенствованием -->
</form>

Здесь функция htmlspecialchars обезвреживает XSS-атаки, очищая переменную PHP_SELF.

Надежная защита

В работе с формами всегда важно проверять входящие данные. Осуществите очистку данных от вредного кода на стороне сервера, предотвращайте SQL-инъекции, используйте параметризованные запросы и валидацию. Если форма содержит конфиденциальные данные, рекомендуется использовать протокол HTTPS.

Секреты отправки для безсостоянийных форм

Если использование серверного скрипта невозможно, как на статических сайтах, можно задействовать сервисы вроде Formspree. JavaScript и Fetch API помогут обработать данные прямо на стороне клиента:

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  let formData = new FormData(this);
  
  // Обработка данных с помощью JavaScript
  // Например, вывод в консоль, сохранение в localStorage и т.п.
});

Проверка совместимости в разных браузерах

Соблюдение HTML-стандартов гарантирует совместимость в различных браузерах. Современные браузеры более терпимы к ошибкам, однако старые версии могут требовать полный URL в атрибуте action.

Лучшие практики отправки формы

• Используйте метод POST для отправки форм: данные будут скрыты от прямого просмотра, а также можно передать большие объемы информации.
• Применяйте семантически верную разметку: это упростит взаимодействие как с пользователями, так и с поисковыми системами.
• Внедряйте прогрессивное улучшение: базовая функциональность должна работать без JavaScript — это облегчит жизнь пользователям со старыми версиями браузеров.

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

**Дом (🏠):** Веб-страница с формой.
**Вы (🚶):** Данные формы.
**Короткая прогулка (🚪↩️):** Отправка данных.

<form action="#" method="post">
  <!-- Выходим наружу... -->
  <input type="text" name="data">
  <!-- ...и возвращаемся обратно -->
  <input type="submit" value="Отправить">
</form>

Данные формы (🚶) немедленно возвращаются домой (🏠 – на страничку с формой), отпрвка куда-то иное отсутствует.

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

1. HTML Формы — высококачественное руководство по созданию и использованию HTML-форм.
2. <form>: Элемент формы – HTML: язык разметки гипертекста | MDN — объяснение элемента формы и его атрибутов.
3. Отправка данных формы – Изучение веб-разработки | MDN — как отправлять и обрабатывать данные форм.
4. Подробное руководство по применимости веб-форм — Smashing Magazine — советы по удобству использования веб-форм и их наилучшем использовании.
5. Пользовательские формы без серверного кода | Formspree — сервис для обработки отправки форм без серверного кода.