HTML DOM Input Datetime required 속성 완벽 가이드

HTML DOM의 Input Datetime required 속성은 폼(form)을 제출할 때 날짜/시간(datetime) 입력 필드의 설정이 필수인지 여부를 결정합니다. 이 속성을 활용하면 사용자가 날짜와 시간 값을 비워 둔 채 폼을 제출하는 상황을 효과적으로 방지할 수 있습니다.

문법(Syntax)

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

불리언 값 반환

inputDatetimeObject.required

required 속성 설정

inputDatetimeObject.required = booleanValue

불리언 값(Boolean Values)

booleanValue에는 다음 두 가지 값을 사용할 수 있습니다.

booleanValue	설명
true	폼을 제출하려면 datetime 필드를 반드시 설정해야 함을 의미합니다.
false	기본값(default)으로, datetime 필드 설정이 필수가 아닙니다.

예제(Example)

다음은 Input Datetime required 속성을 활용한 실제 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Datetime required</title>
</head>
<body>
<form>
기말고사 날짜/시간: <input type="datetime" id="datetimeSelect" value="" required>
</form>
<button onclick="finalizeDatetime()">날짜/시간 확인</button>
<div id="divDisplay"></div>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDatetime = document.getElementById("datetimeSelect");
    divDisplay.textContent = '시험 날짜/시간 필수 여부: '+inputDatetime.required;
    function finalizeDatetime() {
       if(inputDatetime.value === '')
          divDisplay.textContent += ', 유효한 시험 날짜/시간을 입력해 주세요. ';
       else
          divDisplay.textContent = '기말고사 날짜/시간: '+inputDatetime.value
    }  
</script>
</body>
</html>

출력 결과(Output)

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

'날짜/시간 확인' 버튼을 클릭한 경우:

HTML DOM Input Datetime required 속성 완벽 가이드 – 문법부터 예제까지

datetime 필드에 값이 설정된 상태에서 '날짜/시간 확인' 버튼을 클릭한 경우:

HTML DOM Input Datetime required 속성 완벽 가이드 – 문법부터 예제까지

참고 사항

<input type="datetime">은 현재 대부분의 최신 브라우저에서 더 이상 지원되지 않으며 HTML 표준에서도 제거된 요소입니다. 실무 환경에서는 날짜와 시간을 함께 선택할 수 있는 <input type="datetime-local"> 사용을 권장합니다.