当表单输入遍及整个页面时,最好的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>

这将工作,除了三件事情：

>我需要使用页面中的其他表单,如上所述.
>我使用不同的django模板来生成标题和侧边栏,使模板彼此有依赖关系.
>这是一个真正的混乱,因为侧栏实际上是大约100行,而不是三行.

有没有一个更聪明的方法来做到这一点,我不知道,或者正在创建巨大的HTML表单的规范？在这种情况下,最好使用Javascript以更正常的形式生成输入条目？还是唯一的选择？

任何创意解决方案或想法？

解决方法

您可以使其在Javascript中使用而不牺牲访问性

将所有复选框放在标题中,并将其包装成div
>设置和空,但干净的侧栏
>使用Javascript,将标题中的复选框移动到侧栏中
>将回调附加到form.submit事件,并且当用户提交表单时,取消事件,然后从搜索字段和复选框中获取数据,并将其作为Ajax POST请求发送.

使用像jQuery的框架,这是一个15分钟的工作.

如果用户有JS启用,表单将发布请求,一切都将工作.如果用户没有启用javascript,复选框将在标题中,因此它们将按照稍微优雅的设计的价格工作.

但是,使用Javascript禁用的用户可以设计更改,因此可以使用.

原文地址：https://www.jb51.cc/html/230400.html