HTML DOM 숫자 입력 필수(required) 속성 완벽 가이드

HTML DOM의 input number 필수(required) 속성은 폼(form)을 제출하기 전에 숫자 입력 필드를 반드시 채워야 하는지 여부를 확인하거나 변경하는 데 사용됩니다. 이 속성을 활용하면 사용자가 중요한 값을 입력하지 않은 채 폼을 제출하는 상황을 효과적으로 방지할 수 있습니다.

문법(Syntax)

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

1. required 값 반환하기

object.required

2. required 값 설정하기

object.required = true | false

true로 설정하면 해당 필드가 필수 입력 항목이 되고, false로 설정하면 선택 사항으로 변경됩니다.

예제 코드

다음은 HTML DOM input number required 속성을 활용한 실전 예제입니다. 생일(날짜)을 입력받는 폼에서 값이 비어 있을 경우 안내 메시지를 표시하도록 구현했습니다.

<!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;
        color:#db133a;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Input number required property Demo</h1>
<form action="">
<p>Hi, Enter your day of birth</p>
<input type="number" class="numberInput" required>
<input type="submit" onclick="checkInput()">
</form>
<div class="show"></div>
<script>
    function checkInput() {
        var numberInput = document.querySelector(".numberInput");
        if(numberInput.value === ''){
            document.querySelector(".show").innerHTML="Please Select";
        }
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM 숫자 입력 필수(required) 속성 완벽 가이드

숫자 입력 필드에 아무 값도 입력하지 않은 상태에서 "Submit(제출)" 버튼을 클릭해 보세요.

HTML DOM 숫자 입력 필수(required) 속성 완벽 가이드

입력값이 비어 있으면 "Please Select"라는 안내 메시지가 화면에 표시되며, required 속성에 의한 브라우저 기본 유효성 검사 덕분에 폼 제출이 자동으로 차단됩니다.

마무리

이처럼 required 속성은 자바스크립트만으로 복잡한 검증 로직을 작성하지 않아도 되도록 도와주는 강력한 기능입니다. 특히 회원가입, 결제 정보 입력 등 필수 데이터 수집이 중요한 폼에서 활용도가 매우 높으니, 실무 프로젝트에 적극적으로 적용해 보시기 바랍니다.