HTML의 <input> 요소에서 checked 속성은 웹 페이지가 로드될 때 체크박스(checkbox)가 미리 선택된 상태로 표시되도록 지정하는 속성입니다. 이 속성은 체크박스뿐만 아니라 라디오 버튼(radio) 타입의 입력 요소에도 동일하게 적용할 수 있습니다.
checked 속성 문법
checked 속성의 기본 문법은 다음과 같습니다.
<input type="checkbox" checked>
위 코드처럼 checked를 추가하면, 웹 페이지가 로드되는 순간 해당 체크박스가 자동으로 선택된 상태로 나타납니다.
checked 속성 예제
이제 <input> 요소의 checked 속성을 실제로 구현한 예제를 살펴보겠습니다.
예제 코드
<!DOCTYPE html> <html> <body> <h2>Register</h2> <form action = "" method = "get"> Id: <input type = "text" name = "id" placeholder = "Enter UserId here..." size = "25"><br> Password: <input type = "password" name = "pwd" placeholder = "Enter password here..."><br> DOB: <input type = "date" name = "dob" placeholder = "Enter date of birth here..."><br> Telephone: <input type = "tel" name = "tel" placeholder = "Enter mobile number here..."><br> Email: <input type = "email" name = "email" placeholder = "Enter email here..." size = "35"><br><br> <input type = "checkbox" name = "vehicle" value = "Bike" checked>Newsletter Subscription:<br> <button type = "submit" value = "Submit">Submit</button> </form> </body> </html>
실행 결과
위 예제는 아이디, 비밀번호, 생년월일, 전화번호, 이메일 입력 필드와 함께 제출 버튼이 있는 회원가입 폼입니다.
<form action = "" method = "get"> Id: <input type = "text" name = "id" placeholder = "Enter UserId here..." size = "25"><br> Password: <input type = "password" name = "pwd" placeholder = "Enter password here..."><br> DOB: <input type = "date" name = "dob" placeholder = "Enter date of birth here..."><br> Telephone: <input type = "tel" name = "tel" placeholder = "Enter mobile number here..."><br> Email: <input type = "email" name = "email" placeholder = "Enter email here..." size = "35"><br><br> <input type = "checkbox" name = "vehicle" value = "Bike" checked>Newsletter Subscription:<br> <button type = "submit" value = "Submit">Submit</button> </form>
여기에 다음과 같이 체크박스를 하나 추가했습니다.
<input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription:
코드에서 볼 수 있듯이 checked 속성이 설정되어 있기 때문에, 페이지가 로드될 때 해당 체크박스는 항상 선택된 상태로 유지됩니다. 사용자가 직접 클릭하여 해제하기 전까지는 기본적으로 체크된 모습으로 화면에 표시됩니다.
정리
checked 속성은 불리언(Boolean) 속성으로, 값 없이 속성 이름만 작성해도 됩니다. 주로 뉴스레터 구독, 약관 동의처럼 기본값으로 선택을 유도하고 싶은 경우에 활용하며, 라디오 버튼 그룹에서 초기 선택 항목을 지정할 때도 널리 사용됩니다.