HTML 체크박스(checkbox) 만들기 input checked 속성

체크 박스와 라디오 박스는 비슷하면서도 다른 요소이다.
체크박스와 라디오 박스는 웹 양식에서 사용자에게 선택 옵션을 제공하는데 사용된다.

체크박스(checkbox)를 사용하는 이유

다중 선택: 체크박스는 여러 항목 중에서 사용자가 필요한 항목을 선택할 수 있다.
이를 통해 사용자가 여러 옵션 중에서 필요한 것들을 동시에 선택할 수 있다.

명확한 시각적 표시: 체크박스는 사용자에게 선택 가능한 항목을 명확하게 시각적으로 표시한다.
사용자는 체크박스를 보고 선택할 수 있는 항목들을 쉽게 인식할 수 있다.

유연성: 체크박스는 선택 사항을 제공함으로써 사용자에게 유연성을 제공한다.
사용자는 필요한 항목을 선택하거나 선택하지 않을 수 있으며, 필요에 따라 선택 사항을 변경할 수 있다.

간편한 사용: 체크박스는 단순한 클릭 또는 탭으로 선택할 수 있다. 이는 사용자에게 사용하기 쉽고 직관적인 방법을 제공한다.

사용자 입력 수집: 체크박스를 사용하여 사용자의 선택을 수집하고 이를 데이터베이스나 서버로 전송하여 처리할 수 있다. 이를 통해 사용자의 선호도나 선택 사항을 파악하고 데이터 기반 의사 결정을 할 수 있다.

시각적인 다양성: CSS를 사용하여 체크박스를 디자인 하고 사용자 정의할 수 있다. 이를 통해 디자인적으로 다양한 모양과 스타일의 체크박스를 만들 수 있다.

체크박스 사용법

 <form>
    <input type="checkbox" id="checkbox" name="checkbox" value="1">
    <label for="checkbox">체크박스</label>
</form>

체크박스는 보통 <label>과 함께 사용 되는데, 그이유는 <label>의 for속성 때문이다.
label의 for속성과 checkbox의 id값이 동일 할 때 두 요소가 연결되어 label 클릭시 checkbox를 선택/해제가 가능하다.
이 같은 특성을 이용하여 CSS로 check박스를 스타일링 할 수도 있다.

 

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

반응형

checked 속성

체크박스에는 checked속성이 존재하는데, 체크박스의 checked 속성은 해당 체크박스가 기본적으로 선택되어 있는지 여부를 나타내는 불리언(boolean) 속성이다. 이 속성을 사용하여 HTML에서 체크박스를 초기 상태에서 선택되도록 설정할 수 있다.

아래와 같이 HTML 코드를 작성하여 체크박스를 생성하고 기본적으로 선택되도록 설정할 수 있다.

<input type="checkbox" id="myCheckbox" name="myCheckbox" checked>
<label for="myCheckbox">기본적으로 선택된 체크박스</label>

위 처럼 checked를 포함하여 작성하면 해당 체크박스가 페이지가 로드될 때 자동으로 선택된 상태로 표시된다.
checked속성을 이용하면 CSS나 자바스크립트를 사용하여 체크박스(checkbox)로 여러가지 일들을 할 수 있다.

 

 

최종 코드

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

 

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