Каков наилучший подход к 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 для генерации входных записей в более нормальной форме? Или это единственный вариант?

Любые творческие решения или идеи?

Ответы

Ответ 1

Вы можете заставить его работать с Javascript, не жертвуя при этом

  • Поместите все флажки в заголовок и заверните их в div
  • Настройка и пустая, но чистая боковая панель
  • Используя Javascript, переместите флажки из заголовка в боковую панель.
  • Прикрепите обратный вызов к событию form.submit, и когда пользователь отправит форму, отмените это событие, возьмите данные из поля поиска и флажков и отправьте их как запрос AJAX POST.

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

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

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

Ответ 2

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

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

Ответ 3

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

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

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

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

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