Что такое лучший подход HTML, когда входные данные формы распределены по всей странице?

Я создаю фасетную поисковую систему, которая имеет входные данные на боковой панели (фасеты - флажки) и входные данные в заголовке страницы (основное поле запроса). Все эти входные данные отправляются одновременно, когда пользователь отправляет поиск.

Единственный способ, который я могу придумать, - это обернуть всю страницу тегом HTML-формы.Что-то вроде следующего псевдо-html:

<form>
  <div id='header'>
    <logo/>
    <input id='q'/>
    <!-- a bunch more stuff -->
  </div>
  <div id='sidebar'>
    <div id='sidebar-facets-subsection'>
      <input id='facet1'/>
      <input id='facet2'/>
      <input id='facet3'/>
      <!-- a bunch more stuff -->
    </div>
    <div id='sidebar-form-subsection'>
      <form id='unrelated-form'>
        <input id='unrelated-input-1'/>
        <input id='unrelated-input-2'/>
      </form>
    </div>
  </div>
  <!-- a bunch more stuff -->
</form>

Это сработает, за исключением трех вещей:

1. Мне нужно использовать другие формы на странице, как я указал выше.
2. Я использую разные шаблоны django для создания заголовка и боковой панели, благодаря чему шаблоны зависят друг от друга.
3. Это настоящий беспорядок, поскольку на боковой панели в действительности около 100 строк, а не три.

Есть ли более умный способ сделать это, о котором я не знаю, или создание огромных HTML-форм является нормой? В подобных обстоятельствах лучше использовать Javascript для генерации входных записей в более нормальной форме? Или это единственный вариант?

Какие-нибудь творческие решения или идеи?