개발/HTML
HTML 라디오 버튼 설명
휘Hwi
2020. 10. 21. 00:38
라디오 버튼은 여러 선택지들 중에서 하나를 선택해야 할 때 사용합니다. 라디오 버튼은 보통 여러 개의 라디오 버튼이 존재하는 라디오 그룹을 구성하며 <input> 태그에 type="radio" 속성을 부여해 생성합니다.
이러한 라디오 그룹을 구분하는 기준은 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);