折りたたみ可能なアプリケーションフォームの作成

Question

htmlアプリケーションフォームページを作成します。ここにドロップダウンメニューがあります。そのドロップダウンから選択した値に応じて、ドロップダウンメニューの下の領域が展開され、ラベル付きの入力テキストボックスがいくつか表示されます。私はWeb開発の初心者ですから、わかりやすいフォームを使用することがとてもうれしいです。 この機能を実現するには、テンプレートまたはソリューションを共有してください。 私はそこから続行する方法enter code here

<form action="/action_page.php"> 
    <select name="occupation"> 
    <option value="student">Student</option> 
    <option value="academician">Academician</option>  
    </select> 
</form> 

をヘクタールませんか？どんな提案やアドバイス、リンクもたくさんあります。 JSとCSSなし

Answer 1

それは、あなたがあなたのDOM要素がインタラクティブにするために任意のクライアント側のスクリプトを使用する必要があり、可能ではない私は、ここでのサンプルコードを追加している：

をあなたはさらにいくつかのアニメーションを使用してカスタマイズすることができますjQueryを使用してより簡単に行うことができます。

var selEle = document.getElementById("formSelector"); 
 
selEle.onchange = function(){ 
 
    var selectedVal = selEle.options[selEle.selectedIndex].value; 
 
    var allSections = document.getElementsByClassName("form-section");   
 
    for(var i = 0; i < allSections.length; i++){ 
 
     var ele = allSections.item(i); 
 
     if(ele.id == selectedVal){ 
 
     ele.style.display = "block"; 
 
     } 
 
     else{ 
 
     ele.style.display = "none"; 
 
     } 
 
    } 
 
}

<form> 
 
<label for="sectionSelector">Select Form Section</label> 
 
<select id="formSelector" name="sectionSelector" onchange="runActFun(this)"> 
 
<option value="">-Select-</option> 
 
<option value="section1">show Section Form 1</option> 
 
<option value="section2">show Section Form 2</option> 
 
</select> 
 
<br/> 
 
<br/> 
 
<div id="section1" class="form-section" style="display:none;"> 
 
<label for="input1_1">Input 1.2</label> 
 
<input type="text" name="input1_1"></input> 
 
<br/> 
 
<br/> 
 
<label for="input1_2">Input 1.2</label> 
 
<input type="text" name="input1_2"></input> 
 
</div> 
 
<div id="section2" class="form-section" style="display:none;"> 
 
<label for="input2_1">Input 2.1</label> 
 
<input type="text" name="input2_1"></input> 
 
<br/> 
 
<br/> 
 
<label for="input2_2">Input 2.2</label> 
 
<input type="text" name="input2_2"></input> 
 
</div> 
 

 
</label> 
 

 
</form>