Каков наилучший подход 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. Поставьте все флажки в заголовке и оберните их в div
2. Установить и опустошить, но чистую боковую панель
3. Используя Javascript, переместите флажки из заголовка в боковую панель
4. Прикрепите обратный вызов к событию form.submit, и, когда пользователь отправит форму, затем отмените событие, возьмите данные из поля поиска и флажков и отправьте их как запрос Ajax POST.

Использование такой инфраструктуры, как jQuery, занимает 15 минут.

Если у пользователя включен JS, форма отправит запрос, и все будет работать. Если у пользователя не включен javascript, флажки будут в заголовке, и они будут работать по цене чуть менее элегантного дизайна.

Но люди с отключенным Javascript используются для разработки изменений, так что все в порядке.

Answer 2

Используйте javascript, чтобы заполнить скрытое поле списком этих флажков. name=value пары в форме отправляют и обрабатывают это в серверном коде, разбивая строку на массив и т. Д. Обратите внимание, что это не очень хороший подход, так как вы теряете приемлемость для тех, у кого отключен JavaScript. Тег формы - это единственный доступный способ сделать это.

Вы можете попытаться изменить макет, если можете, поменяв флажки ссылками на кнопки, которые фильтруют данные, почти так же, как это делают большинство сайтов электронной коммерции.

Answer 3

Я полагаю, у вас есть два варианта:

1.) Элемент формы страницы.Все кнопки «Отправить» отправляют в одну и ту же форму, а серверный скрипт обрабатывает форму для всех заполненных элементов.По всей странице я не буквальный ... Связанные входы все в одном теге формы.Другие формы помещаются в другие теги форм.

2.) Несколько форм, со скриптом на стороне клиента, который заполняет скрытые поля формы данными из другой формы перед отправкой.

1 требует большеработать, но 2 может не работать для каждого посетителя.

Учитывайте тот факт, что только из-за того, что у вас есть один контейнер форм, вам не обязательно отображать все вместе для пользователя.Инкапсулируйте входные данные в div и расположите их согласно вашей воле.Это может быть нелегко, но определенно возможно.