Как правильно реализовать выбор данной опции?

Question

[Alex_87]

Это должно быть реализовано как группа скрытых радиокнопок, спрятанных за картинки?

Comments

[Ankhena]

Это должно быть реализовано как группа скрытых радиокнопок, спрятанных за картинки?

Да, типа того.
Стилизованные лейблы от этих инпутов.
Или лейблы поверх инпутов с apperance none.

Answer 1

[Denioo]

input + label, самый простой пример вот https://codepen.io/manabox/pen/raQmpL

Answer 2

[Владимир Коротенко]

Лично я вижу 3 компонента "карточка". При щелчке на ней она обводится рамкой, и в вашем хранилище меняется индекс.

Никаких инпутов, чек боксов и прочей ереси, это компоненты с событиями и хранилищем.

Comments

[Alex_87]

это данные формы, я не просто говорю об этих элементах.

[Владимир Коротенко]

Alex_87, Вы спрашивали как это должно быть реализовано.
Так вот это не форма а сложный контрол, который собирает данные.
На этом экране собирается 2 параметра:
1. Идентификатор тарифного плана
2. Срок оплаты

Итого псевдокод:

1. отрисовать на основе массива тарифных планов карточки и привязать к клику отрисовку рамки и передачу Id тарифного плана
2. изменить срок оплаты при переключении переключателя

И все. Для отправки на сервер уже в конце визарда сформируете json или там форму и отправите.

[Alex_87]

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

А теперь вопрос. как это реализовать, как совместить скрытые radio кнопки с элементом рамки. Про отправку я не спрашиваю.

[Алексей Уколов]

инпутов, чек боксов и прочей ереси

Доступность? Семантика? Не, не слышал, и так сойдёт.

[Владимир Коротенко]

Алексей Уколов, Про тэги доступности вы видимо не слышали?
А они есть и рекомендованы к расстановке, а элементы верстки это костыли что бы сохранять удобочитаемость

[Владимир Коротенко]

Alex_87, Попытаюсь объяснить без оскорблений.
Итак на изображении я вижу виззард.
Если это форма тэг форм то это знатное извращение когда 20 полей развернули на 5 этапов.

Если это не форма а именно виззард из компонентов, то все собирается из компонентов и не нужно извращаться ставя какие то радиобаттоны

[Alex_87]

Владимир Коротенко, это Форма и я уже писал об этом! Никакого реакта и прочей фигни. Данные должны обрабатываться объектом FormData!

[Владимир Коротенко]

Alex_87, ну вот форма, создается в ява скрипте

var formData = new FormData();
  formData.append("email", this.email);
    formData.append("name", this.name);

https://github.com/vkorotenko/VueRecaptcha/blob/ma...

Я опять же не вижу почему в вашем примере форма и вы хотите это все сделать формой

[Alex_87]

Владимир Коротенко, https://prnt.sc/2jzJFf6EFY3u

[Владимир Коротенко]

Alex_87, это картинка, я при всем желании не смогу посмотреть код

[Ankhena]

Владимир Коротенко, это форма, потому что по сути мы собираем данные, что-то там делаем и возвращаем пользователю результат.

Про тэги доступности вы видимо не слышали?

Ага, form для формы и т.д.

Если вы про aria, то документация практически начинается со слов, сначала средства html, а если никак, то уже aria, role и т.д.

[Владимир Коротенко]

Ankhena, Слышал, что вам мешает насыпать их в эти самые дивы?
Все будет работать так же.
В общем используйте бритву Оккама

[Ankhena]

Владимир Коротенко,

что вам мешает насыпать их в эти самые дивы

Мне мешает сумма написанных слов: div + aria (role) + tabindex и вот это всё или один нормальный семантический тег.
Другое дело, что мешает использовать семантику при вашем подходе...

[Владимир Коротенко]

Ankhena, Создать картинку , контейнер для нее , стили для скрытия радиобаттона, обвязку для того что бы это действовало.

Извините но выглядит это как говнокод.

[Ankhena]

Владимир Коротенко, а вы без картинки? Какой контейнер? Все картинки там фон. Стилизовать не будете? "Само прилетит?"
Какую обвязку, чтобы это работало? О чем вы вообще? Это работает из коробки форм.

Инпут и лейбл с двумя спанами. Это говнокод? Я, пожалуй, пойду отсюда.

[Владимир Коротенко]

Ankhena, хм а зачем за советами приходили? Вы же похоже знаете сами все

[Ankhena]

Владимир Коротенко, я не приходила за советами. Я пришла поддержать аудиторию выступающую за семантику, а заодно автора вопроса.

[Владимир Коротенко]

Ankhena, поддержать неправильное мнение и неправильное применение доступности?

[Ankhena]

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

[Владимир Коротенко]

Ankhena, Автор выдвинул уродское требование и следует ему. Вы как куратор потакаете ему, вместо того что бы намекнуть что есть другой путь. Задумайтесь над этим

[Алексей Уколов]

Владимир Коротенко, вам два куратора пишут, что вы предлагаете кривую ерунду. Задумайтесь над этим.

[Владимир Коротенко]

Алексей Уколов, Знаете мне грустно от таких кураторов.
Похоже что они обучались на курсах как войти в IT.
Разберем эту задачу и советы недокураторов.

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

Я же предлагаю использовать контейнер данных + привязку к данным. Блин лучшие практики из ООП, mvvm, KISS

Но мне говорят что это фигня и это так не работает.

Блин ребята вы что ?

[Алексей Уколов]

Разумеется тут нужно использовать лучшие практики и инструменты, в частности data-binding. С этим никто не спорит. Прочитайте ещё раз какие конкретно слова и почему я процитировал изначально.
Просто к лучшим практикам во фронтенде дополнительно относится ещё и использование конкретных тегов, которое никак не мешает никаким акронимам-баззвордам.
Недоотвечающийнекуратор, видимо, не обучался даже на курсах (смотрите — переходить на личности, можете не только вы), а сразу как заболел диватозом пошёл учить плохому налево и направо, а когда ему на это указали, стал отвечать на несуществующие аргументы оппонентов и придумывать их биографию.