Ссылки и формы в HTTP-запросах

Каждый раз, когда пользователь кликает на навигационную ссылку или отправляет поисковый запрос, браузер выполняет HTTP-запрос. Но то, какой HTML-элемент инициирует этот запрос — и каким образом — имеет гораздо большее значение, чем осознают многие разработчики. Выбор между <a> и <form> — это не просто предпочтение в разметке. Это семантическое решение, которое влияет на поведение, безопасность и корректность работы.

Основное различие: навигация vs отправка данных в HTML

Ссылки (<a>) — это элементы навигации. Они сообщают браузеру: «Перейди и получи этот ресурс». Клик по ссылке обычно инициирует GET-запрос навигации к URL, указанному в атрибуте href. Вот и всё. Никакой пользовательский ввод не собирается, никакие данные не сериализуются — только чистое событие навигации.

Формы (<form>) — это элементы отправки данных. Они собирают ввод от пользователя и отправляют его на сервер. Форма может использовать либо GET, либо POST, в зависимости от характера запроса.

Вот краткое сравнение:

Характеристика	Ссылка <a>	Форма <form>
Назначение	Навигация	Отправка данных
HTTP-метод	Только GET	GET или POST
Собирает пользовательский ввод	Нет	Да
Клик правой кнопкой / открыть в новой вкладке	Да	Нет
Индексируется поисковыми системами	Да	Ограниченно
Изменяет состояние сервера	Нет	Да (с POST)

GET vs POST в HTML-формах: когда использовать каждый метод

Используйте ссылку для безопасной идемпотентной навигации

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

<a href="/articles/html-basics">Read the HTML guide</a>

Ссылки безопасны, идемпотентны и кешируемы — именно такими должны быть GET-запросы.

Используйте GET-форму, когда пользовательский ввод формирует URL

Поисковая строка — классический пример. Пользователь вводит запрос, и форма добавляет его к URL в виде строки запроса:

<form method="get" action="/search">
  <input type="search" name="q" placeholder="Search...">
  <button type="submit">Search</button>
</form>

Это создаёт /search?q=your+query — URL, которым можно поделиться и добавить в закладки. Используйте GET-формы, когда запрос остаётся безопасным и идемпотентным, но параметры URL зависят от пользовательского ввода.

Используйте POST-форму, когда действие имеет побочные эффекты

Создание учетной записи, отправка платежа или публикация комментария — всё это изменяет состояние сервера. Такие действия должны выполняться через POST-формы:

<form method="post" action="/register">
  <input type="email" name="email">
  <input type="password" name="password">
  <button type="submit">Create account</button>
</form>

POST отправляет данные в теле запроса, а не в URL — что подходит для конфиденциальных данных и неидемпотентных действий.

Распространённая ошибка: method="link" не существует

Некоторые разработчики пишут <form method="link">, надеясь создать «кнопку-ссылку». Это невалидный HTML. Браузеры игнорируют неизвестное значение и возвращаются к значению по умолчанию — которым является GET. Форма всё равно отправляется, но делает это молча и некорректно.

Если вы хотите кнопку, которая куда-то переходит, используйте ссылку, стилизованную под кнопку — а не форму:

<!-- ❌ Неверно -->
<form method="link" action="/about">
  <input type="submit" value="Go to About">
</form>

<!-- ✅ Правильно -->
<a href="/about" class="btn">Go to About</a>

Современные возможности форм, о которых стоит знать

HTML5 добавил переопределение для отдельных кнопок через атрибуты formaction и formmethod, позволяя индивидуальным кнопкам отправки изменять место или способ отправки формы:

<form method="post" action="/save">
  <button type="submit">Save</button>
  <button type="submit" formaction="/save-and-publish" formmethod="post">Publish</button>
</form>

Также стоит отметить: requestSubmit() (в отличие от submit()) запускает валидацию формы перед отправкой, что делает его лучшим выбором для программной отправки формы в JavaScript.

Для PUT, PATCH или DELETE HTML-формы не поддерживают эти методы нативно. Вам потребуется JavaScript (fetch, XMLHttpRequest) или соглашение о переопределении метода на стороне сервера.

Заключение

Решение между ссылками и формами становится простым, когда вы понимаете семантику:

• Переход на страницу? Используйте ссылку.
• Сбор пользовательского ввода для запроса? Используйте GET-форму.
• Отправка данных, которые изменяют состояние сервера? Используйте POST-форму.
• Выполнение PUT/PATCH/DELETE? Используйте JavaScript.

Выбирайте элемент, который соответствует намерению действия. Семантический HTML — это не просто вопрос корректности. Именно он делает ваш интерфейс предсказуемым, доступным и удобным в поддержке.

Часто задаваемые вопросы

Могу ли я использовать форму с методом GET вместо ссылки для навигации?

Технически да, но обычно это неправильный семантический выбор. GET-форма предназначена для сбора пользовательского ввода и добавления его к URL в виде параметров запроса. Для простой навигации без пользовательского ввода ссылка является правильным семантическим выбором. Ссылки индексируются поисковыми системами, поддерживают контекстное меню правой кнопки мыши и чётко передают навигационное намерение как браузерам, так и вспомогательным технологиям.

Почему моя форма с method link всё равно работает в браузере?

Браузеры рассматривают любое нераспознанное значение метода как невалидное и молча возвращаются к GET, который является методом формы по умолчанию. Поэтому форма с method link всё равно отправляется, но ведёт себя точно так же, как GET-форма. Это может скрывать ошибки и приводить к запутанному поведению. Всегда используйте get или post в качестве значения метода формы.

В чём разница между submit() и requestSubmit() в JavaScript?

Метод submit() отправляет форму немедленно без запуска встроенной HTML-валидации и без генерации события submit. Метод requestSubmit() ведёт себя как клик пользователя по кнопке отправки. Он сначала запускает валидацию ограничений и генерирует событие submit, позволяя обработчикам событий перехватить или отменить отправку. Используйте requestSubmit(), когда вам нужно, чтобы валидация выполнялась.

Как отправить DELETE или PUT запрос со HTML-страницы?

HTML-формы поддерживают только GET и POST в качестве значений метода. Для отправки DELETE, PUT или PATCH запросов вам нужен JavaScript с использованием fetch или XMLHttpRequest. Некоторые серверные фреймворки также поддерживают паттерн переопределения метода, где вы отправляете POST-форму со скрытым полем ввода, которое указывает предполагаемый HTTP-метод, который затем интерпретируется сервером соответствующим образом.