HTML DOM의 Input Search 객체는 type 속성이 "search"로 지정된 <input> 요소와 연결되는 객체입니다. JavaScript에서는 createElement() 메서드를 사용해 검색 입력 필드를 동적으로 생성할 수 있고, 이미 문서에 존재하는 요소는 getElementById() 메서드로 접근하여 제어할 수 있습니다.
Input Search 객체의 주요 속성
Input Search 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| autocomplete | 검색 필드의 자동 완성 기능을 사용할지 여부를 설정하거나 반환합니다. |
| autofocus | 페이지가 로드될 때 해당 검색 필드가 자동으로 포커스를 받을지 여부를 설정하거나 반환합니다. |
| defaultValue | 검색 필드의 기본값(default value)을 설정하거나 반환합니다. |
| disabled | 검색 필드가 비활성화되어 있는지 여부를 설정하거나 반환합니다. |
| form | 해당 검색 필드를 포함하고 있는 form 요소의 참조를 반환합니다. |
| list | 검색 필드에 연결된 datalist 요소의 참조를 반환합니다. |
| maxLength | 검색 필드의 maxlength 속성값을 설정하거나 반환합니다. |
| name | 검색 필드의 name 속성값을 설정하거나 반환합니다. |
| pattern | 검색 필드의 pattern(정규식 패턴) 속성값을 설정하거나 반환합니다. |
| placeholder | 검색 필드의 placeholder(힌트 텍스트) 속성값을 설정하거나 반환합니다. |
| readOnly | 검색 필드가 읽기 전용인지 여부를 설정하거나 반환합니다. |
| required | 폼 제출 전에 검색 필드 입력이 필수인지 여부를 설정하거나 반환합니다. |
| size | 검색 필드의 size(너비) 속성값을 설정하거나 반환합니다. |
| type | 읽기 전용 속성으로, 해당 폼 요소의 타입(type)을 반환합니다. |
| value | 검색 필드의 value 속성값을 설정하거나 반환합니다. |
문법(Syntax)
JavaScript로 검색 타입의 입력 요소를 새로 생성하는 기본 문법은 다음과 같습니다.
var P = document.createElement("INPUT");
P.setAttribute("type", "search");먼저 document.createElement("INPUT")으로 input 요소를 만든 뒤, setAttribute()를 통해 type을 "search"로 지정하는 방식입니다.
예제(Example)
버튼을 클릭하면 type이 "search"인 입력 필드를 동적으로 생성하는 간단한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<script>
function createSearch() {
var S = document.createElement("INPUT");
S.setAttribute("type", "search");
document.body.appendChild(S);
}
</script>
</head>
<body>
<p>아래 버튼을 클릭하면 type이 search인 입력 필드가 생성됩니다.</p>
<button onclick="createSearch()">CREATE</button>
<br><br>
FRUITS:
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CREATE 버튼을 클릭한 후 −
버튼을 클릭하면 createSearch() 함수가 호출되어, 새로운 검색 입력 필드가 문서 본문(body) 끝에 추가되는 것을 확인할 수 있습니다. 이처럼 Input Search 객체를 활용하면 사용자의 동작에 반응해 검색 UI를 유연하게 구성할 수 있습니다.