HTML DOM 숨김 입력 필드의 name 속성 사용법 완벽 정리

HTML DOM의 input hidden name 속성은 HTML 문서에서 type="hidden"으로 지정된 입력 필드의 name 속성 값을 읽어오거나 변경하는 데 사용됩니다. 숨김 입력 필드는 화면에는 보이지 않지만 폼 데이터 전송 시 중요한 역할을 하므로, 이 속성을 자바스크립트로 제어하는 방법을 아는 것은 매우 유용합니다.

문법(Syntax)

name 속성의 기본 문법은 다음과 같습니다.

1. name 값 반환하기

object.name

2. name 값 변경하기

object.name = "text"

예제(Example)

아래 예제를 통해 HTML DOM input hidden name 속성의 실제 동작을 확인해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        text-align:center;
        background-color:#F19A3E;
        color:#fff;
    }
    .btn{
        background-color:#3C787E;
        border:none;
        height:2rem;
        border-radius:50px;
        width:60%;
        margin:1rem auto;
        display:block;
        color:#fff;
        outline:none;
    }
    .show{
        color:#fff;
        font-size:1.2rem;
        font-weight:600;
    }
</style>
</head>
<body>
<h1>DOM Hidden name Property Example</h1>
Enter your Name:
<input type="hidden" class="input-field" name="Hi_I'm_hidden_input_field">
<button onclick="getName()" class="btn">Click to get name of hidden input field</button>
<div class="show"></div>
<script>
    function getName() {
        var inputField = document.querySelector(".input-field");
        var msgDiv= document.querySelector(".show");
        msgDiv.innerHTML=inputField.name;
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM 숨김 입력 필드의 name 속성 사용법 완벽 정리

이제 파란색 버튼을 클릭하면, 자바스크립트의 querySelector() 메서드로 숨김 입력 필드에 접근한 뒤 해당 요소의 name 속성 값을 가져와 화면에 표시합니다.

HTML DOM 숨김 입력 필드의 name 속성 사용법 완벽 정리

핵심 정리

읽기: element.name — 숨김 입력 필드의 현재 name 값을 반환합니다.
쓰기: element.name = "새로운값" — name 속성 값을 동적으로 변경할 수 있습니다.
숨김 필드는 사용자에게 보이지 않지만, 서버로 데이터를 전송할 때 함께 전달되므로 상태 관리나 CSRF 토큰 저장 등에 활용됩니다.