HTML DOM Input Search defaultValue 속성이란?
HTML DOM의 Input Search defaultValue 속성은 검색 필드(search field)의 기본값을 설정하거나 가져오는 데 사용되는 속성입니다. 요소의 defaultValue란 value 속성에 할당된 초기값을 의미합니다.
value 속성과 defaultValue 속성의 차이점은 다음과 같습니다.
- defaultValue: 페이지 로딩 시 지정된 원래 기본값을 그대로 유지합니다.
- value: 사용자가 검색 필드에 직접 입력한 내용에 따라 실시간으로 변경됩니다.
즉, 사용자가 입력값을 수정한 후에도 defaultValue를 호출하면 처음 설정된 기본값을 그대로 얻을 수 있습니다.
구문(Syntax)
다음은 defaultValue 속성을 설정하는 기본 구문입니다.
searchObject.defaultValue = value
여기서 “value”는 해당 검색 필드에 지정할 기본값을 의미합니다.
예제(Example)
Search defaultValue 속성의 동작을 확인할 수 있는 실제 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input Search defaultValue Property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" value="MANGO">
</form>
<p>CHANGE 버튼을 클릭하여 위 검색 필드의 기본값을 변경해 보세요.</p>
<button type="button" onclick="changeDefault()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeDefault() {
document.getElementById("SEARCH1").defaultValue="APPLE";
var P=document.getElementById("SEARCH1").defaultValue;
document.getElementById("Sample").innerHTML = "기본값이 MANGO에서 "+P+"(으)로 변경되었습니다" ;
}
</script>
</body>
</html>출력 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
CHANGE 버튼을 클릭하면 아래와 같이 기본값이 변경된 것을 확인할 수 있습니다.
코드 상세 설명
위 예제의 핵심 부분을 단계별로 살펴보겠습니다.
1. 검색 입력 필드 생성
먼저 type="search", id="SEARCH1", name="fruits"로 지정된 <input> 요소를 생성하고, value 속성을 “MANGO”로 설정했습니다. 이 검색 필드는 <form> 태그 안에 위치합니다.
<form> FRUITS: <input type="search" id="SEARCH1" name="fruits" value="MANGO"> </form>
2. CHANGE 버튼 생성
사용자가 클릭하면 changeDefault() 함수를 실행하는 버튼을 만듭니다.
<button type="button" onclick="changeDefault()">CHANGE</button>
3. changeDefault() 함수의 동작
changeDefault() 함수는 getElementById() 메서드를 사용하여 type이 search인 입력 필드를 가져온 뒤, 해당 요소의 defaultValue 속성을 “APPLE”로 변경합니다.
이어서 다시 getElementById() 메서드를 호출하여 검색 입력 필드의 defaultValue 값을 읽어 변수 P에 저장합니다. 마지막으로 innerHTML 속성을 활용해 이 값을 id가 “Sample”인 단락(<p>)에 출력합니다.
function changeDefault() {
document.getElementById("SEARCH1").defaultValue="APPLE";
var P=document.getElementById("SEARCH1").defaultValue;
document.getElementById("Sample").innerHTML = "기본값이 MANGO에서 "+P+"(으)로 변경되었습니다" ;
}정리
HTML DOM의 Input Search defaultValue 속성은 검색 필드의 초기 기본값을 자바스크립트로 제어할 때 유용하게 활용됩니다. 폼 리셋(form reset) 시 복원되는 값이 바로 이 defaultValue이므로, 사용자 입력값(value)과 명확히 구분하여 사용하는 것이 중요합니다.