HTML DOM Input Time value 속성 – 개념 정리와 실전 예제

HTML DOM의 Input Time value 속성은 시간 입력 필드(<input type="time">)의 value 속성에 담긴 값을 문자열 형태로 반환합니다. 반대로, 이 속성에 새로운 문자열을 할당하여 입력 필드의 값을 직접 설정하는 것도 가능합니다.

문법(Syntax)

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

1. 값 가져오기

inputTimeObject.value

2. 값 설정하기

value 속성에 새로운 문자열 값을 할당합니다.

inputTimeObject.value = 'String'

예제(Example)

아래 예제는 Input Time value 속성을 활용해 사용자가 입력한 시간이 정답과 일치하는지 확인하는 간단한 추측 게임입니다. 버튼을 클릭하면 자바스크립트가 입력된 시간 값을 읽어와 조건에 따라 결과 메시지를 화면에 출력합니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Time value</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-value</legend>
<label for="TimeSelect">시간 선택: </label>
<input type="time" id="TimeSelect" value="00:00">
<input type="button" onclick="checkForGuess()" value="Guess">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputTime = document.getElementById("TimeSelect");
    divDisplay.textContent = '행사가 시작되는 시간은 언제일까요?';
    function checkForGuess() {
        if (inputTime.value === '18:30')
            divDisplay.textContent = '정답입니다! 행사는 ' + inputTime.value + '에 시작됩니다.';
        else
            divDisplay.textContent = '아쉽네요, 틀렸습니다. 다시 한번 도전해 보세요!';
    }
</script>
</body>
</html>

실행 결과(Output)

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

'Guess' 버튼을 틀린 시간으로 클릭한 경우 – 오답 메시지가 출력되며 재도전을 유도합니다.

HTML DOM Input Time value 속성 – 개념 정리와 실전 예제

'Guess' 버튼을 정확한 시간(18:30)으로 클릭한 경우 – 정답 메시지와 함께 행사 시작 시간이 표시됩니다.

HTML DOM Input Time value 속성 – 개념 정리와 실전 예제

이처럼 Input Time의 value 속성을 활용하면 사용자가 선택한 시간 값을 손쉽게 읽어오거나 변경할 수 있어, 폼 유효성 검사나 동적인 UI 처리에 매우 유용하게 사용됩니다.