HTML DOM 입력 체크박스 required 속성 완벽 가이드

HTML DOM의 Input Checkbox required 속성은 폼을 제출하기 전에 해당 체크박스를 반드시 체크해야 하는지 여부를 결정하는 속성입니다. 이 속성을 활용하면 사용자가 필수 동의 항목이나 필수 선택 사항을 건너뛰지 않도록 강제할 수 있습니다.

문법(Syntax)

required 속성의 사용 문법은 다음과 같습니다.

1. 불리언 값 반환 (true/false)

inputCheckboxObject.required

2. required 속성 설정

inputCheckboxObject.required = booleanValue

불리언 값(Boolean Values)

booleanValue에 사용할 수 있는 값은 다음과 같습니다.

booleanValue	설명
true	폼을 제출하려면 체크박스를 반드시 체크해야 함을 의미합니다.
false	기본값으로, 체크박스 체크가 필수가 아닙니다.

예제 코드

다음은 Input Checkbox required 속성의 실제 활용 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>체크박스의 required 속성</title>
</head>
<body>
<form id="Form">
<div>
저를 체크하세요! 필수 항목입니다: <input id="formCheckbox" type="checkbox" name="formCheckbox" required>
</div>
</form>
<button onclick="getRequiredStatus()">폼 제출 가능 여부 확인</button>
<div id="displayDiv"></div>
<script>
    function getRequiredStatus(){
        var requiredBool = document.getElementById("formCheckbox");
        var displayDiv = document.getElementById("displayDiv");
        if(requiredBool.required == false || (requiredBool.required == true && requiredBool.checked == true)){
            displayDiv.textContent = '체크박스의 required 속성: '+requiredBool.required + ', 폼 제출이 가능합니다 ';
        } else {
            displayDiv.textContent = '체크박스를 체크해 주세요'+ ', 현재 required 속성 값: '+requiredBool.required ;
        }
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

체크박스가 체크되지 않은 상태에서 '폼 제출 가능 여부 확인' 버튼을 클릭한 경우:

HTML DOM 입력 체크박스 required 속성 완벽 가이드

체크박스가 체크된 상태에서 '폼 제출 가능 여부 확인' 버튼을 클릭한 경우:

HTML DOM 입력 체크박스 required 속성 완벽 가이드

정리

required 속성은 자바스크립트를 통해 동적으로 읽거나 설정할 수 있어, 상황에 따라 필수 입력 조건을 유연하게 변경해야 하는 폼 유효성 검사 로직에 매우 유용하게 활용됩니다. 특히 약관 동의처럼 사용자의 명시적 확인이 필요한 경우에 효과적입니다.