Thuộc tính value của Input Hidden trong HTML DOM

Thuộc tính value của <input type="hidden"> trả về hoặc thiết lập giá trị của trường ẩn. Đây là cách chính để lưu trữ dữ liệu không hiển thị nhưng gửi kèm form (token, ID, state...).

Cú pháp

Lấy giá trị:

hiddenInput.value

Thiết lập giá trị:

hiddenInput.value = "chuoi_moi"

Ví dụ: Đọc và thay đổi giá trị hidden

<!DOCTYPE html>
<html>
<head>
    <style>
        body { text-align: center; background: #F19A3E; color: white; font-family: sans-serif; padding: 20px; }
        .btn {
            background-color: #3C787E; border: none; color: white;
            padding: 10px 20px; border-radius: 25px; width: 60%;
            margin: 15px auto; display: block; cursor: pointer;
        }
        .show { color: white; font-size: 1.2rem; font-weight: 600; margin-top: 15px; }
    </style>
</head>
<body>
    <h1>Ví dụ Hidden value Property</h1>
    
Trường ẩn: <input type="hidden" class="input-field" value="Tôi là giá trị cũ">
    <button onclick="changeValue()" class="btn">Đổi giá trị</button>
    <div id="result" class="show"></div>
    <script>
        function changeValue() {
            var input = document.querySelector(".input-field");
            var msg = document.getElementById("result");
            msg.textContent = "Giá trị cũ: " + input.value;
            input.value = "Xin chào! Tôi là giá trị mới";
            msg.textContent += " → Giá trị mới: " + input.value;
        }
    </script>
</body>
</html>

Kết quả

Trước khi nhấn:

Console log thay đổi:

Sau khi nhấn "Đổi giá trị":