html - 当表单输入遍布整个页面时，最好的 HTML 方法是什么？

Question

我正在构建一个分面搜索系统，它在边栏中有输入(分面是复选框)，在页面标题(主查询框)中有输入。当用户提交搜索时，所有这些输入都会同时提交。

我能想到的唯一方法是将整个页面包装在一个 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 以某种方式以更正常的形式生成输入条目是否更好？或者这是唯一的选择？

有什么创造性的解决方案或想法吗？

Answer 1

您可以在不牺牲可访问性的情况下使其与 Javascript 一起工作

1. 把所有的checkbox都放在header里，然后用div包起来
2. 设置并清空但干净的边栏
3. 使用 Javascript，将您的复选框从标题移动到侧边栏
4. 将回调附加到 form.submit 事件，当用户提交表单时，取消该事件，然后从搜索字段和复选框中获取数据并将其作为 Ajax POST 发送请求。

使用像 jQuery 这样的框架，只需 15 分钟即可完成。

如果用户启用了 JS，表单将发布请求并且一切正常。如果用户没有启用 javascript，复选框将位于标题中，因此它们可以正常工作，但代价是设计稍微不那么优雅。

但是禁用 Javascript 的人习惯于设计更改，所以没关系。