HTML DOM Input Time step 속성 – 초 단위 간격 설정 방법

HTML DOM의 Input Time step 속성은 시간(time) 입력 필드에서 초 단위의 유효한 간격을 결정합니다. 이 속성을 활용하면 사용자가 선택할 수 있는 시간 값의 증가 단위를 제어할 수 있어, 폼 유효성 검사와 사용자 경험 개선에 유용합니다.

문법(Syntax)

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

값 반환하기

inputTimeObject.step

값 설정하기

step 솞性에 숫자 값을 지정하는 방식입니다.

inputTimeObject.step = number

매개변수(Parameters)

number 매개변수로 사용할 수 있는 값은 다음과 같습니다.

seconds

60을 나누어 떨어지게 하는 숫자만 유효합니다. 예: 10, 15, 20, 30 등

예제(Example)

Input Time step 속성의 실제 동작을 확인할 수 있는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Time step</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-step</legend>
<label for="TimeSelect">Time: </label>
<input type="time" id="TimeSelect" step="2">
<input type="button" onclick="changeStep(20)" value="Step to 20">
<input type="button" onclick="changeStep(30)" value="Step to 30">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputTime = document.getElementById("TimeSelect");
    divDisplay.textContent = '현재 step 값: '+inputTime.step;
    function changeStep(myStep) {
        inputTime.step = myStep;
        divDisplay.textContent = '현재 step 값: '+inputTime.step;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

“Step to 20” 버튼을 클릭한 경우 −

HTML DOM Input Time step 속성 – 초 단위 간격 설정 방법

“Step to 30” 버튼을 클릭한 경우 −

HTML DOM Input Time step 속성 – 초 단위 간격 설정 방법

정리

Input Time step 속성은 자바스크립트를 통해 동적으로 변경할 수 있으며, 버튼 클릭과 같은 이벤트와 함께 활용하면 사용자 상호작용에 따라 시간 입력 간격을 유연하게 조절할 수 있습니다. 특히 예약 시스템이나 스케줄링 폼처럼 특정 시간 단위만 허용해야 하는 경우에 매우 효과적입니다.