HTML DOM 숫자 입력 필드의 name 속성 사용법 완벽 가이드

HTML DOM의 input number name 속성은 HTML 문서에서 type="number"로 지정된 입력 필드의 name 속성 값을 반환하거나 수정하는 데 사용됩니다. name 속성은 폼 데이터가 서버로 전송될 때 해당 입력값을 식별하는 중요한 역할을 하며, JavaScript를 통해 동적으로 읽거나 변경할 수 있습니다.

구문(Syntax)

기본적인 사용 구문은 다음과 같습니다.

1. name 값 반환하기

object.name

2. name 값 변경하기

object.name = "text"

예제(Example)

HTML DOM input number name 속성의 실제 동작 예제를 살펴보겠습니다. 아래 예제는 버튼을 클릭하면 숫자 입력 필드의 name 속성 값을 화면에 출력합니다.

<!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.2rem;
    }
    input{
        width:35%;
        border:2px solid #fff;
        background-color:transparent;
        color:#fff;
        font-weight:bold;
        padding:8px;
    }
    .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 Name 속성 예제</h1>
<input type="number" class="numberInput" value="20102" name="나는 숫자 입력 필드입니다!!">
<p>안녕하세요, 제 이름이 궁금하신가요?</p>
<p>그렇다면 버튼을 클릭해 보세요!</p>
<button onclick="showName()" class="btn">이름 보기</button>
<div class="show"></div>
    <script>
        function showName() {
            var monthInput = document.querySelector(".numberInput");
            var showMsg = document.querySelector(".show");
            showMsg.innerHTML = monthInput.name;
        }
    </script>
</body>
</html>

출력 결과(Output)

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

HTML DOM 숫자 입력 필드의 name 속성 사용법 완벽 가이드

“이름 보기” 버튼을 클릭하면 숫자 입력 필드의 name 속성 값이 아래 영역에 표시됩니다.

HTML DOM 숫자 입력 필드의 name 속성 사용법 완벽 가이드

정리

name 속성은 단순히 값을 저장하는 것을 넘어, 폼 제출 시 서버에서 각 입력 데이터를 구분하는 키(key) 역할을 합니다. JavaScript의 DOM 조작을 통해 이 값을 런타임에 동적으로 확인하거나 변경하면, 사용자 상호작용에 따라 유연하게 폼 구조를 제어할 수 있습니다.