HTML DOM input hiddenのvalueプロパティとは？取得・変更方法を実例で解説
HTML DOM の input hidden value プロパティは、HTML文書内で type="hidden" が指定された入力フィールドの value属性の内容を取得（参照）および変更するために使用されます。
なお、type="hidden" の入力フィールドは画面上には表示されません。主に、ユーザーに見せることなくデータを一時的に保持しておきたい場合などに利用されます。
構文
基本的な構文は以下の通りです。
1. 値を取得する場合
object.value
2. 値を変更する場合
object.value = "text"
サンプルコード
それでは、HTML DOM input hidden value プロパティの具体的な使用例を見てみましょう。
<!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;
cursor:pointer;
}
.show{
color:#fff;
font-size:1.2rem;
font-weight:600;
}
</style>
</head>
<body>
<h1>DOM Hidden value Property Example</h1>
Here is hidden input field:
<input type="hidden" class="input-field" value="Hi! I was previous value of hidden input">
<button onclick="getType()" class="btn">Click to change value</button>
<div class="show"></div>
<script>
function getType() {
var inputField = document.querySelector(".input-field");
var msgDiv = document.querySelector(".show");
msgDiv.innerHTML = "" + inputField.value + "";
inputField.value = "Hello! I'm new value of hidden input"
msgDiv.innerHTML += "" + inputField.value + "";
}
</script>
</body>
</html>実行結果
このコードを実行すると、次のような画面が表示されます。
コンソールの表示：
続いて、「Click to change value」ボタンをクリックしてみましょう。クリックすると、隠し入力フィールドの値が新しいものに変更されます。コンソールのスクリーンショットと併せて確認すると、動作の流れがより理解しやすくなります。
コンソールの表示：
まとめ
input hidden value プロパティを使えば、JavaScriptから非表示フィールドの値を自由に読み書きできます。フォーム送信時に内部データを受け渡したい場合や、ページ遷移間で状態を保持したい場合などに非常に便利なので、ぜひ活用してみてください。
-
HTML DOM ラジオボタンのvalueプロパティとは？取得・設定方法を解説
HTML DOMのInput Radio valueプロパティは、type=radioが指定されたinput要素のvalue属性に関連するプロパティです。ラジオボタンのvalue属性の値を取得（get）または設定（set）するために使用されます。ラジオボタンのvalueプロパティは、その値が画面上に表示されないため、Webサイトのユーザーインターフェースには直接影響しません。しかし、フォームを送信する際に、同じグループ内の複数のラジオボタンを区別するために非常に役立ちます。構文valueプロパティを設定する場合の構文は以下の通りです。radioObject.value = text;ここで、t
-
HTML DOM Input Rangeのvalueプロパティとは？使い方とサンプルコードを解説
HTML DOMのInput Range valueプロパティは、type=rangeが指定されたinput要素に関連するプロパティです。スライダー（レンジ）コントロールのvalue属性の値を取得したり、新しい値を設定したりするために使用されます。value属性には初期値（デフォルト値）や、ユーザーがスライダーをドラッグして設定した値が格納されます。構文valueプロパティの構文は以下の通りです。値を設定する場合rangeObject.value = text;ここで「text」には、レンジスライダーコントロールに設定したい値を指定します。サンプルコードそれでは、Input Rangeのval