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

Назначение

Поиск по нескольким разделам должен ясно показывать область действия. В упражнении строка запроса и выбор раздела отправляются как разные параметры одной формы.

Как это работает

Каждое поле имеет собственную подпись и name. GET подходит для воспроизводимого поиска по несекретным данным. Адрес /demo-search требует вашего тестового обработчика; макет не реализует поиск самостоятельно.

Пример

<search aria-label="Поиск по разделу"><form action="/demo-search" method="get" class="scoped-search"><label for="scope-query">Запрос</label><input id="scope-query" name="q" type="search"><label for="scope-section">Раздел</label><select id="scope-section" name="section"><option value="all">Все разделы</option><option value="html">HTML</option><option value="css">CSS</option></select><button type="submit">Найти в выбранном разделе</button></form></search>
<style>.scoped-search{display:grid;gap:.5rem;max-width:30rem}.scoped-search input,.scoped-search select,.scoped-search button{font:inherit;padding:.6rem;min-width:0}</style>

Что должно получиться

Запрос и section передаются раздельно, позволяя серверу повторить выбор. В песочнице можно оценить разметку и размер элементов, но не сетевую отправку.

Граница применения и частая ошибка

Не храните секретные значения в параметрах URL. Сервер должен проверять section по разрешённому набору и корректно обрабатывать неизвестный код. После показа результатов восстановите выбранный раздел, чтобы контекст поиска не потерялся.

Самостоятельная проверка

В своём проекте отправьте два одинаковых запроса с разными разделами и сравните URL. Проверьте возврат назад и пустой запрос. Убедитесь, что результаты явно сообщают, в каком разделе выполнялся поиск.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.

Связанные материалы

• Подписи полей
• Выбор значения
• Печатные стили