<input type="radio">

<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="interest">
       <label for="css">CSS</label>
    </div>
    <div>
       <input type="radio" id="js" name="interest" value="interest">
       <label for="js">JavaScript</label>
    </div>
</fieldset>
브라우저에서 실제 표시된 모습 그룹화된 라디오 버튼는 전체 중에서 하나만 선택할 수 있습니다.

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

관련 속성 사용하기

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

checked 속성

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

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

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

disabled 속성

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

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

이 밖에도 사용할 수 있는 관련 속성들이 다양하게 있습니다.
HTML <input> 태그의 여러 가지 속성들을 참조하세요!

체크박스와의 차이점

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

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

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

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

그룹화된 여러개의 컨트롤로 체크하기

그룹화된 여러 개의 체크박스를 사용할 경우 사용자는 각각의 체크 박스를 복수로 선택할 수 있는 반면에 라디오 버튼은 전체 중에서 하나만 선택이 가능해야 합니다.

이렇게 구현하려면 <fieldset> 태그로 그룹화된 체크박스나 라디오 버튼에는 모든 동일한 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="interest">
       <label for="css">CSS</label>
    </div>
    <div>
       <input type="checkbox" id="js" name="interest" value="interest">
       <label for="js">JavaScript</label>
    </div>
</fieldset>
HTML <legend> 태그
그룹화된 체크 박스는 복수로 선택할 수 있습니다.

접근성 고려사항

<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

명세서

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

참고문헌

같이 보기