Ссылки и формы в HTTP-запросах
Каждый раз, когда пользователь кликает на навигационную ссылку или отправляет поисковый запрос, браузер выполняет HTTP-запрос. Но то, какой HTML-элемент инициирует этот запрос — и каким образом — имеет гораздо большее значение, чем осознают многие разработчики. Выбор между <a> и <form> — это не просто предпочтение в разметке. Это семантическое решение, которое влияет на поведение, безопасность и корректность работы.
Ключевые выводы
- Ссылки (
<a>) предназначены для навигации и обычно инициируют GET-запросы. Формы (<form>) предназначены для отправки данных и поддерживают как GET, так и POST. - Используйте GET-формы, когда пользовательский ввод формирует URL (например, поисковые запросы), и POST-формы, когда действие изменяет состояние сервера (например, создание учетной записи).
method="link"— невалидный HTML. Браузеры молча переключаются на GET, что может привести к неожиданному поведению.- HTML-формы нативно поддерживают только GET и POST. Для PUT, PATCH или DELETE используйте JavaScript.
Основное различие: навигация 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 — что подходит для конфиденциальных данных и неидемпотентных действий.
Discover how at OpenReplay.com.
Распространённая ошибка: 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-форма предназначена для сбора пользовательского ввода и добавления его к URL в виде параметров запроса. Для простой навигации без пользовательского ввода ссылка является правильным семантическим выбором. Ссылки индексируются поисковыми системами, поддерживают контекстное меню правой кнопки мыши и чётко передают навигационное намерение как браузерам, так и вспомогательным технологиям.
Браузеры рассматривают любое нераспознанное значение метода как невалидное и молча возвращаются к GET, который является методом формы по умолчанию. Поэтому форма с method link всё равно отправляется, но ведёт себя точно так же, как GET-форма. Это может скрывать ошибки и приводить к запутанному поведению. Всегда используйте get или post в качестве значения метода формы.
Метод submit() отправляет форму немедленно без запуска встроенной HTML-валидации и без генерации события submit. Метод requestSubmit() ведёт себя как клик пользователя по кнопке отправки. Он сначала запускает валидацию ограничений и генерирует событие submit, позволяя обработчикам событий перехватить или отменить отправку. Используйте requestSubmit(), когда вам нужно, чтобы валидация выполнялась.
HTML-формы поддерживают только GET и POST в качестве значений метода. Для отправки DELETE, PUT или PATCH запросов вам нужен JavaScript с использованием fetch или XMLHttpRequest. Некоторые серверные фреймворки также поддерживают паттерн переопределения метода, где вы отправляете POST-форму со скрытым полем ввода, которое указывает предполагаемый HTTP-метод, который затем интерпретируется сервером соответствующим образом.
Gain control over your UX
See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
