Наложение HTML-страницы на HTML-форму

Question

это вопрос о наилучшем (или наименьшем усилии из лучших) наложении html-страницы на форму. Лучшее в этом контексте означает лучший пользовательский опыт при соблюдении функциональных требований.

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

Для пользователей без JavaScript, щелкнув ссылку, вы отправите короткую форму (сохраняя уже заполненные поля в сеансе), а сервер ответит длинной формой. Они отправят полную форму, и сервер объединит представленные данные с сохраненными данными и снова предоставит краткую форму с заполненными полями.

Для пользователей с javascript я хочу наложить краткую страницу (в стиле лайтбокса) на длинную форму, позволить им заполнить длинную форму и затем вернуться к короткой форме с меньшим количеством обращений к серверу.

Должен ли я:

• Наложить на страницу краткой формы элемент iframe, целью которого является полная форма?
• Запросить длинную форму поверх ajax и вставить ее в div?
• Создать полную форму полностью на стороне клиента?
• Какой-то другой волшебник, о котором я не думал?

Краткое объяснение лучшего механизма действительно мне очень приятно. Большое спасибо!

Answer 1

Я использую Colorbox для такого рода вещей, это действительно хорошо.

Вы можете указать содержимое встроенным или через другой URL (что я и делаю). Вероятно, лучше использовать этот второй метод, поскольку он делает вашу веб-страницу намного чище и запрашивает содержимое формы только при необходимости. Это также означает, что вы можете отправить обратно в эту форму (через AJAX, если требуется), сохраняя весь опыт более чистым

Проверьте это здесь - нажмите "Пометить этот смайлик". Форма взята с удаленного URL и отправлена ​​обратно на нее внутри формы с помощью jQuery. Это, очевидно, простая версия того, что вы хотите, но работает и выглядит очень красиво.

Для вашего сценария, где вы хотите достойный запасной вариант для пользователей без javascript, у меня будет форма на веб-странице, но скрытая с помощью javascript, затем используйте Colorbox для загрузки, используйте этот контент для всплывающего окна при необходимости.

Answer 2

Я бы подумал о варианте №2.

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

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