[HTML] input 태그 type: radio 한 묶음으로 만들기

 

radio 버튼은

input type="radio"를 사용해서 만들곤 합니다.

radio버튼을 여러개 중에 하나만 선택이 가능하게 만들어주는 기능인데,

input 여러개를 묶어주는 기능은

label의 for값과 input의 id값을 동일하게 진행하면 됩니다.

(input의 name값은 서버로 보내질 이름입니다.)

id값을 같게 설정한 radio버튼은 하나의 묶음으로 인식되게 됩니다.

 

복사용 코드

<div class="box">

  <label for="circle " class="label">

  <input type="radio" name="server" id="circle " class="iunput">

  </label>

  <label for="circle" class="label">

  <input type="radio" name="server" id="circle " class="iunput">

  </label>

</div>

<div class="secondbox">

  <label for="secondcircle " class="label">

  <input type="radio" name="server2 " id="secondcircle" class="iunput">

  </label>

  <label for="secondcircle" class="label">

  <input type="radio" name="server2" id="secondcircle" class="iunput">

  </label>

</div>

 

 

코드펜 바로가기

https://codepen.io/kkcong/pen/zYexEGG

zYexEGG