checked 속성이란?
HTML에서 페이지가 로드될 때 특정 <input> 요소가 미리 선택된 상태로 표시되도록 지정하려면 checked 속성을 사용합니다. 이 속성은 불리언(Boolean) 속성으로, 별도의 값을 지정하지 않고 작성하기만 해도 해당 요소가 기본적으로 체크된 상태로 나타납니다.
checked 속성은 다음 두 가지 입력 타입에서 사용할 수 있습니다.
<input type = "checkbox"> <input type = "radio">
- checkbox: 여러 항목을 중복 선택할 수 있는 체크박스
- radio: 여러 항목 중 하나만 선택할 수 있는 라디오 버튼
사용 예제
아래 코드를 실행하면 checked 속성이 적용된 모습을 직접 확인할 수 있습니다. 이 예제에서는 '축구'와 '크리켓' 항목에 checked 속성을 추가하여, 페이지가 열리는 순간 두 항목이 미리 선택된 상태로 표시됩니다.
<!DOCTYPE html> <html> <body> <p>어떤 스포츠를 좋아하시나요?</p> <form action = "" method = "get"> <input type = "checkbox" name = "vehicle" value = "football" checked> 축구<br> <input type = "checkbox" name = "vehicle" value = "cricket" checked> 크리켓<br> <input type = "checkbox" name = "vehicle" value = "hockey"> 하키<br> <input type = "submit" value = "제출"> </form> </body> </html>
참고 사항
위 예제처럼 checked 속성을 추가한 항목('축구', '크리켓')은 사용자가 직접 클릭하기 전에도 이미 선택된 채로 화면에 나타나며, 속성이 없는 '하키'는 빈 상태로 표시됩니다. 라디오 버튼 그룹에서 checked 속성을 사용하면 초기 기본값을 지정할 수 있어, 설문조사나 회원가입 폼 등에서 자주 활용됩니다.