HTML DOM 입력 이메일 size 속성 – 이메일 입력 필드 너비 제어 방법

HTML DOM의 Input Email size 속성은 이메일 입력 필드(<input type="email">)의 화면상 너비를 문자 수 단위로 가져오거나 설정하는 데 사용됩니다. 만약 HTML에서 size 속성이 별도로 정의되어 있지 않다면, 이 속성은 기본값인 '20'을 반환합니다.

구문(Syntax)

Input Email size 속성의 기본 구문은 다음과 같습니다.

size 속성 값 반환하기

inputEmailObject.size

size 속성에 숫자 값 설정하기

inputEmailObject.size = number

예제

이제 Input Email size 속성의 실제 활용 예제를 살펴보겠습니다. 아래 예제에서는 버튼을 클릭하면 이메일 입력 필드의 size 값을 10에서 30으로 늘려 입력 필드의 가시성을 높이는 동작을 구현했습니다.

<!DOCTYPE html>
<html>
<head>
<title>Input Email 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>Email-size</legend>
<label for="EmailSelect">Email Id :
<input type="email" id="EmailSelect" 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 inputEmail = document.getElementById("EmailSelect");
    function increaseVisibility() {
        inputEmail.size = 30;
        divDisplay.textContent = 'Visibility Increased to '+inputEmail.size;
    }
</script>
</body>
</html>

출력 결과

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'Increase Visibility' 버튼을 클릭하기 전 −

HTML DOM 입력 이메일 size 속성 – 이메일 입력 필드 너비 제어 방법

'Increase Visibility' 버튼을 클릭한 후 −

HTML DOM 입력 이메일 size 속성 – 이메일 입력 필드 너비 제어 방법

참고 사항

size 속성의 값은 픽셀(px)이 아니라 평균 문자 폭을 기준으로 한 문자 개수를 의미합니다.
더 정밀한 너비 제어가 필요하다면 CSS의 width 속성을 함께 사용하는 것이 좋습니다.
이 속성은 Chrome, Firefox, Safari, Edge 등 모든 주요 브라우저에서 지원됩니다.