HTML DOM의 Input URL defaultValue 속성은 URL 입력 필드(<input type="url">)에 해당하는 기본값을 설정하거나 반환하는 속성입니다. value 속성은 사용자가 URL 입력 필드에 값을 입력할 때마다 실시간으로 변경되지만, defaultValue 속성은 사용자가 값을 아무리 수정해도 변하지 않고 HTML 문서에 처음 지정된 기본값을 그대로 유지한다는 점이 핵심적인 차이입니다.
문법(Syntax)
defaultValue 속성의 기본 문법은 다음과 같습니다.
1. 기본값 반환하기
inputURLObject.defaultValue
2. 기본값 설정하기
inputURLObject.defaultValue = 'string'
예제(Example)
다음은 Input URL defaultValue 속성을 활용한 예제 코드입니다. 버튼을 클릭하면 현재 입력된 값이 기본값으로 초기화되는 동작을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Input URL 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>URL-defaultValue</legend>
<label for="URLSelect">URL :
<input type="url" id="URLSelect" size="25" value="https://www.google.com">
</label>
<input type="button" onclick="getDefaultValue()" value="Reset Default Value">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputURL = document.getElementById("URLSelect");
divDisplay.textContent = 'defaultValue: '+inputURL.defaultValue;
function getDefaultValue() {
var currentValue = inputURL.value;
divDisplay.textContent = 'Value - '+inputURL.value+' resets to - '+inputURL.defaultValue;
inputURL.value = inputURL.defaultValue;
}
</script>
</body>
</html>실행 결과(Output)
위 예제를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
버튼 클릭 전
'Reset Default Value'(기본값 재설정) 버튼을 클릭하기 전에는 입력 필드에 기본값인 https://www.google.com이 표시되며, 하단에 defaultValue 값이 함께 출력됩니다.
URL 변경 후 버튼 클릭 시
입력 필드의 URL을 다른 주소로 변경한 뒤 버튼을 클릭하면, value 속성은 변경되었던 값에서 defaultValue로 되돌아가며 입력 필드가 기본값으로 초기화됩니다. 이처럼 defaultValue 속성은 폼 리셋 기능을 구현할 때 매우 유용하게 활용됩니다.
