<input type="hidden">

<input> 태그의 type="hidden"은 사용자가 시각적으로 보거나 직접 수정할 수 없는 값을 나타내는 숨겨진 필드입니다.

이 필드는 데이터를 다루는 웹 개발자가 웹 폼에 추가적인 데이터를 포함시키기 위해 사용되며, 폼이 제출될 때 서버로 전송됩니다.

HTML 
<form>
    <div>
        <label for="title" name="title">포스팅 제목</label>
        <input type="text" id="title" value="즐겁게 HTML 공부하기">
    </div>
    <div>
        <label for="content">포스팅 내용</label>
        <textarea id="content" cols="21" rows="5" name="content">
            즐겁게 HTML을 공부하려면....
        </textarea>
    </div>
    <button type="submit">포스팅 업데이트</button>

    <!-- 사용자가 시각적으로 보거나 직접 수정할 수 없는 값을 나타내는
         숨겨진 필드 -->
    <input type="hidden" name="nonce" value="796c7766b1"> <!-- 보안 토큰 용도로 사용 -->
</form>
HTML <textarea> 태그
브라우저에서 실제 표시된 모습

사용 용도

type="hidden"은 주로 데이터를 다루는 웹 개발자가 사용하며, 다음과 같은 다양한 용도로 사용됩니다.

사용자 입력 방지

특정 값을 사용자가 변경하거나 입력하지 못하도록 방지하는 데 사용됩니다. 예를 들어, 폼 고유 식별자나 보안 토큰과 같은 값을 type="hidden"에 저장할 수 있습니다.

HTML 
<form>
    <label for="user-password">사용자 비밀번호</label>
    <input type="password" id="user-password">
    <button type="submit">제출</button>
    <!-- 보안 토큰 용도로 사용 -->
    <input type="hidden" name="nonce" value="796c7766b1"> 
</form>

추가 데이터 전송

사용자가 직접 입력하지 않은 추가 데이터를 폼에 포함시키는 데 사용됩니다. 예를 들어, 현재 페이지의 URL이나 사용자의 위치 정보와 같은 값을 type="hidden"에 저장할 수 있습니다.

HTML 
<form method="get" action="/search" role="search">
    <label for="user-search">사이트 내 검색</label>
    <input
        type="search"
        id="user-search"
        name="query"
        aria-label="사이트 내용을 통해 검색">
    <button type="submit">검색</button>
    <!-- 추가 데이터 전송 용도로 사용: 사용자의 위치 정보 -->
    <input type="hidden" name="user-locale" value="seoul">
</form>

폼 로직 제어

폼의 동작을 제어하는 데 사용됩니다. 예를 들어, 폼 제출 시 수행해야 할 작업을 결정하는 데 type="hidden"의 값을 사용할 수 있습니다.

주의할 점

type="hidden"은 사용자가 시각적으로 보거나 직접 수정할 수 없는 값을 나타내지만 본질적으로 보안적인 측면에서 안전해지는 것은 아닙니다.
브라우저의 개발자 도구를 사용해서 값을 볼 수 있고 편집할 수 있습니다. 이것은 보안 취약점이 될 수 있습니다. type="hidden"의 값은 웹 폼에 추가적인 데이터를 포함시키는 데 매우 유용하지만, 민감한 정보를 저장하지 않도록 주의하고 항상 적절한 보안 조취를 취해야 합니다.

관련 속성 사용하기

<input type="hidden">에는 주로 value와 name 속성이 사용됩니다. 이 속성들은 폼 데이터의 전송 및 처리를 위해 중요한 역할을 합니다.

value 속성

속성은 type="hidden"에 저장된 값을 나타냅니다.
이 값은 폼이 제출될 때 서버로 전송되거나, 자바스크립트의 XMLHttpRequest 또는 fetch API를 사용하여 비동기적으로 데이터를 서버로 전송할 때도 value 속성의 값을 포함할 수 있습니다.

HTML 폼이 제출될 때 서버로 전송 
<form action="/submit" method="post">
    <input type="hidden" name="user_id" value="12345">
    <button type="submit">제출</button>
</form>
HTML 자바스크립트의 XMLHttpRequest 또는 fetch API를 사용하여 비동기적으로 데이터를 서버로 전송 
<input type="hidden" id="user_id" name="user_id" value="12345">

<script>
    document.getElementById("submit-button").addEventListener("click", function() {
        const userId = document.getElementById("user_id").value;

        fetch("/submit", {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
            },
            body: `user_id=${userId}`
        }).then(response => {
            return response.json();
        }).then(data => {
            console.log(data);
        });
    });
</script>

<button id="submit-button">Submit</button>

name 속성

컨트롤의 이름을 나타냅니다. 양식이 제출될 때 이 이름이 컨트롤을 식별하는데 사용됩니다.

HTML 
<input type="hidden" name="session_token" value="abcdefg">

브라우저 호환성

input type 속성의 hidden값에 대한 브라우저 호환성과 관련 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<input type="hidden"> 1 12 1 1
name 1 12 1 1

명세서

input type 속성의 hidden 값에 대한 명세서 사양
명세서 사양
<input type="hidden"> HTML Standard
#hidden-state-(type=hidden)

참고문헌

같이 보기