GET-форма: проследить путь от поля до URL
В этом упражнении обычная форма показывает, как браузер превращает пользовательский ввод в строку запроса. Это помогает отлаживать поиск без добавления JavaScript.
Назначение
В этом упражнении обычная форма показывает, как браузер превращает пользовательский ввод в строку запроса. Это помогает отлаживать поиск без добавления JavaScript.
Как это работает
Method="get" отправляет данные в URL. Для включения обычного поля в набор данных нужен name; id связывает подпись, но не заменяет имя параметра. Браузер сам кодирует специальные символы при сериализации формы.
Пример
<form action="/search/" method="get">
<label for="term">Поисковая фраза</label>
<input id="term" name="q" value="HTML & CSS">
<button type="submit">Проверить запрос</button>
</form>Что должно получиться
В отдельном локальном проекте отправка создаст запрос к /search/ с параметром q. Если обработчик поиска отсутствует, сервер может вернуть 404, но сам сформированный запрос всё равно виден в Network. Песочница сайта формы не отправляет.
Граница применения и частая ошибка
Не собирайте URL ручным склеиванием значения поля с адресом. Символ & внутри пользовательского текста должен кодироваться, иначе он будет воспринят как разделитель параметров. Секретные данные не подходят для такой демонстрации.
Самостоятельная проверка
Введите пробелы, амперсанд и кириллицу. Сопоставьте адресную строку с разделом параметров в Network. Затем временно уберите name и повторите опыт: объясните, почему значение поля исчезло из запроса.