How to make a tab switch by radio buttons

Question

I have a user register page in my web and i need to switch form details by radio when user select it

Like this

<form>
  <label>1: <input type=radio  name="userType" value="1"/></label>
  <br>
  <label>2: <input type=radio  name="userType" value="2"/></label>
  <br>
  <label>3: <input type=radio  name="userType" value="3"/></label>
  <br>
  <div class="tab-1"><input placeholder="UserType 1 Input"></div>
  <div class="tab-2"><input placeholder="UserType 2 Input"></div>
  <div class="tab-3"><input placeholder="UserType 3 Input"></div>

</form>

Can i do with only using html,js and css

Answer 1

Yes, You Can Do it with using only js,  css and html

Try this code

Update ( 1 )

const tabs = document.querySelectorAll(".tab");
const radio = document.querySelectorAll(".toggleTab");
const inputs = document.querySelectorAll(".tab input");

for(var x=0; x < radio.length; x++){
  radio[x].addEventListener("change", function(){
    for(var y = 0; y < inputs.length; y++){
      inputs[y].value = "";
    }
  
    for(var i=0; i < tabs.length; i++){
      tabs[i].classList.add("d-none");
      if(this.checked && tabs[i].getAttribute("tabname") == this.value){
        tabs[i].classList.remove("d-none")
      }
    }
    
  });
}

.d-none{ display:none; }

<form>
  <label>1: <input type=radio class="toggleTab"  name="userType" value="1" checked></label>
  <br>
  <label>2: <input type=radio  class="toggleTab" name="userType" value="2"/></label>
  <br>
  <label>3: <input type=radio  class="toggleTab" name="userType" value="3"/></label>
  <br>
  <div class="tab" tabname=1>
      <input placeholder="UserType 1 Input">
  </div>
  <div class="tab d-none" tabname=2>
      <input placeholder="UserType 2 Input">
  </div>
  <div class="tab d-none" tabname=3>
      <input placeholder="UserType 3 Input">
  </div>

</form>

Answer 2

Maybe the simplest way is:

document.addEventListener('DOMContentLoaded', () => {
  const form = document.querySelector('form');
  const tabs = form.querySelectorAll('.tab');
    
  form.addEventListener('change', ({target}) => {
    if (target.name !== 'userType') return;
        
    const tabToShow = form
      .querySelector(`.tab-${target.value}`);
      

    tabs.forEach(tab => {
        const tabInput = tab.querySelector('input');
      
      tabInput.value = '';
      tab.classList.add('hidden');  
    });
     
    tabToShow.classList.remove('hidden');
  })
});

.hidden {
  display: none;
}

<form>
  <label>1: <input checked type=radio  name="userType" value="1"/></label>
  <br>
  <label>2: <input type=radio  name="userType" value="2"/></label>
  <br>
  <label>3: <input type=radio  name="userType" value="3"/></label>
  <br>
  <div class="tab tab-1"><input placeholder="UserType 1 Input"></div>
  <div class="tab tab-2 hidden"><input placeholder="UserType 2 Input"></div>
  <div class="tab tab-3 hidden"><input placeholder="UserType 3 Input"></div>

</form>