HTML 라디오(radio) 만들기 input checked 속성

라디오 버튼은 여러 옵션 중에서 단 하나의 선택만을 허용하는 입력 요소이다. 
체크박스와 유사하지만, 라디오 박스는 한 그룹 내에서 하나의 항목만 선택할 수 있다. 

 

 

2024.03.26 - [IT/HTML & CSS] - HTML 체크박스(checkbox) 만들기 input checked 속성

반응형

라디오(radio) 버튼을 사용하는 이유

단일 선택 강제: 라디오 버튼은 여러 옵션 중 하나만 선택할 수 있도록 강제한다. 이것은 사용자가 반드시 단 하나의 옵션을 선택해야 하는 상황에서 편리하다. 

직관적 사용자 인터페이스: 라디오 버튼은 사용자에게 여러 옵션 중에서 단 하나의 옵션을 선택할 수 있도록 직관적인 인터페이스를 제공한다. 
사용자가 명확하게 단일 선택을 해야 하는 경우에 적합하다.

정보의 명확한 표시: 라디오 버튼은 사용자에게 선택할 수 있는 옵션을 명확하게 제시한다. 각각의 라디오 버튼은 다른 옵션을 나타내며, 사용자가 옵션들 간의 선택을 쉽게 할 수 있도록 해준다.

데이터 일관성 보장: 라디오 버튼은 오직 하나의 옵션만 선택되기 때문에 데이터의 일관성을 보장한다. 
사용자가 여러 옵션을 선택하는 대신에 하나의 옵션만 선택하므로, 데이터베이스나 서버에 전송되는 데이터가 명확하고 일관되게 유지된다.

라디오 버튼 사용법

<form>
    <input type="radio" id="option1" name="options" value="option1">
    <label for="option1">Option 1</label><br>

    <input type="radio" id="option2" name="options" value="option2">
    <label for="option2">Option 2</label><br>

    <input type="radio" id="option3" name="options" value="option3">
    <label for="option3">Option 3</label><br>
</form>

라디오 버튼은 동일한 name 속성 값을 가져야 하나의 그룹으로 인식되어 단일 선택이 가능합니다.
name이 다르면 다른 그룹으로 인식되어 각 개별 선택이 가능합니다.
라디오 버튼도 체크박스와 같이 <label>과 같이 쓰이는데, label 클릭시 radio 버튼을 선택이 가능하다.
이 같은 특성을 이용하여 CSS로 radio 버튼을 스타일링 할 수도 있다.

 

2024.04.02 - [IT/HTML & CSS] - CSS 체크박스 라디오 커스텀 디자인

checked 속성

라디오 버튼에서 checked 속성은 해당 라디오 버튼이 기본적으로 선택되어 있는지를 나타내는 속성입니다. 라디오 버튼은 그룹 내에서 하나의 항목만 선택할 수 있기 때문에, 특정한 라디오 버튼을 기본으로 선택하려면 그룹 내에서 선택될 라디오 버튼에 checked 속성을 추가하면 됩니다.

<form>
    <input type="radio" id="option1" name="options" value="option1" checked>
    <label for="option1">Option 1</label><br>

    <input type="radio" id="option2" name="options" value="option2">
    <label for="option2">Option 2</label><br>

    <input type="radio" id="option3" name="options" value="option3">
    <label for="option3">Option 3</label><br>
</form>

최종 코드

See the Pen Untitled by 문정현 (@wqmlgxov-the-flexboxer) on CodePen.

 

 

위의 코드에서 보면 checked 속성이 option1 라디오 버튼에 추가되어 있으므로 페이지가 로드될 때 option1이 기본적으로 선택되어 있다.
라디오 버튼 그룹 내에서 여러 라디오 버튼에 checked 속성을 부여할 경우, 마지막으로 선언된 라디오 버튼이 선택된다. 보통 하나의 라디오 버튼만이 기본으로 선택되도록 설정하는 것이 좋다.

오늘의 포스팅은 여기까지
끝까지 읽어주셔서 감사합니다.