HTMLにてフォームをボタンで追加

Question

###前提・実現したいこと
HTMLのみで「フォームを追加」ボタンを設置
そのボタンをクリックするたびに入力フォームを3つ表示したい

ただし、JavaScriptなどは使わずにHTMLのみで実装したい
流れとしてはボタンクリックでPOSTで更新が行われ、すでに入力中の値は保持したまま、フォームのみ追加で表示する形

Answer 1

<label>と<input type="checkbox">のコンビネーションで不可能ではないですね。
サンプル https://jsfiddle.net/f61uz7be/

<p>
  <input type="text"><input type="text"><input type="text">
</p>
<input type="checkbox" id="f1">
<label for="f1">フォームを追加 1</label>
<p>
  <input type="text"><input type="text"><input type="text">
</p>
<input type="checkbox" id="f2">
<label for="f2">フォームを追加 2</label>
<p>
  <input type="text"><input type="text"><input type="text">
</p>
<input type="checkbox" id="f3">
<label for="f3">フォームを追加 3</label>
<p>
  <input type="text"><input type="text"><input type="text">
</p>
<input type="checkbox" id="f4">
<label for="f4">フォームを追加 4</label>
<p>
  <input type="text"><input type="text"><input type="text">
</p>
<input type="checkbox" id="f5">
<label for="f5">フォームを追加 5</label>
<p>
  <input type="text"><input type="text"><input type="text">
</p>

label {
  border: 1px solid #000;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
}
input[type=checkbox]
, input[type=checkbox]:checked + label
, input[type=checkbox]:not(:checked) + label + p input
, input[type=checkbox]:not(:checked) + label + p + input[type=checkbox] + label {
  display: none;
}

ただ他の方もおっしゃる通り、「なぜJavaScriptを使いたくないのか」を言っていただくと、もっといい選択肢を提示できると思います。

Comments

[68H_]

非常に参考にります、JSを使いたくない理由なんですが
構造がややこしくなるのを防ぐためにHTMLだけで実装が可能なのかどうかを調べたかっただけなんですが混乱させてしまい申し訳ありません。

Answer 2

いったんPOSTしての再表示となると、レスポンスは悪いですし、サーバサイドでの処理も必要となります。

なぜ「JavaScriptなどは使わずに」実現したいのか、そこを教えていただければ代替案が見つかるかもしれません。

Answer 3

JavaScriptなどは使わずにHTMLのみで実装したい

不可能です。素直に JavaScript を使う以外に方法はありません。