当表单输入遍布整个页面时,最好的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. 将所有复选框放在 header 中并用 div 包裹起来
2. 设置并空但干净的侧栏
3. 使用 Javascript，将复选框从标题移动到侧栏
4. 将回调附加到该form.submit事件，当用户提交表单时，取消该事件，从搜索字段和复选框中获取数据并将其作为 Ajax POST 请求发送。

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

如果用户启用了 JS，表单将发布请求，一切都会正常。如果用户没有启用 javascript，则复选框将位于标题中，因此它们将起作用，但代价是设计稍微不太优雅。

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