HTML DOM의 입력 URL size 속성(Input URL size Property)은 URL 타입 입력 필드(<input type="url">)가 화면에 표시되는 너비를 문자 수 단위로 반환하거나 설정하는 데 사용됩니다. HTML에서 별도로 size 값을 지정하지 않으면 기본값인 20이 적용됩니다.
문법(Syntax)
size 속성을 활용하는 기본 문법은 다음과 같습니다.
- size 속성 값 읽어오기
inputURLObject.size
- size 속성에 숫자 값 설정하기
inputURLObject.size = number
예제
아래 예제는 Input URL size 속성을 활용하여 버튼 클릭 한 번으로 URL 입력 필드의 가시 영역을 넓히는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>Input URL size</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>URL-size</legend>
<label for="URLSelect">URL:
<input type="url" id="URLSelect" size="10">
</label><br>
<input type="button" onclick="increaseVisibility()" value="Increase Visibility">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputURL = document.getElementById("URLSelect");
function increaseVisibility() {
inputURL.size = 30;
divDisplay.textContent = 'Visibility Increased to '+inputURL.size;
}
</script>
</body>
</html>
코드 설명
- 처음에 URL 입력 필드는
size="10"으로 지정되어 있어 좁은 너비로 표시됩니다. - Increase Visibility 버튼을 클릭하면
increaseVisibility()함수가 실행되어inputURL.size = 30;코드를 통해 필드 너비를 30자 크기로 확장합니다. - 변경된 size 값은
divDisplay영역에 텍스트로 출력되어 즉각적인 변화를 확인할 수 있습니다.
실행 결과(Output)
위 코드를 브라우저에서 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Increase Visibility(가시성 증가)' 버튼을 클릭하기 전 −
'Increase Visibility(가시성 증가)' 버튼을 클릭한 후 −
참고 사항
- size 속성은 입력 필드의 시각적 너비만 조절할 뿐, 입력 가능한 URL의 실제 길이를 제한하지 않습니다. 길이 제한이 필요하다면
maxlength속성을 함께 사용하세요. - size 값은 반드시 양의 정수여야 하며, 0 또는 음수를 지정하면 브라우저가 기본값으로 처리합니다.
- Chrome, Firefox, Safari, Edge, Opera 등 모든 주요 브라우저에서 해당 속성을 지원합니다.