Для создания формы, которая адаптивно сворачивается подобно навигационному компоненту, можно использовать Bootstrap v5 и JavaScript.
Пример HTML-кода:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adaptive Form</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
```
В данном примере форма для поиска сначала отображается в виде кнопки бургер-меню на мобильных устройствах, которая при нажатии разворачивает поле ввода для поиска. Этот функционал достигается с помощью классов Bootstrap `navbar-toggler`, `collapse`, и `collapse navbar-collapse`.
Если вы хотите, чтобы форма поиска превращалась в кнопку "Развернуть / свернуть параметры поиска" при уменьшении разрешения экрана, вы можете использовать JS для добавления и удаления классов в зависимости от ширины экрана.
Пример JavaScript-кода:
```javascript
const form = document.querySelector('.navbar-collapse');
const navbarToggler = document.querySelector('.navbar-toggler');
if (window.matchMedia("(max-width: 768px)").matches) {
form.classList.add('collapse');
navbarToggler.addEventListener('click', function() {
form.classList.toggle('collapse');
});
}
```
Поместите этот JavaScript-код внутри `<script>` тега в конце `<body>` вашей HTML-страницы.
Таким образом, при ширине экрана менее 768px форма будет свернута и отображаться как кнопка бургер-меню, по нажатию на которую она будет разворачиваться. С шириной экрана более 768px форма будет отображаться как поле ввода для поиска.