HTML 라디오 버튼 설명

라디오 버튼은 여러 선택지들 중에서 하나를 선택해야 할 때 사용합니다. 라디오 버튼은 보통 여러 개의 라디오 버튼이 존재하는 라디오 그룹을 구성하며 <input> 태그에 type="radio" 속성을 부여해 생성합니다.

 

Please select your favorite food:

Orange

Banana

Tomato

 

이러한 라디오 그룹을 구분하는 기준은 name 속성입니다. 동일한 name인 경우, 같은 라디오 그룹에 속합니다. 라디오 버튼은 하나만 선택할 수 있으며, value 속성을 통해 선택된 라디오 버튼 값을 저장할 수 있습니다.

<input type="radio" id="orange" name="food" value="orange">

그러나 위 태그와 속성은 사용자 화면에는 표시되지 않습니다. 따라서 다음과 같이 id와 <label> 태그의 for 속성을 사용해야 합니다.

<label for="orange">Orange</label>

이를 활용해 다음과 같은 라디오 버튼을 만들 수 있습니다.

<form>
  <p>Please select your favorite food:</p>

  <div>
    <input type="radio" id="orange" name="food" value="orange" checked>
    <label for="orange">Orange</label>
  </div>
  <div>
    <input type="radio" id="banana" name="food" value="banana">
    <label for="banana">Banana</label>
  </div>
  <div>
    <input type="radio" id="tomato" name="food" value="tomato">
    <label for="tomato">Tomato</label>
  </div>
   <div>
    <button type="submit">Submit</button>
  </div>
</form>
<pre id="log">
</pre>

사용자가 특정 라디오 버튼 값을 선택한 경우, 해당 버튼의 value가 name에 할당됩니다. 예를 들어, orange를 선택한 경우, food=orange 가 됩니다.

var form = document.querySelector("form");
var log = document.querySelector("#log");

form.addEventListener("submit", function(event) {
  var data = new FormData(form);
  var output = "";
  for (const entry of data) {
    output = output + entry[0] + "=" + entry[1] + "\r";
  };
  log.innerText = output;
  event.preventDefault();
}, false);

참고: MDN, <input type="radio">