HTML DOM의 Input Time defaultValue 속성은 시간 입력 필드(<input type="time">)에 해당하는 기본값을 설정하거나 반환하는 역할을 합니다. 이 속성의 가장 중요한 특징은 사용자가 시간을 변경하면 value 속성 값은 함께 바뀌지만, defaultValue는 HTML에 처음 지정된 초기값을 그대로 유지한다는 점입니다.
즉, defaultValue는 폼을 초기 상태로 되돌리거나, 사용자가 변경한 값과 원래 기본값을 비교해야 하는 상황에서 매우 유용하게 활용할 수 있습니다.
문법(Syntax)
defaultValue 속성의 기본 문법은 다음과 같습니다.
1. 기본값 반환하기
inputTimeObject.defaultValue
2. 기본값 설정하기
inputTimeObject.defaultValue = 'string'
반환되는 값은 HH:MM 또는 HH:MM:SS 형식의 문자열입니다.
예제(Example)
아래 예제는 Input Time defaultValue 속성을 활용해 회의 시간을 임시로 변경하거나 기본 시간으로 되돌린 뒤, 최종적으로 확정하는 과정을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Time defaultValue</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>Time-defaultValue</legend>
<label for="TimeSelect">Meeting At:
<input type="time" id="TimeSelect" value="09:30">
</label><br>
<input type="button" onclick="changeMeet('Alternate')" value="Alternate Meeting Time">
<input type="button" onclick="changeMeet('Default')" value="Default Meeting Time"><br>
<input type="button" onclick="confirmMeet()" value="Confirm Meeting">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputTime = document.getElementById("TimeSelect");
function changeMeet(string) {
if (inputTime.disabled === false) {
if(string === 'Alternate')
inputTime.value = '10:30';
else
inputTime.value = inputTime.defaultValue;
}
}
function confirmMeet() {
inputTime.disabled = true;
divDisplay.textContent = 'Meeting fixed at : '+inputTime.value;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면을 확인할 수 있습니다.
'Alternate Meeting Time' 버튼을 클릭하기 전 −
'Alternate Meeting Time' 버튼을 클릭하여 시간 입력 값을 변경한 후 −
'Default Meeting Time' 버튼을 클릭하여 기본값으로 되돌린 후 −
'Confirm Meeting' 버튼을 클릭하여 회의 시간을 확정한 후 −
정리
value 속성은 사용자의 조작에 따라 실시간으로 변경되지만, defaultValue는 변하지 않는 초기값이라는 차이를 기억하면 됩니다. 이 두 속성의 차이를 제대로 이해하면 폼 초기화 기능이나 사용자 변경 사항 감지 로직을 훨씬 쉽게 구현할 수 있습니다.