HTML checked 속성 완벽 정리 – 페이지 로드 시 체크박스·라디오 버튼 기본 선택하기

HTML의 checked 속성은 웹 페이지가 로드될 때 <input> 요소가 미리 선택된 상태로 표시되도록 지정하는 데 사용됩니다.

이 속성은 입력 타입이 radio(라디오 버튼) 또는 checkbox(체크박스)인 경우에 적용할 수 있습니다.

checked 속성 기본 문법

체크박스(input type="checkbox")에 checked 속성을 적용하는 기본 문법은 다음과 같습니다.

<input type="checkbox" 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>

실행 결과

HTML checked 속성 완벽 정리 – 페이지 로드 시 체크박스·라디오 버튼 기본 선택하기

코드 설명

위 예제에서는 다양한 입력 요소(text, password, date, tel, email)와 제출 버튼으로 구성된 폼을 만들었습니다.

<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"로 생성했으며, 페이지가 로드될 때 선택된 상태로 만들기 위해 checked 속성을 추가했습니다.

<input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription:

정리

checked 속성은 불린(Boolean) 속성으로, 값 없이 속성 이름만 작성해도 적용됩니다.
radio와 checkbox 타입에서만 동작합니다.
페이지 로드 시 기본 선택 상태를 지정하고 싶을 때 유용하게 활용할 수 있습니다.