HTML DOM의 Input DatetimeLocal type 속성은 datetime-local 타입의 입력 필드에 대해 해당 요소의 타입(type) 값을 가져오거나 설정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트로 특정 입력 요소가 어떤 타입인지 확인하거나, 동적으로 타입을 변경할 수 있습니다.
문법(Syntax)
type 속성의 기본 문법은 다음과 같습니다.
1. 값 가져오기 (문자열 반환)
inputDatetimeLocalObject.type
2. 값 설정하기 (문자열 할당)
inputDatetimeLocalObject.type = stringValue
설정 가능한 문자열 값(String Values)
위 문법에서 stringValue에 들어갈 수 있는 주요 값들은 다음과 같습니다.
| stringValue | 설명 |
|---|---|
| date | 입력 타입이 날짜(date)임을 정의합니다. |
| datetime-local | 입력 타입이 지역 날짜 및 시간(datetime-local)임을 정의합니다. |
| checkbox | 입력 타입이 체크박스(checkbox)임을 정의합니다. |
| text | 입력 타입이 텍스트(text)임을 정의합니다. |
예제(Example)
다음 예제를 통해 Input DatetimeLocal type 속성의 실제 사용 방법을 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal type</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Datetime-Local-type</legend>
<label for="datetimeLocalSelect">행사 일시 :
<input type="datetime-local" id="datetimeLocalSelect" value="2020-01-01T10:00">
</label>
<input type="button" onclick="getEvent()" value="행사 장소는 어디인가요?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
function getEvent() {
if(inputDatetimeLocal.type === 'datetime-local')
divDisplay.textContent = '가까운 곳에서 행사 개막식이 열립니다';
else
divDisplay.textContent = '인도에서 행사 개막식이 열립니다';
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'행사 장소는 어디인가요?' 버튼 클릭 전
'행사 장소는 어디인가요?' 버튼 클릭 후
버튼을 클릭하면 자바스크립트의 getEvent() 함수가 실행되고, 조건문에서 inputDatetimeLocal.type === 'datetime-local' 비교를 통해 현재 입력 요소의 타입을 검사합니다. 타입이 'datetime-local'과 일치하면 첫 번째 메시지가, 그렇지 않으면 두 번째 메시지가 화면에 표시됩니다.
정리
HTML DOM의 type 속성은 폼 유효성 검사나 동적인 UI 처리 시 매우 유용하게 활용됩니다. 특히 사용자 환경에 따라 datetime-local 타입이 지원되지 않는 브라우저에서는 type 값이 자동으로 'text'로 대체되므로, 이 속성을 활용하면 브라우저 호환성 검사 로직을 쉽게 구현할 수 있습니다.