HTML DOM 숫자 입력(number) min 속성 완벽 정리

HTML DOM의 input number min 속성은 HTML 문서에서 type="number"로 지정된 입력 필드의 min(최솟값) 속성 값을 읽어오거나 수정할 때 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 숫자 입력 필드에 허용되는 최소 범위를 동적으로 제어할 수 있습니다.

문법(Syntax)

min 속성의 기본적인 사용 문법은 다음과 같습니다.

1. min 값 반환하기

object.min

2. min 값 설정하기

object.min = "숫자"

예제(Example)

다음은 HTML DOM input number min 속성을 활용한 실전 예제입니다. 사용자에게 학번을 입력받고, 1부터 60 사이의 유효한 값인지 검사한 뒤 결과를 화면에 표시하는 프로그램입니다.

<!DOCTYPE html>
<html>
<head>
<style>
    html{
        height:100%;
    }
    body{
        text-align:center;
        color:#fff;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
        height:100%;
    }
    p{
        font-weight:700;
        font-size:1.1rem;
    }
    input{
        display:block;
        width:35%;
        border:2px solid #fff;
        background-color:transparent;
        color:#fff;
        font-weight:bold;
        padding:8px;
        margin:1rem auto;
    }
    .btn{
        background:#0197F6;
        border:none;
        height:2rem;
        border-radius:2px;
        width:35%;
        margin:2rem auto;
        display:block;
        color:#fff;
        outline:none;
        cursor:pointer;
    }
    .show{
        font-size:1.5rem;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Input Number min/max 속성 데모</h1>
<p>학번을 입력하세요 (1 ~ 60 사이)</p>
<input type="number" class="numberInput" min="1" max="60">
<button type="button" onclick="showMySelection()" class="btn">Show Roll Number</button>
<div class="show"></div>
<script>
    function showMySelection() {
        var numberInput = document.querySelector(".numberInput");
        var showMsg = document.querySelector(".show");
        console.log(numberInput.min, numberInput.max);
        if(numberInput.value === ''){
            showMsg.innerHTML = "값을 입력해 주세요!!";
        }else{
            if((numberInput.value >= 1) && (numberInput.value <= 60)){
                showMsg.innerHTML = numberInput.value;
            }else{
                showMsg.innerHTML = "올바른 학번을 입력해 주세요!!";
            }
        }
    }
</script>
</body>
</html>

위 예제에서는 <input type="number" min="1" max="60">처럼 HTML 단계에서 최솟값과 최댓값을 미리 지정해 두었으며, 버튼을 클릭하면 자바스크립트의 min, max 속성으로 이 값들을 읽어 콘솔에 출력합니다.

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM 숫자 입력(number) min 속성 완벽 정리 – 문법과 예제

1부터 60 사이의 학번을 입력한 후 “Show Roll Number” 버튼을 클릭하면, 입력한 학번이 그대로 화면에 표시됩니다.

HTML DOM 숫자 입력(number) min 속성 완벽 정리 – 문법과 예제

반대로 지정된 범위를 벗어난 학번을 입력하고 버튼을 클릭하면, 아래와 같이 경고 메시지가 출력되어 잘못된 입력임을 알려줍니다.

HTML DOM 숫자 입력(number) min 속성 완벽 정리 – 문법과 예제

핵심 정리

min 속성: 숫자 입력 필드(type="number")에 허용되는 최솟값을 읽거나 설정합니다.
max 속성: min과 짝을 이루어 허용되는 최댓값을 제어합니다.
두 속성을 함께 사용하면 폼 유효성 검사(form validation) 시 입력 범위를 손쉽게 강제할 수 있습니다.
자바스크립트에서 element.min = "새로운값" 형태로 실행 중에도 최솟값을 동적으로 변경할 수 있습니다.