当表单输入遍及整个页面时,最好的HTML方法是什么?

前端之家收集整理的这篇文章主要介绍了当表单输入遍及整个页面时,最好的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禁用的用户可以设计更改,因此可以使用.

猜你在找的HTML相关文章