정의 및 사용 방법

<input> 태그의 type="radio"는 라디오 버튼을 나타냅니다.

일반적으로 그룹화된 라디오 버튼을 사용하며, 주어진 그룹에서 하나의 라디오 버튼만을 선택할 수 있습니다.

이렇게 구현하려면 <fieldset> 태그로 그룹화된 라디오 버튼에는 모든 동일한 name 속성과 값을 지정해야 하지만, value 속성의 값은 각각 지정합니다.

name 속성은 컨트롤의 이름을 나타냅니다. 양식이 제출될 때 이 이름이 컨트롤을 식별하는데 사용됩니다.

기본 예제

HTML 
<fieldset>
    <legend>관심이 있는 웹 개발 언어를 선택하세요.</legend>
    <div>
       <input type="radio" id="html" name="interest" value="html">
       <label for="html">HTML</label>
    </div>
    <div>
       <input type="radio" id="css" name="interest" value="css">
       <label for="css">CSS</label>
    </div>
    <div>
       <input type="radio" id="js" name="interest" value="js">
       <label for="js">JavaScript</label>
    </div>
</fieldset>
브라우저에서 실제 표시된 모습 그룹화된 라디오 버튼는 전체 중에서 하나만 선택할 수 있습니다.

<input type="radio">의 암시적인 role 속성의 값은 radio입니다.

관련 속성 사용하기

<input type="radio">와 관련된 속성에 대해 알아보겠습니다.

checked 속성

checked 속성은 라디오 버튼이 기본적으로 체크되어 있는지 여부를 나타내는 속성입니다. 페이지가 처음 로드될 때 라디오 버튼이 체크된 상태로 시작하려면 checked 속성을 사용합니다. 하지만 페이지가 로드된 후 사용자가 라디오 버튼을 체크하거나 체크 해제해도 checked 속성은 변경되지 않습니다.

이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<input type="radio" checked>
브라우저에서 실제 표시된 모습

disabled 속성

라디오 버튼을 비활성시키려면 disabled 속성을 사용하세요.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<input type="radio" disabled>
브라우저에서 실제 표시된 모습

value 속성은 초깃값을 설정합니다.
폼 제출 시 해당 요소가 체크된 상태인 경우에만 전송되는 값을 지정합니다. 출력되는 화면에서는 아무런 표시가 되지 않습니다. 이 값이 지정되지 않으면 폼 제출 시 해당 요소가 체크된 상태인 경우 기본값인 on 문자열이 사용됩니다.

HTML 
<fieldset>
    <legend>관심이 있는 웹 개발 언어를 선택하세요.</legend>
    <div>
       <input type="radio" id="html" name="interest" value="html">
       <label for="html">HTML</label>
    </div>
    <div>
       <input type="radio" id="css" name="interest" value="css">
       <label for="css">CSS</label>
    </div>
    <div>
       <input type="radio" id="js" name="interest" value="js">
       <label for="js">JavaScript</label>
    </div>
</fieldset>
실제 적용된 모습

name 속성

name 속성은 해당 요소의 이름을 나타냅니다.
name 속성이 지정되어 있으면, 그 값을 참조하여 폼 제출 시 전송되는 데이터의 이름으로 사용됩니다. 자바스크립트에서도 name 속성의 값을 참조하여 해당 요소의 form.elements API의 이름으로 사용됩니다.

여러 개의 라디오 버튼을 그룹화하기

name 속성은 <input type="radio">에서 여러 개의 라디어 버튼을 같이 묶어 사용할 수 있습니다.
동일한 name 값을 가진 여러 라디오 버튼을 함께 묶어 그룹화하면, 폼이 제출될 때 선택된 라디오 버튼의 value 값은 같은 name을 공유하면서도 각기 다른 값으로 전송됩니다.

관련성이 있는 여러 개의 라디오 버튼을 같은 그룹으로 묶으면, 마크업 구조상으로나 전송되는 데이터상으로나 사용자가 어떤 특정 라디오 버튼 그룹에 속하는 것을 체크했는지 쉽게 파악할 수 있다는 장점이 있습니다.

HTML 
<fieldset>
    <legend>관심이 있는 웹 개발 언어를 선택하세요.</legend>
    <div>
       <input type="radio" id="html" name="interest" value="html">
       <label for="html">HTML</label>
    </div>
    <div>
       <input type="radio" id="css" name="interest" value="css">
       <label for="css">CSS</label>
    </div>
    <div>
       <input type="radio" id="js" name="interest" value="js">
       <label for="js">JavaScript</label>
    </div>
</fieldset>

이때, 그룹화된 라디오 버튼에 여러 개의 라디오 버튼이 있어도 사용자는 하나의 라디오 버튼에만 체크할 수 있다는 특징이 있습니다.

실제 적용된 모습

required 속성

required 속성은 폼 제출 시 사용자가 사전에 반드시 체트박스에 체크해야 하는 필수(required) 컨트롤 요소임을 나타냅니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

동일한 name을 공유하는 라디오 버튼 그룹에 required 속성 적용하려면, 그룹 내에서 최소한 하나의 라디오 버튼을 선택해서 required 속성 적용하면 라디오 버튼 그룹 전체가 필수 항목으로 그룹핑됩니다. 하지만 코드의 가독성을 위해 라디오 버튼 그룹에 속해 있는 모든 라디오 버튼에 required 속성을 적용하는 것이 더 좋습니다.

