HTML 라디오 버튼: name 그룹·checked·필수 선택과 전송 값
HTML의 <input type="radio">는 관련 선택지 중 하나를 고르는 라디오 버튼입니다. 같은 양식에서 name이 같은 버튼들을 한 그룹으로 묶고, 각 선택지에 서로 다른 value를 지정합니다. 선택된 버튼의 name·value만 제출됩니다.
그룹의 name과 각 버튼의 id 구분
같은 그룹은 name을 공유하지만 label을 연결하는 id는 각각 고유해야 합니다. 같은 name의 다른 버튼을 고르면 기존 선택이 해제됩니다. 서로 독립적인 질문은 다른 name을 사용하세요. fieldset·legend는 질문의 묶음과 제목을 제공하지만 fieldset을 나누는 것만으로 같은 이름의 라디오 그룹이 분리되지는 않습니다.
그룹은 양식 소유 관계도 영향을 받으므로 다른 form에 있는 같은 name을 무조건 하나의 그룹이라고 일반화하지 않습니다. 다음 예제는 같은 form 안에서 fruit와 sport 두 그룹을 구분합니다.
전체 예제: 두 질문의 선택 값 확인
다음 문서를 radio-demo.html로 저장해 브라우저에서 엽니다. 과일은 필수로 하나 선택하게 하고 운동은 야구를 기본값으로 지정했습니다. 제출을 막고 현재 값을 페이지에 표시하는 실습이므로 별도 서버 처리 파일은 필요하지 않습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>라디오 그룹과 제출 값</title>
</head>
<body>
<h1>선호 항목 실습</h1>
<form id="choices">
<fieldset>
<legend>과일 (필수)</legend>
<input type="radio" id="apple" name="fruit" value="apple" required>
<label for="apple">사과</label>
<input type="radio" id="banana" name="fruit" value="banana" required>
<label for="banana">바나나</label>
</fieldset>
<fieldset>
<legend>운동</legend>
<input type="radio" id="soccer" name="sport" value="soccer">
<label for="soccer">축구</label>
<input type="radio" id="baseball" name="sport" value="baseball" checked>
<label for="baseball">야구</label>
</fieldset>
<button type="submit">값 확인</button>
<button type="reset">초기화</button>
</form>
<pre id="result" aria-live="polite"></pre>
<script>
const form = document.getElementById('choices');
const result = document.getElementById('result');
form.addEventListener('submit', (event) => {
event.preventDefault();
result.textContent = JSON.stringify(Array.from(new FormData(form).entries()), null, 2);
});
form.addEventListener('reset', () => { result.textContent = ''; });
</script>
</body>
</html>- 처음에 과일은 선택되지 않고 운동은 야구가 선택됩니다. 값 확인을 누르면 과일의 필수 선택 검사가 제출을 막습니다.
- 사과를 선택하고 값 확인을 누릅니다. fruit=apple과 sport=baseball이 표시됩니다. 화면에 적힌 “야구”가 아닌 value의 baseball이 데이터에 들어갑니다.
- 바나나를 고르면 사과는 해제됩니다. 축구를 고르면 야구가 해제되지만 과일 선택에는 영향을 주지 않습니다.
- 초기화를 누르면 과일은 미선택, 운동은 야구로 돌아갑니다. reset은 모든 선택을 비우는 동작이 아니라 원래 checked 상태를 복원합니다.
checked·required와 제출 값의 주의점
checked는 초기 선택을 나타내는 불리언 속성입니다. checked="false"도 속성이 존재하므로 거짓을 나타내는 올바른 방법이 아닙니다. 초기 미선택으로 두려면 속성을 생략합니다. 현재 선택 상태를 JavaScript로 읽거나 바꿀 때는 checked 프로퍼티를 사용합니다.
같은 그룹의 버튼 중 하나에 required가 있으면 그 그룹에서 하나는 선택되어야 합니다. 선택할 버튼이 반드시 required가 붙은 버튼이어야 하는 것은 아닙니다. 예제는 조건을 명확히 보이기 위해 두 과일에 모두 지정했습니다.
선택하지 않은 선택 그룹은 제출 항목에서 빠집니다. value를 생략한 선택지는 기본 문자열 on이 전달될 수 있으므로 각 선택지를 구분할 값을 명시하세요. disabled 버튼은 조작과 제출에서 제외되며, 브라우저 검사를 사용하더라도 서버에서는 허용된 값인지 다시 검사해야 합니다.
선택 해제와 키보드 사용
선택된 라디오 버튼을 다시 누른다고 체크박스처럼 해제되지는 않습니다. 사용자가 “선택 없음”을 선택해야 한다면 그 선택지를 별도로 설계할 수 있습니다. 여러 항목을 독립적으로 켜고 끄는 질문이라면 라디오 대신 체크박스를 사용합니다.
label을 연결해 문구로도 선택할 수 있게 하고, 키보드 사용 시 Tab으로 그룹에 접근한 뒤 방향키로 이동·선택하는 기본 동작을 유지합니다. 구체적인 포커스 동작은 브라우저에 따라 차이가 있을 수 있습니다. 속성과 제출 규칙은 MDN radio 입력 문서에서 확인할 수 있습니다.
