Как сделать такую разметку?

Question

[Vladislav]

Как правильно структурировать HTML для такой разметки, я так понимаю надо запихнуть в form, но тут нет кнопки применения фильтров, только сами чекбоксы, а Показать это просто скрытый блок

Comments

[alexalexes]

Если нет кнопки "Применить", то наличие формы особой погоды не сделает.
Все галочки и выбранные пункты будет обрабатывать JS скрипт.
Но для JS хорошо бы определить контейнер, относительно которого можно было искать тот или иной элемент управления фильтром. Этим контейнером может выступать по классике form, хотя он не будет применяться в полной мере.

[Vladislav]

alexalexes, или обычный div? скриптом вы имеете ввиду циклом?

[alexalexes]

Нет. К примеру выбирать все input-ы можно имея div контейнер.

var inputs = document.querySelectorAll('div.класс_контейнера_фильтра input');

и с каждым input работать отдельно. Вероятно, такая форма будет делать ajax запрос на сервер.
При составлении такого запроса все равно будет составляться отдельный объект FormData, который не зависит от верстки.
Аналогичным методом можно получить доступ к контейнеру с тегом form.
Хотя, лучше уточнить у программистов, которые будут добавлять логику в ваш макет.

[Vladislav]

alexalexes, спасибо большое

[Ankhena]

Если совсем по-хорошему, то это форма и в ней должна быть кнопка submit.
Просто если js есть, то кнопку скрываем, форму обрабатываем js'ом.
Если js'а по какой-то причине нету (выключен, потерялся, ошибки), то будет обычная форма.

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

[Vladislav]

Ankhena, спасибо, понял

[Vladislav]

Ankhena, get или post тут в форме?

[Ankhena]

Vladislav, get, это же фильтр

Answer 1

[Stalker_RED]

Кнопка не нужна, можно просто слушать событие change у формы.


Есть красивые готовые фильтры, типа isotope.
Есть и для фасетного поиска библиотеки.

Comments

[Vladislav]

Stalker_RED спасибо)