Разрушение длинной формы

  • Автор темы lenar1
  • 41
  • Обновлено
  • 17, May 2024
  • #1
Всем привет, У меня есть немного глупый вопрос/проблема, над которой я бьюсь уже несколько часов, поэтому решил обратиться сюда и спросить вас, ребята, у которых больше опыта, чем у меня! Я пытаюсь создать форма макета

Я хочу использовать как свой телефон, так и компьютер, чтобы проиллюстрировать концепцию некоторым коллегам. Я попробовал использовать конструктор форм jqueryform

но это было не то, чего я хотел.

Идея состоит в том, чтобы создать интерактивную адаптивную форму, поэтому я использую это:
 
<meta name="viewport" content="ширина = ширина устройства, начальный масштаб = 1, максимальный масштаб = 1, масштабируемый пользователем = 0">


Код (разметка): кажется, он очень хорошо работает с точки зрения адаптивного размера веб-страницы!

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

Я попытался проиллюстрировать это с помощью горизонтальных правил.

Можно ли показать/скрыть+сбросить всю «страницу/шаг» в зависимости от значения Опция 1? Проверка формы — еще одно минное поле, за которое я даже не начал браться! Почти все поля будут обязательными в зависимости от выбора, а также будут иметь диапазоны переменных значений.

С другой стороны, некоторые поля необходимо будет сбросить/обнулить, если родительский выбор отключен, например, значение ввод диапазона если опция 2 не отмечена. В этой форме я использовал Тумблер W3

(что чертовски круто выглядит) и изо всех сил пытался применить rangelider.js

к моему входному диапазону (по какой-то причине CSS/стиль не отображается!).

Кроме того, пока я здесь, я буду стонать из-за своей вычислительной функции, которая сейчас работает, но не имеет смысла! Я пытаюсь заставить его вычесть val5 из val6 (val6-val5), но когда я это формулирую так, он не показывает правильный ответ.

Мне пришлось прибегнуть к (val5-val6), что в корне неверно при написании ручки и бумаги.

Но я не знаю, что там происходит! Я думаю, что моя самая насущная проблема сейчас заключается в том, как мне изменить эту форму на многостраничную форму и, если мне повезет, заставить форму реагировать на значение варианта 1, добавив/отключив необязательную страницу/шаг.

Я с нетерпением жду ваших мыслей Спасибо

lenar1


Рег
21 Dec, 2011

Тем
1

Постов
2

Баллов
12
  • 21, May 2024
  • #2
Это распространенный (слишком распространенный) метод представления форм.

Еще одно применение этого многоэтапного подхода – опросы.

Позвольте мне сказать вам, что с точки зрения пользователя этот подход действительно отстой для обоих.

Я не скажу вам, что это отстой, но это связано с кабанами.

Все пользователи знают, как перейти к следующему вопросу или группе вопросов.

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

Примером изгнания вашего посетителя в приват является блокировка его записи или страницы до тех пор, пока ошибка не будет исправлена.

Вежливо сообщите ему о проблеме и позвольте ему продолжить.

Возможно, ему нужно что-то найти, например.

документы, адрес, номер телефона и т. д. Если он предпочитает дойти до конца, найти то, что ему нужно, а затем продолжить, позвольте ему. Кстати, речь идет не о том, что вам нужно, а о том, чтобы посетителю было проще предоставить информацию.

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

123456123456


Рег
30 Oct, 2006

Тем
0

Постов
3

Баллов
3
  • 03, Jun 2024
  • #3
Спасибо за резкий, но открывающий глаза ответ. Я решил переформатировать форму, как вы посоветовали, однако я по-прежнему придерживаюсь многоэтапного подхода, поскольку все еще считаю, что это то, что мне нужно. Мне просто нужно сделать это хорошо!
 

Avatar2


Рег
06 Aug, 2010

Тем
1

Постов
16

Баллов
26
  • 03, Jun 2024
  • #4
1) Старайтесь не делать ничего подобного на стороне клиента, кроме как в качестве улучшения.

НИКОГДА не отправляйте расчеты на стороне клиента на сервер, поскольку им НЕЛЬЗЯ доверять.

С этой целью ваша область «баланса» не имеет отношения к HTML и должна быть добавлена JS, когда JS доступен. 2) Избегайте использования включениясобытие атрибуты. Это небрежное дерьмо для вещей, которые не имеют НУЛЕВОГО отношения к HTML, и если вы когда-нибудь в конечном итоге развернете их в соответствии с «Политикой безопасности контента», ИХ ДАЖЕ НЕ СУЩЕСТВУЕТ!!!. Хотите перехватывать события, делайте это из СЦЕНАРИЯ! (addEventListner для современных браузеров, AttachEvent, если вам важен старый IE) Итак, я думаю, что первым шагом было бы исправить вашу разметку, перетащив ее в правильную семантику и структуру.

но, честно говоря, это такой беспорядок с доступностью и дизайном, я бы серьезно подумал о том, чтобы переосмыслить, как вы вообще запрашивать у пользователей информацию. Когда дело доходит до чего-то ВАЖНОГО, например, формы, не переходите к полному сценарию.

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

LikRaise


Рег
06 May, 2015

Тем
0

Постов
2

Баллов
2
Тем
49554
Комментарии
57426
Опыт
552966

Интересно