HTML DOM의 Input Search value 속성은 type="search"로 지정된 input 요소의 value 어트리뷰트와 연결된 속성입니다. 이 속성을 활용하면 검색 입력 필드(search field)에 설정된 값을 읽어오거나, 원하는 값으로 새롭게 지정할 수 있습니다.
주로 검색 필드의 기본값(default value)을 지정하는 용도로 사용되며, 사용자가 필드에 텍스트를 직접 입력하면 해당 값으로 자동 갱신됩니다.
구문
value 속성의 기본적인 사용 구문은 다음과 같습니다.
값 설정하기
searchObject.value = text;
여기서 text는 검색 필드에 지정하고자 하는 문자열 값을 의미합니다.
값 가져오기
var val = searchObject.value;
위와 같이 작성하면 검색 필드에 현재 입력되어 있는 값을 변수에 담아 다양하게 활용할 수 있습니다.
예제
다음은 Input Search value 속성을 실제로 활용한 예제입니다. 버튼을 클릭하면 검색 필드에 입력된 값을 화면에 출력해 줍니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input search Value property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>
<p>Get the above element value by clicking the below button</p>
<button onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
function getValue() {
var t = document.getElementById("SEARCH1").value;
document.getElementById("Sample").innerHTML = "The value for the input field is : "+t;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
검색 필드에 임의의 텍스트를 입력한 뒤 [Get Value] 버튼을 클릭하면, 입력한 값이 하단 문단에 그대로 출력되는 것을 확인할 수 있습니다.
