[ HTML ] 라디오 버튼 기본 이해

2024. 6. 16. 15:56· FRONT-END/└ HTML

 

 

 

 라디오 버튼은, 같은 이름의 라디오 버튼들 중에서 하나만 선택할 수 있다. 

체크박스와는 다르기 때문에, 상황에 맞게 적절히 배치하면 좋다. 

 

둘 중 하나만 선택할 수 있는 라디오 버튼 예시이다. 

<div class="cell flex-cell">
       <div class="w-50"><input type="radio" name="type" class="check-item" checked> 일반회원</div>
       <div class="w-50 right"><input type="radio" name="type" class="check-item"> 관리자</div>
</div>

     (+) name="type" : 같은 이름을 주어 같은 라디오버튼임을 명시. 

     (+) checked 속성을 사용하여, 처음 페이지에 접속할 때 체크 표시가 되어있는 상태로 보여준다.

 

 

 

개인 공부 기록용입니다:)

728x90