라디오 버튼 그룹 내에서 최소한 하나의 라디오 버튼에 지정

라디오 버튼 그룹 내에서 최소한 하나의 라디오 버튼을 선택해서 required 속성 적용하면 라디오 버튼 그룹 전체가 필수 항목으로 그룹핑됩니다.

HTML 
<form>
    <fieldset>
        <legend>색상 선택은 필수</legend>
        <p>
            <input id="red" type="radio" name="color" value="red" required> <!-- 그룹 내에서 최소한 하나의 라디오 버튼을 선택 -->
            <label for="red">Red</label>
        </p>
        <p>
            <input id="red" type="radio" name="color" value="green">
            <label for="green">Green</label>
        </p>
        <p>
            <input id="red" type="radio" name="color" value="blue">
            <label for="blue">Blue</label>
        </p>
        <p>
            <button type="submit">제출</button>
        </p>
    </fieldset>
</form>
실제 적용된 모습 라디오 버튼에 체크하지 않고 '제출'버튼을 클릭해보세요!
브라우저가 필수 입력에 대한 오류 메시지를 표시하는 것을 확인할 수 있습니다.
그룹 내에 속한 모든 라디오 버튼에 지정

코드의 가독성 측면에서는 라디오 버튼 그룹에 속해 있는 모든 라디오 버튼에 required 속성을 적용하는 것이 더 좋습니다.

HTML 
<form>
    <fieldset>
        <legend>색상 선택은 필수</legend>
        <p>
            <input id="red" type="radio" name="color" value="red" required>
            <label for="red">Red</label>
        </p>
        <p>
            <input id="red" type="radio" name="color" value="green" required>
            <label for="green">Green</label>
        </p>
        <p>
            <input id="red" type="radio" name="color" value="blue" required>
            <label for="blue">Blue</label>
        </p>
        <p>
            <button type="submit">제출</button>
        </p>
    </fieldset>
</form>
실제 적용된 모습 라디오 버튼에 체크하지 않고 '제출'버튼을 클릭해보세요!
브라우저가 필수 입력에 대한 오류 메시지를 표시하는 것을 확인할 수 있습니다.

체크박스와의 차이점

체크박스는 라디오 버튼과 유사하지만 중요한 차이점이 있습니다.

체크박스는 <input type="checkbox">로 나타냅니다.

단일한 컨트롤에 체크와 체크 해제

체크박스와 라디오 버튼의 단일한 컨트롤에 체크와 체크 해제 차이점
라디오 버튼 단일한 라디오 버튼에 번갈아가며 체크와 체크 해제를 할 수 없습니다.
체크박스 단일한 체크박스에 번갈아가며 체크와 체크 해제를 할 수 있습니다.
HTML 
<input type="radio">
<input type="checkbox">
브라우저에서 실제 표시된 모습 다음의 예제로 실습해 보세요.

그룹화의 차이점

라디오 버튼과 체크박스를 그룹화할 때는, 그룹화할 항목에 동일한 name 속성 값을 지정해야 하며, 각 항목의 value 속성 값은 서로 달라야 한다는 공통점이 있습니다.

하지만, 그룹화된 체크박스는 사용자가 여러 개를 선택할 수 있는 반면, 그룹화된 라디오 버튼은 하나만 선택할 수 있다는 차이점이 있습니다.

그룹화된 체크박스
HTML 
<fieldset>
    <legend>관심이 있는 웹 개발 언어를 선택하세요.</legend>
    <div>
       <input type="checkbox" id="html" name="interest" value="html">
       <label for="html">HTML</label>
    </div>
    <div>
       <input type="checkbox" id="css" name="interest" value="css">
       <label for="css">CSS</label>
    </div>
    <div>
       <input type="checkbox" id="js" name="interest" value="js">
       <label for="js">JavaScript</label>
    </div>
</fieldset>

코드 부연설명
<legend> 태그는 부묘 요소인 <fieldset> 태그로 그룹화해서 세트로 묶은 요소들에 대한 캡션(간단한 제목이나 설명)을 나타내기 위해 사용하는 태그입니다.

그룹화된 체크 박스는 복수로 선택할 수 있습니다.
그룹화된 라디오 버튼
HTML 
<fieldset>
    <legend>관심이 있는 웹 개발 언어를 선택하세요.</legend>
    <div>
       <input type="radio" id="html" name="interest" value="html">
       <label for="html">HTML</label>
    </div>
    <div>
       <input type="radio" id="css" name="interest" value="css">
       <label for="css">CSS</label>
    </div>
    <div>
       <input type="radio" id="js" name="interest" value="js">
       <label for="js">JavaScript</label>
    </div>
</fieldset>
그룹화된 라디오 버튼는 전체 중에서 하나만 선택할 수 있습니다.

접근성 고려 사항

<input type="radio">를 사용할 때에는 <label>을 함께 사용해야 합니다.
자세한 사항은 <input> 태그의 접근성 고려 사항을 참조하세요.

브라우저 호환성

input type 속성의 radio 값에 대한 브라우저 호환성과 관련 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<input type="radio"> 1 12 1 1
checked 1 12 1 1
disabled 1 12 1 1
name 1 12 1 1
value 1 12 1 1

명세서

input type 속성의 radio 값에 대한 명세서 사양
명세서 사양
<input type="radio"> HTML Standard
#radio-button-state-(type=radio)

참고문헌

같이 보기