Как правильно организовать страницу с формой?

Question

Первоначально при загрузке страницы отображается только один блок с двумя радиокнопками. При выборе радиокнопки необходимо, чтобы подгрузились несколько блоков с НЕ одинаковыми label и input. В зависимости от выбранной кнопки, это должны быть разные блоки (при нажатии радиокнопки, например, авто, будут label'ы и input'ы с вводом данных о авто и при нажатии мотоциклы - о мотоциклах). Блок с радиокнопками остается выше динамически подгруженных блоков с label и input. Опыта с написанием html и jQuery очень мало. Вопрос такой. Как обычно организовывают такую динамическую подгрузку разных форм? Есть необходимость в разметке html или же достаточно использовать только JS/jQuery?

Примитивная модель:

<div id="content">
  <form method="post" action="/">
    <h2>Светофор</h2>
    <input type="radio" id="red" name="light" value="red" />
    <label for="red">Красный</label><br />
    <input type="radio" id="green" name="light" value="green" />
    <label for="green">Зеленый</label><br />
    <div>Что вы будете делать, когда горит красный сигнал светофора:</div>
    <input class="input" id="red_answer" type="text" />
    <div>Что вы будете делать, когда горит зеленый сигнал светофора:</div>
    <input class="input" id="green_answer" type="text" />
  </form>
</div>

Изначально есть это:

<div id="content">
  <form method="post" action="/">
    <h2>Светофор</h2>
    <input type="radio" id="red" name="light" value="red" />
    <label for="red">Красный</label><br />
    <input type="radio" id="green" name="light" value="green" />
    <label for="green">Зеленый</label><br />
  </form>
</div>

При нажатии кнопки Красный, станет так:

<div id="content">
  <form method="post" action="/">
    <h2>Светофор</h2>
    <input type="radio" id="red" name="light" value="red" />
    <label for="red">Красный</label><br />
    <input type="radio" id="green" name="light" value="green" />
    <label for="green">Зеленый</label><br />
    <div>Что вы будете делать, когда горит красный сигнал светофора:</div>
    <input class="input" id="red_answer" type="text" />
  </form>
</div>

При нажатии Зеленый - соответствующий зеленый блок.

Answer 1

Можно выбрать другие селекторы, чтобы упростить CSS (например вместо for аттрибута в div-е использовать класс), но в целом логика не изменится. Про тильду в селекторе можно прочитать тут

[for="red"]:not(label),
[for="green"]:not(label) {
  display: none;
}

input[type="radio"][id="red"]:checked ~ [for="red"]:not(label) {
  display: block;
  background-color: red;
}

input[type="radio"][id="green"]:checked ~ [for="green"]:not(label) {
  display: block;
  background-color: green;
}

<div id="content">
  <form method="post" action="/">
    <h2>Светофор</h2>
    <input type="radio" id="red" name="light" value="red" />
    <label for="red">Красный</label><br />
    <input type="radio" id="green" name="light" value="green" />
    <label for="green">Зеленый</label><br />
    <div for="red">
      <div>Что вы будете делать, когда горит красный сигнал светофора:</div>
      <input class="input" id="red_answer" type="text" />
    </div>
    
    <div for="green">
      <div>Что вы будете делать, когда горит зеленый сигнал светофора:</div>
      <input class="input" id="green_answer" type="text" />
    </div>
  </form>
</div>

БЛОГ НА HUSL

Как правильно организовать страницу с формой?

Ответы (1 шт):