HTML에 여러 라디오 버튼 그룹 추가

이 기사에서는 HTML에서 하나의 양식에 여러 라디오 버튼 그룹을 추가하는 방법을 소개합니다.

HTML에서 라디오 버튼의 다른 그룹에 대해 name 속성에 다른 값 사용

HTML에서 라디오 버튼으로 작업하는 동안 때로는 단일 양식에서 여러 라디오 버튼 그룹을 사용해야 할 수도 있습니다. 이 경우 그룹의 라디오 버튼을 선택하면 다른 그룹의 라디오 버튼이 선택 해제될 수 있습니다.

이 문제를 해결하려면 두 그룹의 버튼 요소에 있는 name 속성 값이 달라야 합니다. 이는 첫 번째 라디오 버튼 그룹에 대해 모든 라디오 버튼의 name 속성에 동일한 값을 사용해야 함을 의미합니다.

두 번째 그룹의 경우 name 속성의 값은 첫 번째 그룹과 달라야 하지만 두 번째 그룹의 모든 라디오 버튼은 동일한 값을 가져야 합니다.

fieldset 요소를 사용하여 두 그룹을 시각적으로 구분할 수도 있습니다. <fieldset> 태그는 HTML의 관련 요소를 그룹화합니다.

아래 예에서는 두 그룹의 라디오 버튼을 만듭니다. 첫 번째 그룹에서는 사용자가 오토바이를 선택할 수 있고 두 번째 그룹에서는 자동차를 선택할 수 있습니다.

예를 들어 <form> 태그를 사용하여 양식을 만듭니다. 그런 다음 오토바이 라디오 버튼 그룹에 대해 <fieldset> 태그를 사용합니다.

Honda에 대한 라디오 버튼을 만들고 name 속성에 motorcycle 값을 설정합니다. 다음으로 Yamaha에 대한 또 다른 라디오 버튼을 만들고 name 속성 값을 motorcycle로 다시 설정합니다.

<fieldset> 태그를 닫은 후 자동차 라디오 버튼에 대한 또 다른 fieldset 요소를 만듭니다. 자동차에서 Hyundai 및 Toyota 라디오 버튼을 만듭니다.

두 버튼에 대해 name 속성 값을 car로 설정합니다. 코드 예제는 아래와 같습니다.

<form>
  Select a Motorcyle
  <fieldset id="motorcyle">
    <input type="radio" value="Honda" name="motorcycle">
    <label for="Honda">Honda</label><br>
    <input type="radio" value="Yamaha" name="motorcycle">
    <label for="Yamaha">Yamaha</label><br>
  </fieldset><br>

  Select a Car
  <fieldset id="car">
    <input type="radio" value="Hyundai" name="car">
    <label for="hyundai">Hyundai</label><br>
    <input type="radio" value="Toyota" name="car">
    <label for="toyota">Toyota</label><br>
  </fieldset>
</form>

따라서 라디오 버튼의 두 그룹에서 각 오토바이와 자동차를 선택할 수 있습니다. fieldset 요소는 각 그룹 주위에 테두리를 만듭니다.

이런 식으로 HTML의 단일 양식에 두 그룹의 라디오 버튼을 추가할 수 있습니다.