HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM 入力隠し（hidden）フィールドのnameプロパティの使い方を解説

HTML DOM の input hidden 要素の name プロパティは、HTML 文書内で type="hidden" が指定された入力フィールドの name 属性の値を取得したり変更したりするために使用されます。

構文

name プロパティの基本構文は以下の通りです。

1. name の値を取得する

object.name

2. name の値を変更する

object.name = "text"

hidden 入力フィールドとは

type="hidden" の入力フィールドは、ブラウザ上には表示されませんが、フォーム送信時にサーバーへデータを渡すことができる要素です。セッショントークンや識別子など、ユーザーに見せる必要のない情報を保持しておく際に活用されます。

サンプルコード

それでは、HTML DOM input hidden の name プロパティを使用した具体例を見てみましょう。ボタンをクリックすると、隠し入力フィールドの 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>

実行結果

上記のコードをブラウザで実行すると、次のような画面が表示されます。

HTML DOM 入力隠し（hidden）フィールドのnameプロパティの使い方を解説

続いて、青色のボタンをクリックしてみましょう。

HTML DOM 入力隠し（hidden）フィールドのnameプロパティの使い方を解説

ボタンをクリックすると、隠し入力フィールドに設定されていた name 属性の値（この例では「Hi_I'm_hidden_input_field」）が画面に表示されます。

まとめ

name プロパティを使えば、JavaScript から隠し入力フィールドの name 属性を簡単に読み取ったり書き換えたりすることができます。フォームの動的な操作やデータ処理において便利な基本プロパティなので、ぜひ使い方をマスターしておきましょう。

  1. HTML DOM Inputラジオボタンのnameプロパティの使い方を解説

    HTML DOM InputラジオのnameプロパティとはHTML DOMのInputラジオボタンにおけるnameプロパティは、ラジオボタン（input type=radio）のname属性の値を取得・設定するために使用されます。name属性は、フォームデータがサーバーに送信された後に、そのデータを識別するための重要な役割を果たします。また、JavaScript側でもname属性を利用してフォーム要素を参照し、後から動的に操作することができます。構文（Syntax）nameプロパティを設定する場合の構文は以下の通りです。radioObject.name = nameここで指定する「name」は

  2. HTML DOM Input Rangeのnameプロパティとは？設定方法と実例付きで解説

    HTML DOMのInput Range（入力レンジ）オブジェクトのnameプロパティは、レンジ（範囲）入力フィールドのname属性を設定または取得するために使用されます。name属性は、フォームデータがサーバーへ送信された後にデータを識別するための重要な役割を果たします。また、JavaScript側でもname属性を利用してフォーム要素を参照し、後から動的に操作することができます。構文nameプロパティを設定する場合rangeObject.name = name引数として渡すnameには、レンジスライダーコントロールの名前を指定します。使用例それでは、Input Rangeのnameプロパテ