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

HTML DOM Input Hiddenオブジェクトの使い方をわかりやすく解説

HTML DOM の Input Hidden オブジェクトは、HTMLドキュメント内の type="hidden" が設定された <input> 要素を表します。隠し入力フィールドはブラウザ上には表示されませんが、フォーム送信時にユーザーから見えない形でデータをサーバーへ受け渡す際などに活用されます。

この記事では、Input Hidden オブジェクトの作成方法、主なプロパティ、そして実際の使用例について解説します。

Input Hiddenオブジェクトの作成方法

JavaScriptで隠し入力フィールドを作成する場合は、次のように記述します。

構文

var hiddenInput = document.createElement("INPUT");
hiddenInput.setAttribute("type", "hidden");

主なプロパティ

HTML DOM Input Hidden オブジェクトの主なプロパティは以下のとおりです。

プロパティ説明
form隠し入力フィールドを含むフォームへの参照を返します。
name隠し入力フィールドの name 属性の値を取得・変更します。
type入力フィールドの type 属性の値を返します。
defaultValue隠し入力フィールドの初期値（デフォルト値）を取得・変更します。
value隠し入力フィールドの value 属性の値を取得・変更します。

サンプルコード

それでは、HTML DOM Input Hidden オブジェクトの使用例を見てみましょう。この例では、ボタンをクリックするたびに入力フィールドの type 属性を「text」と「hidden」で切り替えることで、入力欄の表示・非表示を操作しています。

<!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;
   }
   input{
      border:1px solid #fff;
      background-color:transparent;
      color:#fff;
      padding:8px;
      outline:none;
   }
   input::placeholder{
      color:#fff;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1>DOM Input Hidden Object Example</h1>
<input type="text" placeholder="Enter your name" class="input-field">
<button onclick="showHide()" class="btn">Click to show/hide input field</button>
<script>
   function showHide() {
      var inputField = document.querySelector(".input-field");
      if(inputField.type === 'text'){
         inputField.type='hidden';
      } else {
         inputField.type='text';
      }
   }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のように表示されます。

HTML DOM Input Hiddenオブジェクトの使い方をわかりやすく解説

「Click to show/hide input field」ボタンをクリックすると、テキスト入力フィールドが非表示（hidden）に切り替わり、画面から消えます。

HTML DOM Input Hiddenオブジェクトの使い方をわかりやすく解説

  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注