HTML DOM Input Time 객체는 HTML에서 type="time"으로 지정된 <input> 요소를 JavaScript로 다룰 수 있도록 해주는 인터페이스입니다. 이 객체를 활용하면 시간 입력 필드의 값을 읽거나 설정하고, 다양한 속성을 동적으로 제어할 수 있습니다.
문법(Syntax)
다음은 Input Time 객체의 기본적인 사용 문법입니다.
type이 time인 <input> 요소 생성하기
var timeObject = document.createElement("input");
timeObject.type = "time";주요 속성(Attributes)
Input Time 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| autocomplete | 시간 필드의 자동 완성(autocomplete) 속성 값을 정의합니다. |
| autofocus | 페이지가 처음 로드될 때 해당 시간 필드에 자동으로 포커스를 줄지 여부를 지정합니다. |
| defaultValue | 시간 필드의 기본값(default value)을 설정하거나 반환합니다. |
| disabled | 시간 필드의 비활성화/활성화 여부를 정의합니다. |
| form | 해당 시간 필드를 포함하고 있는 폼(form)의 참조를 반환합니다. |
| max | 시간 필드의 max(최대) 속성 값을 반환하거나 설정합니다. |
| min | 시간 필드의 min(최소) 속성 값을 반환하거나 설정합니다. |
| name | 시간 필드의 name 속성 값을 정의합니다. |
| readOnly | 시간 필드가 읽기 전용(read-only)인지 여부를 정의합니다. |
| required | 폼 제출 시 해당 시간 필드가 필수 입력 항목인지 여부를 정의합니다. |
| step | 시간 필드의 step(증감 단위) 속성 값을 정의합니다. |
| type | 시간 필드의 폼 요소 유형(type)을 반환합니다. |
| value | 시간 필드의 value 속성 값을 정의합니다. |
주요 메서드(Methods)
Input Time 객체는 아래와 같은 메서드도 제공합니다.
| 메서드 | 설명 |
|---|---|
| stepDown() | 시간 필드의 값을 지정한 분(minute) 단위만큼 감소시킵니다. |
| stepUp() | 시간 필드의 값을 지정한 분(minute) 단위만큼 증가시킵니다. |
예제
이제 Input Time의 form 속성을 활용한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Time form</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 id="Physics">
<fieldset>
<legend>Time-form</legend>
<label for="TimeSelect">Examination Time :
<input type="time" id="TimeSelect" value="14:00" disabled>
</label>
<input type="button" onclick="getform()" value="Which Exam?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputTime = document.getElementById("TimeSelect");
function getform() {
divDisplay.textContent = inputTime.form.id+' exam starts from '+inputTime.value;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Which Exam?' 버튼을 클릭하기 전 화면입니다.
'Which Exam?' 버튼을 클릭한 후 화면입니다. 버튼을 누르면 시간 필드가 속한 폼의 id 값과 시험 시작 시간이 함께 표시됩니다.
