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

HTML DOM input hidden の type プロパティとは？使い方をサンプルコードで解説

HTML DOM の input hidden type プロパティは、非表示入力フィールド（input 要素）に設定された type 属性の値を取得するために使用されます。このプロパティを読み取ることで、対象の入力フィールドがどの種類（type）であるかを JavaScript から確認できます。

構文

type プロパティの基本的な構文は以下のとおりです。

object.type

サンプルコード

ここでは、HTML DOM input hidden type プロパティの具体的な使用例を見ていきましょう。ボタンをクリックすると、非表示入力フィールドの type 属性の値が画面に表示される仕組みです。

<!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 type Property Demo</h1>
Enter your Name:<input type="hidden" class="input-field">
<button onclick="getType()" class="btn">Click to get above input type</button>
<div class="show"></div>
<script>
   function getType() {
      var inputField = document.querySelector(".input-field");
      var msgDiv = document.querySelector(".show");
      msgDiv.innerHTML = "type = " + inputField.type;
   }
</script>
</body>
</html>

実行結果

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

HTML DOM input hidden の type プロパティとは？使い方をサンプルコードで解説

続いて、「Click to get above input type」ボタンをクリックしてみましょう。すると、JavaScript の getType() 関数が実行され、非表示入力フィールドの type 属性の値が画面に出力されます。

HTML DOM input hidden の type プロパティとは？使い方をサンプルコードで解説

解説のポイント

  • document.querySelector() を使って、クラス名「input-field」を持つ input 要素を取得しています。
  • 取得した要素の .type プロパティを参照することで、type="hidden" という属性値を文字列として受け取れます。
  • 結果は innerHTML を通じて div 要素内に動的に表示されます。

このように、type プロパティを活用すれば、フォーム内の入力要素の種類をプログラムから簡単に判別でき、条件分岐による動的な処理にも役立ちます。

  1. HTML DOM パスワード入力フィールドの type プロパティとは？使い方を解説

    HTML DOM の Input Password オブジェクトが持つ type プロパティは、type 属性に「password」が設定された input 要素に関連付けられたプロパティです。このプロパティは、パスワード入力フィールドに対して常に文字列「password」を返します。 構文 パスワード型 input 要素の type プロパティは、以下のように記述します。 passwordObject.type サンプルコード それでは、Input Password の type プロパティを使った具体的な例を見てみましょう。 <!DOCTYPE html> <html

  2. HTML DOM Input Range typeプロパティの使い方を徹底解説

    HTML DOM Input Range typeプロパティとはHTML DOMのInput Range typeプロパティは、type=rangeが指定されたinput要素に関連付けられたプロパティです。range型の入力フィールドに対してこのプロパティを参照すると、常に文字列「range」を返します。range型はスライダー形式の入力コントロールを表す要素であり、音量調整や評価値の選択などでよく使われます。JavaScript側で要素の種類を動的に確認したい場合に、このtypeプロパティが役立ちます。構文range typeプロパティの構文は以下の通りです。rangeObject.type