HTML DOM Input Week defaultValue 속성 완벽 정리

HTML DOM의 Input Week defaultValue 속성은 주(week) 유형 입력 필드의 기본값을 설정하거나 반환하는 속성입니다. 이 속성의 가장 큰 특징은, 사용자가 화면에서 주 입력 필드의 값을 아무리 변경해도 value 속성은 바뀌지만 defaultValue는 처음 지정된 기본값을 그대로 유지한다는 점입니다.

기본 개념

defaultValue는 HTML 문서에 작성된 초기 value 속성값을 기준으로 합니다. 따라서 폼을 리셋하거나 자바스크립트로 초기값을 복원할 때 매우 유용하게 활용할 수 있습니다.

문법(Syntax)

defaultValue 속성의 사용 문법은 다음과 같습니다.

문자열 값 반환하기

inputWeekObject.defaultValue

defaultValue를 문자열로 설정하기

inputWeekObject.defaultValue = 'string'

예제 코드

다음은 Input Week defaultValue 속성의 동작을 확인할 수 있는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Week 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>Week-defaultValue</legend>
<label for="WeekSelect">Target Week:
<input type="week" id="WeekSelect" value="2022-W01">
</label>
<input type="button" onclick="getDefaultValue()" value="Reset Default Value">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputWeek = document.getElementById("WeekSelect");
    divDisplay.textContent = 'Week: '+inputWeek.defaultValue.split("-W")[1];
    divDisplay.textContent += ' & Year: '+inputWeek.defaultValue.split("-W")[0];
    function getDefaultValue() {
        var currentValue = inputWeek.value;
        divDisplay.textContent = 'Value - '+inputWeek.value+' resets to - '+inputWeek.defaultValue;
        inputWeek.value = inputWeek.defaultValue;
    }
</script>
</body>
</html>

코드 설명

위 예제에서는 type="week"로 지정된 입력 필드에 초기값으로 2022-W01(2022년 1주차)이 설정되어 있습니다. 페이지가 로드되면 스크립트가 defaultValue.split("-W")를 통해 기본값을 연도와 주차로 분리하여 화면에 표시합니다. 이후 버튼을 클릭하면 현재 입력된 값과 기본값을 비교해 보여주고, 입력 필드의 값을 다시 기본값으로 되돌립니다.

실행 결과(Output)

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

'Reset Default Value' 버튼을 클릭하기 전 −

HTML DOM Input Week defaultValue 속성 완벽 정리

주(Week) 입력값을 변경했을 때 −

HTML DOM Input Week defaultValue 속성 완벽 정리

'Reset Default Value' 버튼을 클릭한 후 −

HTML DOM Input Week defaultValue 속성 완벽 정리

결과에서 알 수 있듯이, 사용자가 입력값을 변경한 뒤 버튼을 누르면 defaultValue에 저장된 원래 기본값으로 입력 필드가 복원됩니다. 이처럼 defaultValue 속성은 폼 초기화 기능을 구현할 때 활용도가 높습니다.