Отправка POST-формы с помощью тега <a> в HTML: руководство

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

Для отправки формы методом POST, используя тег <a>, вам понадобится обработчик onclick который с помощью JavaScript требует submit от формы. Пример кода:

<form id="myForm" method="post" action="server-endpoint.php">
  <!-- Здесь можно разместить содержимое формы -->
</form>
<a href="javascript:void(0);" onclick="document.getElementById('myForm').submit();">Отправить форму</a>

Когда пользователь кликает по ссылке, форма myForm срабатывает. Значение href="javascript:void(0);" предотвращает переход по ссылке и инициирует отправку POST-запроса.

Превращаем кнопку в ссылку (метод Кларка Кента)

Если вам хочется, чтобы элемент <button> маскировался под тег <a>, в этом случае CSS окажет помощь:

button.link-button {
  background: none;
  border: none;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  font-size: 1em;
  font-family: sans-serif;
}

button.link-button:hover,
button.link-button:focus {
  text-decoration: none;
}

Применив этот класс, вы сможете сделать внешний вид <button> очень близким к <a>, сохраняя при этом свойства кнопки.

Управление отправкой формы при помощи JavaScript

Вы можете мгновенно менять параметры формы перед отправкой с помощью JavaScript:

document.getElementById('linkSubmit').addEventListener('click', function() {
  var myForm = document.getElementById('myForm');
  myForm.action = '/DataRetrieval.exe';
  myForm.appendChild(hiddenInput);
  myForm.submit();
});

Такая возможность позволяет управлять поведением формы, добавляя в неё скрытые элементы и менять путь отправки данных.

Шпионские уловки: скрытые поля внутри форм

Для передачи скрытых данных очень удобно применять <input type="hidden">:

<form id="myForm" method="post" action="submit.php">
  <input type="hidden" name="secret" value="<%=n%>">
  <!-- Тут могут быть другие поля -->
</form>

Скрытые поля помогают передавать информацию методом POST, которую потом обработает сервер.

Бродим по территории MVC

При изучении структурного паттерна Model-View-Controller (MVC), не забывайте про атрибут [HttpPost] у методов контроллера, что делает их доступными лишь для POST-запроса:

[HttpPost]
public ActionResult SubmitData(MyModel model) {
  // Обработка данных происходит здесь
}

Так как это обеспечивает синхронизацию между отправкой формы с клиента и обработкой данных на сервере.

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

Представьте себе железнодорожные пути, по которым поезд перевозит данные к серверу, подобно тому как станция перевозит пассажиров:

<form action="destination.php" method="POST">
  <!-- Пассажиры – это поля формы -->
</form>

Тег <a> в это контексте выступает как диспетчер:

<a href="#" onclick="document.querySelector('form').submit();">Поехали!</a>

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

Роутинг против стандартного поведения

Если вы используете тег <a>, не забывайте прерывать стандартное поведение браузера:

document.getElementById('linkRedirect').addEventListener('click', function(event) {
  event.preventDefault();
  // Здесь начинается отправка формы
});

Таким образом можно избежать неожиданной смены URL или скроллы страницы при клике.

Учёт особенностей разных браузеров

Обязательно принимайте во внимание браузероспецифичность в вопросах визуализации:

• Используйте псевдоклассы для корректной работы в разных браузерах.
• Тестируйте на различных устройствах, чтобы проверить внешний вид.
• Применяйте vendor prefixes для обеспечения совместимости CSS.

Захватывающая структурирование формы

Не пренебрегайте семантической доступностью форм ради SEO:

• Правильное расположение <label> повышает доступность.
• Поля type="email", type="url" повышают качество валидации и UX.
• Порядок элементов формы улучшается с помощью <fieldset> и <legend>.

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

1. Отправка POST-запроса с помощью JavaScript, аналогичная отправке формы – Stack Overflow
2. HTTP-методы GET и POST
3. Использование Fetch API – Веб-API | MDN
4. Событие submit | Документация jQuery API
5. Тег: элемент якоря – HTML: Гипертекстовый язык разметки | MDN
6. Получение данных с сервера – Учим веб-разработку | MDN
7. Элемент: событие click – Веб-API | MDN