HTML DOM의 Input Search size 속성은 검색 입력 필드(<input type="search">)의 size 속성 값을 설정하거나 반환하는 데 사용됩니다. 이 속성을 활용하면 검색 필드의 너비를 문자 수 단위로 지정할 수 있으며, 별도로 설정하지 않으면 기본 너비는 20자입니다.
주요 특징
- 검색 필드의 시각적 너비를 문자 개수 기준으로 조절합니다.
- 값을 읽어오면 현재 설정된 size 값을 숫자로 반환합니다.
- CSS의 width 속성과 달리 픽셀이 아닌 문자 수 기준으로 동작합니다.
구문
size 속성을 설정하는 구문은 다음과 같습니다.
searchObject.size = number
여기서 number는 검색 필드의 너비를 나타내는 문자 수입니다. 기본값은 20자이며, 값을 할당하지 않으면 브라우저가 자동으로 20자 너비를 적용합니다.
예제
다음 예제는 버튼을 클릭할 때마다 검색 필드의 너비가 20자씩 늘어나도록 구현한 코드입니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input search size 속성</h1>
<form>
과일: <input type="search" id="SEARCH1" name="fruits">
</form>
<p>아래 버튼을 클릭하여 검색 필드의 너비를 변경해 보세요.</p>
<button onclick="changeSize()">변경</button>
<p id="Sample"></p>
<script>
function changeSize() {
document.getElementById("SEARCH1").size += 20;
var s = document.getElementById("SEARCH1").size;
document.getElementById("Sample").innerHTML = "현재 검색 필드 너비: " + s;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 초기 상태에서는 기본 너비(20자)의 검색 필드가 표시됩니다.
변경 버튼을 클릭하면 size 값이 20씩 증가하여 검색 필드가 점점 넓어지고, 하단에 현재 너비 값이 출력됩니다.
정리
Input Search size 속성은 JavaScript만으로 검색 입력 필드의 너비를 동적으로 제어할 수 있는 간편한 방법입니다. 사용자 입력 공간을 늘리거나 줄여야 하는 인터랙티브 폼 UI를 만들 때 유용하게 활용할 수 있습니다.