HTML DOM의 Input Time max 속성은 <input type="time"> 요소의 max 특성(attribute) 값을 가져오거나 설정하는 기능입니다. 이 속성을 활용하면 사용자가 시간 입력 필드에서 선택할 수 있는 시간의 상한값을 JavaScript로 동적으로 제어할 수 있습니다.
문법(Syntax)
max 속성의 기본 문법은 다음과 같습니다.
1. 현재 max 값 반환하기
inputTimeObject.max
2. max 값 설정하기
문자열 형태의 시간 값을 지정하여 max를 설정합니다.
inputTimeObject.max = hh:mm:ss.ms
문자열 값(String Values) 구성
max 속성에 설정되는 "hh:mm:ss.ms" 형식은 아래 표와 같이 구성됩니다.
| 구성 요소 | 설명 |
|---|---|
| hh | 시(hour)를 나타냅니다. 예: 18 |
| mm | 분(minutes)을 나타냅니다. 예: 59 |
| ss | 초(seconds)를 나타냅니다. 예: 00 |
| ms | 밀리초(milliseconds)를 나타냅니다. 예: 700 |
예제 코드
다음은 Input Time max 속성의 실제 동작을 확인할 수 있는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Time max</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-max</legend>
<label for="TimeSelect">경과 시간:
<input type="time" id="TimeSelect" value="00:00:00" max="03:00:00">
</label>
<input type="button" onclick="getElapsedTime()" value="확인">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputTime = document.getElementById("TimeSelect");
divDisplay.textContent = '최대 허용 시간: '+inputTime.max;
function getElapsedTime() {
if(inputTime.value <= inputTime.max)
divDisplay.textContent = '허용된 시간 '+inputTime.max+' 중 '+inputTime.value+'을(를) 사용했습니다.';
else
divDisplay.textContent = '최대 시간('+inputTime.max+')을 초과할 수 없습니다.';
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'확인' 버튼을 클릭하기 전 화면입니다.
유효하지 않은(최대값을 초과한) 시간을 입력한 상태에서 '확인' 버튼을 클릭한 후의 화면입니다.
유효한 범위 내의 시간을 입력한 상태에서 '확인' 버튼을 클릭한 후의 화면입니다.
정리
Input Time의 max 속성은 시간 입력 필드에 허용되는 최대 시간을 읽고 쓸 수 있게 해주는 유용한 DOM 인터페이스입니다. 폼 유효성 검사나 시간 기반 UI 로직을 구현할 때 min 속성과 함께 활용하면 더욱 견고한 사용자 경험을 만들 수 있습니다.