HTML DOM의 Input Search type 속성은 type="search"로 지정된 <input> 요소와 연관된 속성입니다. 이 속성은 검색(search) 타입의 입력 요소에 대해 항상 "search"라는 문자열을 반환합니다. 즉, 해당 입력 필드가 어떤 유형인지 자바스크립트를 통해 동적으로 확인할 때 유용하게 사용됩니다.
문법(Syntax)
search type 속성의 기본 문법은 다음과 같습니다.
searchObject.type
별도의 매개변수 없이 호출하며, 해당 입력 요소의 타입을 문자열 형태로 반환합니다.
예제(Example)
다음 예제를 통해 Input search type 속성의 실제 사용 방법을 살펴보겠습니다. 버튼을 클릭하면 검색 입력 필드의 타입 값을 가져와 화면에 출력하는 구조입니다.
<!DOCTYPE html>
<html>
<body>
<h1>Search type property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>
<p>아래 버튼을 클릭하면 위 요소의 타입을 확인할 수 있습니다.</p>
<button onclick="getType()">Get Type</button>
<p id="Sample"></p>
<script>
function getType() {
var t = document.getElementById("SEARCH1").type;
document.getElementById("Sample").innerHTML = "The type for the input field is : "+t;
}
</script>
</body>
</html>코드 설명
<input type="search">요소가 폼 안에 생성되며, id는 "SEARCH1"로 지정됩니다.- "Get Type" 버튼을 클릭하면
getType()함수가 실행됩니다. - 함수 내부에서
document.getElementById("SEARCH1").type을 통해 해당 요소의 타입 값을 읽어옵니다. - 읽어온 값은 id가 "Sample"인 단락에 출력되어 사용자에게 표시됩니다.
실행 결과(Output)
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
"Get Type" 버튼을 클릭하면 아래 이미지처럼 입력 필드의 타입인 "search"가 화면에 출력됩니다.
이처럼 type 속성을 활용하면 런타임 중에 특정 입력 요소의 유형을 손쉽게 확인할 수 있으며, 조건 분기나 유효성 검사 로직을 작성할 때도 활용도가 높습니다.