<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>
브라우저에서 실제 표시된 모습
<form>
    <label for="user-password">사용자 비밀번호</label>
    <input type="password" id="user-password">
    <button type="submit">제출</button>
    <!-- 보안 토큰 용도로 사용 -->
    <input type="hidden" name="nonce" value="796c7766b1"> 
</form>
<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>
<form action="/submit" method="post">
    <input type="hidden" name="user_id" value="12345">
    <button type="submit">제출</button>
</form>
<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>
<input type="hidden" name="session_token" value="abcdefg">