Отправка формы с помощью обычной ссылки в HTML

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

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

Чтобы отправить форму посредством ссылки при использовании JavaScript, вы можете воспользоваться следующим кодом:

HTML

Скопировать код

<!-- Ссылка выглядит как кнопка отправки, интересное решение! -->
<a href="javascript:void(0);" id="form-submit-link">Отправьте форму</a>

<!-- Форма обретает статус скрытой -->
<form id="cunning-form">
    <!-- все элементы формы -->
</form>

<script>
    document.getElementById('form-submit-link').addEventListener('click', function() {
        document.getElementById('cunning-form').submit();
    });
</script>

Не забудьте, что идентификаторы ссылки и формы ('form-submit-link' и 'cunning-form') требуется заменить на актуальные идентификаторы из вашего кода.

Пройдите тест и узнайте подходит ли вам сфера IT

Пройти тест

Настройка вида кнопки отправки формы в виде ссылки

Если вы хотите, чтобы кнопка отправки не могла выглядеть слишком формальной и напоминала обыкновенную ссылку, примените следующие CSS-стили:

CSS

Скопировать код

.link-like-button {
    background: none;
    border: none;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

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

HTML

Скопировать код

<form id="form-bruce-wayne">
    <!-- все элементы формы -->
    <input class="link-like-button" type="submit" value="Отправить форму">
</form>

Представленный CSS-код превращает кнопку в обыкновенную ссылку.

Использование кнопок отправки формы с изображениями

HTML

Скопировать код

<form id="picture-this">
    <!-- все элементы формы -->
    <input type="image" src="your-image.png" alt="Отправить форму" />
</form>

В этом примере кнопка отправляет форму с использованием изображений, что можно сравнить с работой Бэт-сигнала, который оповещает о вызове функции submit() формы.

Применение функции отправки с использованием JavaScript `EventListener`

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

Скопировать код

document.querySelector('.link-in-disguise').addEventListener('click', function(e) {
    e.preventDefault(); // Отменяем стандартное поведение ссылки
    let form = this.closest('form'); // Запрашиваем ближайшую форму
    
    if(form) {
        form.submit(); // Отправляем форму
    }
});

Продвинутый контроль над формой с помощью AJAX

Скопировать код

document.querySelector('.ajax-link').addEventListener('click', function(e){
    e.preventDefault();

    let formData = new FormData(document.querySelector('#ajax-form'));

    fetch('/submit', {
        method: 'POST',
        body: formData
    }).then(response => {
        // Обработка ответа от сервера. Кто желает веселиться?
    });
});

В этом случае ссылка может быть сравнена с Бэтмобилем, оборудованным всеми возможными функциями, среди которых и AJAX.

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

Представьте себе, как ссылка управляет отправкой данных формы:

Markdown

Скопировать код

- Пользователь взаимодействует с веб-страницей, вводит информацию в поля формы, которые, подобно **пассажирам**, готовятся к отправке серверу — месту назначения.
- Нажимая стандартную кнопку "отправить", данные, как и **пассажиры автобуса**, отправляются к назначению.
- Однако, когда ссылка используется для отправки формы, данные похожи на **вертолёт**, который быстро и точно доставит их к месту назначения.

Доступность по всей форме

В контексте обеспечения доступности используйте элемент <button>, стилизованный под ссылку:

HTML

Скопировать код

<form>
  <!-- элементы формы -->
  <button type="submit" class="link-like-button">Отправить форму</button>
</form>

Это позволяет инструментам для чтения с экрана лучше интерпретировать вашу страницу, обеспечивая доступность для каждого.

Полезные ресурсы

<form>: The Form element – HTML: HyperText Markup Language | MDN — Гайд по элементам форм HTML.
<a>: The Anchor element – HTML: HyperText Markup Language | MDN — Руководство по якорным элементам.
submit event | jQuery API Documentation — Описание метода .submit().
Event: preventDefault() method – Web APIs | MDN — Как применять 'Event.preventDefault()'.
What does "javascript:void(0)" mean? – Stack Overflow — Обсуждение использования javascript:void(0) на Stack Overflow.
HTML Standard — Семантический стандарт текстовых элементов, включая <a>.
JavaScript DOM EventListener — Инструкция по применению слушателей событий в JavaScript.