Представь, что в одном опросе нужно оценить несколько продуктов, но заранее неизвестно, пользовался ли опрашиваемый всеми продуктами. Правильно с положительным ответом на вопрос "Вы пользовались продуктов N?" выводить поля оценки продукта и прятать при отрицательном.
Так не попадет "мусор" в сбор статистики.
"Живучесть", динамичность форме даёт небольшой JavaScript-сценарий, который следит за выбором пользователя. Как только выбор меняется, скрипт даёт команду: «Показать» или «Спрятать».
Технически динамическая форма выглядит так:
По умолчанию все дополнительные поля скрыты с помощью CSS свойства "display:none", также само поле отключено свойством disabled.
JavaScript следит за изменениями, нажатиями на элементы html и меняет свойства в зависимости от выбранных элементов.
Это пример того как может выглядеть динамическая веб форма.
Демо формы с показом полей
Пример: по выбору radio-кнопки открываются нужные поля.
Далее приведён пример HTML, CSS, JavaScript без лишних стилей - так проще понять саму логику работы динамического показа и скрытия полей формы в зависимости от выбранного варианта в radio-кнопках.
Общий принцип работы следующий: JavaScript отслеживает выбранный элемент формы и, в зависимости от выбора, изменяет свойства других элементов. В частности, он управляет отображением блока (меняя display: none на display: block) и состоянием поля ввода (включая или отключая его через disabled, disabled = false на true).
function toggleDiv() {
if (q1_yes.checked) {
showdiv.style.display = 'block';
commentdis.disabled = false;
} else {
showdiv.style.display = 'none';
commentdis.value = '';
commentdis.disabled = true;
}Важно учитывать, что простое скрытие элемента на странице не гарантирует, что его данные не будут отправлены на сервер. Поэтому на стороне сервера обязательно нужно дополнительно проверять входящие данные и учитывать логику формы.
<form id="demoform" action="#" method="post">
<p>Добавить поле?</p>
<p>Да <input type="radio" name="questions-one" id="q1_yes-1" value="yes"></p>
<p>Нет <input type="radio" name="questions-one" id="q1_no-1" value="no"></p>
<!--Поле которое открывается при выборе radio кнопки с id = q1_yes-1, само поле прячется в скрытом div через css display none-->
<div id="radio-q1-yes-1" style="display:none;">
<p>Дополнительное поле (может быть любым видом, чаще нужен text для "Свой комментарий")</p>
<!-- отключаем запись пока скрыт disabled-->
<p><input type="text" name="mycomment" id="disabled1" placeholder="Введите свой комментарий" disabled></p>
</div>
<p><input type="submit" value="Отправить">
</form>
<!-- JS меняем свойство display с none на block по id div и варианта ответа -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// ищем первый ответ с id q1_yes и нет (искать нет не обязательно, это если вдруг надо вывести иное поле)
const q1_yes = document.getElementById('q1_yes-1');
const q1_no = document.getElementById('q1_no-1');
// ищем див который будем показывать
const showdiv = document.getElementById('radio-q1-yes-1');
// ищем disabled чтобы включить потом
const commentdis = document.getElementById('disabled1');
//функция проверки id и изменения
function toggleDiv() {
if (q1_yes.checked) {
showdiv.style.display = 'block';
commentdis.disabled = false;
} else {
showdiv.style.display = 'none';
commentdis.value = '';
commentdis.disabled = true;
}
}
//Мониторим изменения
q1_yes.addEventListener('change', toggleDiv);
q1_no.addEventListener('change', toggleDiv);
toggleDiv();
})
</script>Демо: