HTML DOM Input Date required 속성 완벽 정리

HTML DOM의 Input Date required 속성은 날짜 입력 필드가 폼 제출 시 필수 항목인지 여부를 결정하는 속성입니다. 이 속성을 활용하면 사용자가 날짜를 반드시 입력하도록 강제할 수 있어 폼 유효성 검사에 유용하게 사용됩니다.

문법(Syntax)

required 속성의 기본 문법은 다음과 같습니다.

1. boolean 값 반환하기

현재 required 속성의 설정 상태를 true 또는 false 값으로 반환합니다.

inputDateObject.required

2. required 속성 설정하기

booleanValue를 지정하여 required 속성을 설정합니다.

inputDateObject.required = booleanValue

boolean 값 종류

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

booleanValue	설명
true	폼을 제출하기 위해 날짜 필드 입력이 필수임을 의미합니다.
false	기본값이며, 날짜 필드 입력이 필수가 아님을 의미합니다.

예제 코드

이제 Input Date required 속성의 실제 사용 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Date required</title>
</head>
<body>
<form>
<div>
이름: <input type="text" name="fullName">
</div>
<div>
생년월일: <input type="date" id="dateSelect" required>
</div>
</form>
<button onclick="submit()">확인</button>
<div id="divDisplay"></div>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDate = document.getElementById("dateSelect");
    function submit() {
        if(inputDate.required==true && inputDate.value==='')
            divDisplay.textContent = '생년월일은 필수 입력 항목입니다';
        else
            divDisplay.textContent = '정보가 접수되었습니다';
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

'확인' 버튼 클릭 시 – 날짜가 입력되지 않은 상태에서 버튼을 누르면 required 속성이 true이므로 '생년월일은 필수 입력 항목입니다'라는 메시지가 표시됩니다.

날짜 입력 후 '확인' 버튼 클릭 시 – 날짜 필드에 값이 설정된 상태에서 버튼을 누르면 '정보가 접수되었습니다'라는 메시지가 표시됩니다.

정리

Input Date의 required 속성은 자바스크립트로 동적으로 읽거나 설정할 수 있으며, 폼 제출 전 날짜 입력 여부를 검증하는 데 활용됩니다. 기본값은 false이며, true로 설정하면 해당 날짜 필드가 필수 입력 항목이 됩니다.